ElementUI中表单的验证

前面的话

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

第一步：el-form绑定rules

先看一个例子：

<el-form :rules="rules" :model="loginForm" ref="loginForm" class="login-container" label-position="left"  label-width="0px"  v-loading="loading" > 
    <h3 class="login_title">系统登录</h3>
    <el-form-item prop="username">
      <el-input type="text" v-model="loginForm.username"
                auto-complete="off" placeholder="账号"></el-input> 
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="loginForm.password"
                auto-complete="off" placeholder="密码"></el-input> 
    </el-form-item>
     <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 100%" @click="submitClick(loginForm)">登录</el-button> 
    </el-form-item>

首先在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实现

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

<script>
export default {
  data() {
    // 此处自定义校验手机号码js逻辑
    var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('号码不能为空!!'))
      }
      setTimeout(() => {
        if (!phoneReg.test(value)) {
          callback(new Error('格式有误'))
        } else {
          callback()
        }
      }, 1000)
    }
    return {
      form: {    
        phone: '',
      },
      // 校验规则
      rules: {
        // 校验手机号码，主要通过validator来指定验证器名称
        phone: [{ required: true, validator: validatePhone, trigger: 'blur' }]
      },
    }
  }
}
</script>

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

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

 	<el-form-item prop="username">
      <el-input type="text" v-model="loginForm.username"
                auto-complete="off" placeholder="账号"></el-input> 
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="loginForm.password"
                auto-complete="off" placeholder="密码"></el-input> 
    </el-form-item>

第三步：数据提交

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

效果图：