Element表单验证规则

Posted 2021-03-17 lguow

一、简单的逻辑验证使用方法：

方法步骤：

1、在html中给el-form增加 :rules="rules"

2、html中在el-form-item 中增加属性 prop="名称"

3、js中直接在data中定义rules:{}

在html中的写法：

<el-form ref="formData" :rules="rules" :model="formData" label-width="500px">
     <el-form-item label="用户名：" prop="userName">
          <el-input class="inp" v-model="form.userName" auto-complete="on"></el-input>
          <el-button type="primary" class="btn-add" @click="onSubmit(‘formData‘)">提交</el-button>
      </el-form-item>
</el-form>

js中：

<script>
export default {
  data() {
    return {
      formData: {
        userName: ‘‘,
      },
      // 校验规则
      rules: {
        userName: [
        { 
          required: true, //是否必填
          message: ‘用户名不能为空‘, //规则提示
          trigger: ‘blur‘  //何事件触发
        },
        //可以设置多重验证标准
        { 
           min: 3, 
           max: 5,  
           message: ‘长度在 3 到 5 个字符‘
         },
        {
            pattern: /^[u4E00-u9FA5]+$/,  //正则
            message: ‘用户名只能为中文‘
         }
         ]
      }
    }
  }
}
</script>

二、自定义验证逻辑：

步骤：

1、在js中找到data中的rules，然后在对应的名称中设置 validator: 验证器名称；

2、在js的data中的return之上书写验证器对应的js验证逻辑，如：

<script>
export default {
  data() {
    // 此处自定义校验手机号码js逻辑
    var userNameReg = /^[u4E00-u9FA5]+$/
    var validateuserName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error(‘用户名不能为空!!‘))
      }
      setTimeout(() => {
        if (!userNameReg.test(value)) {
          callback(new Error(‘用户名只能为中文‘))
        } else {
          callback()
        }
      }, 1000)
    }
    return {
      formData: {    
        userName: ‘‘,
      },
      // 校验规则
      rules: {
        // 校验用户名，主要通过validator来指定验证器名称
        userName: [{ required: true, trigger: ‘blur‘, validator: validateuserName}]
      },
    }
  }
}
</script>

三、表单提交

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