Element UI 的三种校验模式

element ui form表单 的校验规则

• 单一校验
  • 在form表单上面 添加告诉我们需要添加校验

    :rules="rules"
    

  • 编写规则

    rules: {
        username: [
            /* 
                element ui 的校验
                    required    必填
                    message     校验失败的消息提醒
                    trigger     触发的校验的事件
                    type        校验的类型
                    min         校验的时候,输入的最小长度
                    max         校验的时候,输入的最大长度
            */
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 3, max: 10, message: '账号的长度在 3 到 10 个字符', trigger: 'change' }
        ]
    }
    

  • 校验的字段
    在form-item的上填写校验的字段 prop

    <el-form-item prop="username">
        <el-input ></el-input>
    </el-form-item>
    

• 统一提交的校验
  • 在form表单上填写

  :model="userInfo" ref="userInfo"
  

  • 提交校验

  this.$refs.userInfo.validate(async (valid) => {
      if (valid) {
          //表单校验成功走这里面
      } else {
          //表单校验失败走着里面
          return false;
      }
  });
  

• 自定义校验规则
  • 知道那一个字段是进行自定义校验规则

  prop="configPassword"
  

  • 编写自定义校验规则(校验器),return当中的rules里面

  configPassword: [
      { validator: validatePass2, trigger: 'blur' }
  ]
  

  • 进行自定义校验 在data当中,return外面

  var validatePass2 = (rule, value, callback) => {
      if (value === '') {
          callback(new Error('请再次输入密码'));
      } else if (value !== this.userInfo.password) {
          callback(new Error('两次输入密码不一致!'));
      } else {
          callback();
      }
  };