ElementUI问题:el-form表单校验功能

1.el-form本身就提供rules属性。只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

2.开始使用

1.设置绑定属性：rules

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

2.开始设置属性

//prop这个是校验的字段名
//v-model与prop绑定的对应值
 <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>

3. 在data中开始设置rules

rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
}

4.开始校验

 this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });

3.规则表

1. required:true ---- 必输字段
2. remote:“remote-valid.jsp” ---- 使用ajax方法调用remote-valid.jsp验证输入值
3. email:true ---- 必须输入正确格式的电子邮件
4. url:true ---- 必须输入正确格式的网址
5. date:true ---- 必须输入正确格式的日期，日期校验ie6出错，慎用
6. dateISO:true ---- 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
7. number:true ---- 必须输入合法的数字(负数，小数)
8. digits:true ---- 必须输入整数
9. creditcard:true ---- 必须输入合法的信用卡号
10. equalTo:“#password” ---- 输入值必须和#password相同
11. accept: ---- 输入拥有合法后缀名的字符串（上传文件的后缀）
12. maxlength:5 ---- 输入长度最多是5的字符串(汉字算一个字符)
13. minlength:10 ---- 输入长度最小是10的字符串(汉字算一个字符)
14. rangelength:[5,10] ---- 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
15. range:[5,10] ---- 输入值必须介于 5 和 10 之间
16. max:5 ---- 输入值不能大于5
17. min:10 ---- 输入值不能小于10

4.其他

required:true表示为必须输入；

message:""设置不符合校验规则时的提示信息；

trigger:""设置校验的触发方式：

‘change’:数据改变时触发；

 ‘blur’:失去焦点时触发；

 没有进行任何输入时,不会触发change,但一定会触发blur事件。

5.自定义校验规则

1.当要自定义校验规则的时候，那么在rules中加入对应的validator

 rules: {
          pass: [
           //这里的checkAge就是自定义的校验规则
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }

2.开始校验

在data下创建checkAge

var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };