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

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

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

項目場景：

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

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

驗證是否是合法手機(jī)號（舉例）

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

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

step 1

準(zhǔn)備好 reg表達(dá)式 ， 百度即可  
電話號碼——  /^(((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 的字段名也要一致注意細(xì)節(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;
          }
        });
      },

總結(jié)：

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

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

您可能感興趣的文章:

相關(guān)文章

詳解Vue項目中實(shí)現(xiàn)錨點(diǎn)定位
這篇文章主要介紹了Vue項目中實(shí)現(xiàn)錨點(diǎn)定位，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue使用i18n實(shí)現(xiàn)國際化的方法詳解
這篇文章主要給大家介紹了關(guān)于vue使用i18n如何實(shí)現(xiàn)國際化的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
詳細(xì)聊聊vue組件是如何實(shí)現(xiàn)組件通訊的
組件間通信簡單來說就是組件間進(jìn)行數(shù)據(jù)傳遞,就像我們?nèi)粘５拇螂娫?就是通訊的一種方式,下面這篇文章主要給大家介紹了關(guān)于vue組件是如何實(shí)現(xiàn)組件通訊的相關(guān)資料,需要的朋友可以參考下
2022-05-05
Vue2實(shí)現(xiàn)自適應(yīng)屏幕大小的兩種方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue2實(shí)現(xiàn)自適應(yīng)屏幕大小的兩種方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-03-03
關(guān)于在vue2中使用weixin-js-sdk的詳細(xì)步驟
公司最近有微信公眾號的需求,那么微信登錄授權(quán)和如何使用WX-JSSDk實(shí)現(xiàn)分享等等肯定是最頭疼的問題,這篇文章主要給大家介紹了關(guān)于在vue2中使用weixin-js-sdk的詳細(xì)步驟,需要的朋友可以參考下
2024-07-07
Vue實(shí)現(xiàn)無限加載瀑布流
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)無限加載瀑布流，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
Vue3 directive自定義指令內(nèi)部實(shí)現(xiàn)示例
這篇文章主要為大家介紹了Vue3 directive自定義指令內(nèi)部實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
vue-cli 3.0 版本與3.0以下版本在搭建項目時的區(qū)別詳解
這篇文章主要介紹了vue-cli 3.0 版本與3.0以下版本在搭建項目時的區(qū)別詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
VUE的tab頁面切換的四種方法
這篇文章主要介紹了VUE的tab頁面切換的四種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
vite打包優(yōu)化分片打包依賴包詳解
這篇文章主要介紹了vite打包優(yōu)化分片打包依賴包,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07