腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開(kāi)發(fā)工具 python Photoshop 必備軟件

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

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

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

項(xiàng)目場(chǎng)景：

常見(jiàn)的表單填寫(xiě)中都會(huì)遇到，比如新增信息，修改信息等，如下圖

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

驗(yàn)證是否是合法手機(jī)號(hào)（舉例）

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

實(shí)現(xiàn)步驟：

step 1

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

step 2

model 和 ref 最好一致

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

<el-form :model="ruleForm" ref="ruleForm" :rules="rules">
  <el-form-item label="xxx電話號(hào)碼" 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() {
	餓了么文檔上寫(xiě)的在這里定義一個(gè) checkPhon_unm 回調(diào)
	// 電話號(hào)碼 驗(yàn)證
    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("請(qǐng)輸入正確的電話號(hào)碼！"));
        } 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;
          }
        });
      },

總結(jié)：

電話號(hào)碼如此，其他都是一樣的，舉一反三而已
具體業(yè)務(wù)具體分析，有些是非必填項(xiàng)正則驗(yàn)證，有些相反
如果表單域需要自定義布局，不想使用餓了么自帶的局部效果的話，最好把el-form包在最外層，不然也許會(huì)出現(xiàn)無(wú)法觸發(fā)驗(yàn)證回調(diào)的可能

到此這篇關(guān)于vue elementUI實(shí)現(xiàn)自定義正則規(guī)則驗(yàn)證的文章就介紹到這了,更多相關(guān)vue elementUI 正則規(guī)則驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: