Element表單驗證規則

一、簡單的邏輯驗證使用方法：

方法步驟：

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