element 驗證詳解 自定義驗證規則

 

如圖，驗證功能點名稱，長度1-20並且是數字和字母的組合。

長度是1-20，這個很好辦，直接 el-form表單上添加 :rules="rules" ， 添加個 ref="ruleForm" ，下面提交的時候好識別 ， prop="powerName"  就是對應的規則的名稱了

<el-form :model="form" :rules="rules" ref="ruleForm">
  <el-form-item label="功能點名稱 *" prop="powerName" :label-width="formLabelWidth">
    <el-input v-model="form.powerName"  type="text"
      placeholder="請填寫功能點名稱(1-20位,數字或字母或兩者的組合)"></el-input>
  </el-form-item>
  <el-form-item label="功能點描述 *" prop="description" :label-width="formLabelWidth">
    <el-input
      type="text"
      autosize
      placeholder="請填寫功能點描述(1-10位)"
      v-model="form.description">
    </el-input>
  </el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
  <el-button @click="dialogFormVisible = false">取 消</el-button>
  <el-button type="primary"  @click='enSure("ruleForm")'>確 定</el-button>
</div>

然後對應的 js 裏面添加規則 ，（這裏只例舉個簡單的，具體的請移步官方），當 required: true 的時候，前面會自動帶上紅色的小星星，提示是必填的

rules: {
  powerName: [
    { required: true, message: '請輸入功能點名稱', trigger: 'blur' },
    { min: 1, max: 20, message: '長度在 1 到 20 個字符', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '請輸入功能點描述', trigger: 'blur' },
    { min: 1, max: 20, message: '長度在 1 到 10 個字符', trigger: 'blur' }
  ],
},

然後提交的方法這麼寫，就行了

enSure(powerName){
  console.log('this.form==',this.form);
  this.$refs[powerName].validate((valid) => {
    if (valid)  {
      console.log(this.form.powerName);
    } else {
      console.log('error submit!!');
      return false;
    }
  });
},

但是我們還想要 數字和字母的組合，這種私人訂製的官方里面可沒有哇，這時候我們就得自定義，正則和element自帶驗證規則結合起來用了

首先，在咱們需要驗證的地方，添加   { validator: validateName, trigger: 'blur' }  ， validator 這就是告訴代碼，這裏要自定義了，自定義驗證的規則的名字叫做 validateName ， 一共有三個參數，rule, value, callback，打印一下就知道是啥了

var validateName = (rule, value, callback) => {
  console.log('rule',rule);
  console.log('value',value);
  var patt1 = /^[A-Za-z0-9]+$/;
  console.log('============',value.match(patt1));
  if (!value.match(patt1))  {
    callback(new Error('請輸入數字或字母或兩者的組合'));
  } else{
    callback();
  }
};

如有不足，歡迎指出 ^ - ^