Vue（二）--- 表单验证

Vue中表单数据的验证方法

    <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="50px" class="demo-loginForm">
      <el-form-item label="账号" prop="userAccount">
        <el-input type="text" v-model="loginForm.userAccount" autocomplete="off">el-input>
      el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password" autocomplete="off">el-input>
      el-form-item>
      <el-form-item class="loginBtn">
        <el-button type="primary" @click="submitForm('loginForm')">登录el-button>
        <el-button @click="resetForm('ruleForm')">重置el-button>
      el-form-item>
    el-form>

rules是我们绑定的数据检验规则，使用validator检验器，定义在data函数的return 之外。
trigger: ‘blur’ 设定为失去焦点时开始检验。

---

标签中的prop属性要和rules中的key值相同。

data() {
      var validateUserAccount = (rule, value, callback) => {
        /**
         * 账号默认是学号，12位数字值
         */
        let reg = /^20\d{10}$/
        if (!value) {
          callback(new Error("请输入账号"))
        }else{
          if(value.length<12){
            callback(new Error('账号输入少了'))
          }else if(value.length>12){
            callback(new Error('账号输入多了'))
          }
          else if(!reg.test(value)) {
            callback(new Error('账号类型错误'))
          } else {
          /**
           * 本地检测没有格式问题之后，
           *  axios/ajax 后端数据库查询，检测用户是否存在
           */
            callback()
          }
        }
      };

      var validatePassword = (rule, value, callback) => {
        /**
         * 只检测是否输入，没有格式要求
         */
        if (!value) {
          callback(new Error("请输入密码"))
        } else {
          callback()
          
        }
      };
      
      return {
        loginForm: {
          userAccount: '',
          password: '',
        },
        
        rules: {
          userAccount: [
            { validator: validateUserAccount, trigger: 'blur' }
          ],
          password: [
            { validator: validatePassword, trigger: 'blur' }
          ]
        }
      }
    }

要求在点击登录按钮时实现自动的数据检验，放置没有输入数据，直接点击登录按钮

    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
        //valid是检验的结果,bool值
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }