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