vue elementUI實現(xiàn)自定義正則規(guī)則驗證

更新時間：2022年03月11日 16:10:36 作者：這就是div而已

本文主要介紹了vue elementUI實現(xiàn)自定義正則規(guī)則驗證，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

項目場景：

常見的表單填寫中都會遇到，比如新增信息，修改信息等，如下圖

相信大家對上面的驗證都非常熟悉了，不多嗶嗶本篇文章主要想寫驗證規(guī)則自定義相關的內(nèi)容

驗證是否是合法手機號（舉例）

實現(xiàn)下圖所示：

實現(xiàn)步驟：

step 1

準備好 reg表達式 ， 百度即可  
電話號碼——  /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/

step 2

model 和 ref 最好一致

prop驗證的phone_number 和 v-model 綁定的phone_number 的字段名也要一致注意細節(jié)

<el-form :model="ruleForm" ref="ruleForm" :rules="rules">
  <el-form-item label="xxx電話號碼" prop="phone_number">
    <el-input v-model="ruleForm.phone_number"></el-input>
  </el-form-item>
 </el-form>
 
<el-button type="primary" @click="submitForm('ruleForm')">立即創(chuàng)建</el-button>

step 3

 data() {
	餓了么文檔上寫的在這里定義一個 checkPhon_unm 回調(diào)
	// 電話號碼 驗證
    var checkPhon_unm = (rule, value, callback) => {
      if (value) {
        if (!/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value)) {
          callback(new Error("請輸入正確的電話號碼！"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
     rules: {
        phone_number: [{ validator: checkPhon_unm, trigger: "blur" }],
      },
    };
 },
 methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },