el-form 表单检验，提交的时候只校验部分

蔚落 2021-12-04 01:11 1005阅读 0赞

<template>
      <div>
        <el-form ref="dataFrom" :model="dataFrom" :rules="rules">
          <el-form-item label="用户名">
            <el-input v-model="dataFrom.userName"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="submitData()">  提交</el-button>
      </div>
    </template>
    
    <script>
      export default {
        name: "settlementSignReport",
        data() {
          return {
            dataFrom: {
              userName: ''
            },
            rules: {
              userName: [
                {required: true, message: '请输入用户名', trigger: 'blur'},
              ]
            }
          }
        },
        methods: {
          submitData() {
            this.$refs['dataFrom'].validateField('userName', valid => {
              if (!valid) {
                alert(123)
              } else {
                alert(321)
              }
            })
          }
        }
      }
    </script>

重点是：用form 表单验证 validate 的 validateField  去验证指定的

如果要验证整个表单：

this.$refs['dataFrom'].validate((valid)=>{
        if(valid){
            //验证通过
        }
     })

发表评论取消回复

表情：

评论列表（有 0 条评论，1005人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jquery中实现表单提交前的校验

场景为了安全，通常要进行前端校验和后端校验。前端校验一般在表单提交前实现。实现 form表单元素添加onsubmit事件 <form id="

雨点打透心脏的1/2处/ 2023年10月18日 22:58/ 0 赞/ 122 阅读

相关 vue中单独只校验一个表单

vue中单独只校验一个表单最近做了个忘记密码页面，需要发送验证码之后才能进行重置密码操作，上图：![在这里插入图片描述][20210114181246772.png]

男娘i/ 2023年01月06日 12:59/ 0 赞/ 210 阅读

相关 Vue之表单提交校验组件

仿element实现表单提交校验组件 form组件 <template> <div> <form>

怼烎@/ 2022年12月04日 11:00/ 0 赞/ 244 阅读

相关表单校验

select chargeType: [ { required: true, message: "请选择计费方式", trigger

女爷i/ 2022年11月14日 15:58/ 0 赞/ 244 阅读

相关 Dwz/Jquery--使用Ajax提交表单时调用表单设置的校验

案例今天有一个需求就是点击按钮时，使用ajax方式提交表单，而且不是直接用form表单下的submit按钮提交，表单中用的校验是dwz 自带的校验方式，表单模

喜欢ヅ旅行/ 2022年09月23日 14:57/ 0 赞/ 198 阅读

相关 67. 表单提交与校验

表单提交绝大部分应用程序都需要从用户获得输入，其中很大部分便是以表单输入的形式。一个表单，从用户输入系统接收到数据处理，会经历几个普遍的阶段。一个完备的表单提交流程具备

柔光的暖阳◎/ 2022年09月18日 11:51/ 0 赞/ 208 阅读

相关 javascript表单账户密码校验提交

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

拼搏现实的明天。/ 2022年05月12日 05:36/ 0 赞/ 239 阅读

相关 el-form 表单检验，提交的时候只校验部分

<template> <div> <el-form ref="dataFrom" :model="dataFrom" :rules="rul

蔚落/ 2021年12月04日 01:11/ 0 赞/ 1006 阅读

相关 form表单提交（非ajax提交）前表单校验

<form action="{:url('index/index/loginadd')}" method="post" > <div class="userN

ゝ一世哀愁。/ 2021年10月13日 02:59/ 0 赞/ 667 阅读

相关 Spring Boot (一) 校验表单重复提交

一、前言在某些情况下，由于网速慢，用户操作有误(连续点击两下提交按钮)，页面卡顿等原因，可能会出现表单数据重复提交造成数据库保存多条重复数据。存在如上问题可以交给前

短命女/ 2021年09月07日 06:17/ 0 赞/ 518 阅读