ElementUI中表单的验证

前面的话

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

第一步：el-form绑定rules

先看一个例子：

 
    
系统登录
    
       
    
    
       
    
     
      登录 
    

首先在el-form我们可以看到三个属性：

 :rules="rules" :model="loginForm" ref="loginForm"

解释这三个属性：

• :model=“loginForm” ： 是绑定我们form表单中需要提交给后台的一个对象

• :rules=“rules” ： 是动态绑定的rules，表单验证规则

• ref=“loginForm” ： 是我们绑定的对象

对应的我们在js的data对象中添加rules规则和要绑定的对象loginForm：

export default {
      data(){
      return {
        // 校验规则  `required`：是否必填，  `message`: 规则， `trigger`:何时事件触发
        rules: {
          username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
          password: [{required: true, message: '请输入密码', trigger: 'blur'}]
        },
        loginForm: {
          username: 'admin',
          password: '123'
        },
         checked: true,
        loading: false
      }
    }
}

rules中三个属性：

• required：是否必填
• message: 规则
• trigger:何时事件触发

也可以自定义校验规则：通过validator实现

例如校验手机号码：（与上面的例子不同，这里只是举一个例子）

第二步：el-form-item设置prop属性

在每一个el-form-item上面绑定prop属性，这个属性就是我们下面要做正则校验的地方，并且属性prop所绑定的值，都是在loginForm 这个对象中：

第三步：数据提交

  submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
             //如果通过验证 to do...
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

效果图：