elementui 表单验证

• • • 表单验证错误
    • form的几种验证方法：
      • 1.在单个的表单域上传递属性的验证规则。
      • 2. 自定义验证规则，进行多次验证。
      • 3. 直接写在rules内
      • 4. 更多验证规则

表单验证错误

做表单验证时，需要必填，然后判断账户是否为数字。出现一个bug如图。填写了正确的数值但是依旧一直提示为空。

后来发现问题出现在props验证和v-model值上，这两个必须为同一个参数且在data内声明了。

改为prop="thatAccount", roules 内的也改掉，成功执行了验证。

form的几种验证方法：

1.在单个的表单域上传递属性的验证规则。

直接在具体表单上写验证规则，不需要给<el-form>绑定rules。

<el-form-item
    prop="email"
    label="邮箱"
    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>

2. 自定义验证规则，进行多次验证。

2.1需要form绑定roules

<el-form ref="form" 
    :model="search_info" 
    :rules="rules"  
    label-width="100px" 
    size="mini">
    <!-- ``` -->
</el-form>

2.2 data内声明规则,rules放在data下的return内，指定具体自定义的规则。

data{
    var checkThatName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入对方户名'));
      } else if (value.length>13) {
        callback(new Error('太长了！'));
      } else if (value==='猪'){
         callback(new Error('你个大猪蹄子'));
      }else{
        callback();
      }
    };
    return{
        checkinfo:{
            thatName:''
        },
        rules:{
          thatName:{ 
          validator: checkThatName, //自定义验证方法名
          trigger: 'blur' //触发方法，可多个。eg：trigger: ['blur', 'change']
          }
        }
    }
}

3. 直接写在rules内

适用于简单的校验，如必填、邮箱、日期、字段长度、数字。

数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。
eg: v-model.number="checkinfo.thatName"

rules: {
          name: [//需要验证的字段名，下面的只是栗子，有些不能同时存在一个验证内
            { required: true, message: '这是必填项', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址'},
            { type: 'date', required: true, message: '请选择日期'},//因为直接调用elementui的日期组件，就不存在格式不对一说啦
            { min: 3, max: 5, message: '长度在 3 到 5 个字符'}
            { type: 'number', message: '请输入数字'}            
          ]
}

4. 更多验证规则

看这里async-validator~