element-ui表单验证

简单的逻辑验证使用方法

1、在 el-form 上添加 :rules="rules"

2、给 el-form-item 添加属性 props="名称"

3、在 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="formData.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>

 

自定义验证逻辑

<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
        }
    })
 }