快捷導航

Element UI 自定義正則表達式驗證方法

更新時間：2018年09月04日 10:10:17 作者：Lovnx

今天小編就為大家分享一篇Element UI 自定義正則表達式驗證方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

如下所示：

//指定數(shù)據(jù)中心的驗證表單valiForm，驗證規(guī)則rules
<el-form :model="valiForm" :rules="rules" ref="valiForm" label-width="100px" class="demo-valiForm">

  <el-form-item label="名稱：" :label-width="formLabelWidth" prop='name'>
   <el-input v-model="valiForm.name"></el-input>
  </el-form-item>

</el-form>

//add('valiForm')方法要傳驗證表單名
<el-button type="primary" @click="add('valiForm')">確 定</el-button>

data () {
 let nameRule1 = (rule, value, callback) => {
  let regExp = //;
  if (regExp.test(value) === false) {
   callback(new Error('不通過正則'));
  } else {
   callback();
  }
 };

 return {
  valiForm: {
   name: ''
  },
  rules: {
   name: [
   { required: true, message: '請輸入名稱', trigger: 'blur' },
   { min: 5, max: 10, message: '長度在 5 到 10 個字符', trigger: 'blur' },
   { validator: nameRule1, trigger: 'blur' }
   ]
  }

 };
 },

methods:{
 add(formName) {
  this.$refs[formName].validate((valid) => {
  if (valid) {
   //通過驗證執(zhí)行
  } else {
   //驗證失敗執(zhí)行
   console.log('error submit!!');
   return false;
  }
  });
 }
}

以上這篇Element UI 自定義正則表達式驗證方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

el-menu遞歸實現(xiàn)多級菜單組件的示例
本文主要介紹了el-menu使用遞歸組件實現(xiàn)多級菜單組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-04-04
vue-router 4使用實例詳解
雖然 vue-router 4 大多數(shù) API 保持不變，但是在 vue3 中以插件形式存在，所以在使用時有一定的變化。接下來就學習學習它是如何使用的
2021-11-11
vue3組件化開發(fā)之可復用性的應用實例詳解
不斷把公共的、可以獨立拆分出來的抽出來作為一個獨立可復用的組件來向上提供調(diào)用,這樣讓我們的代碼更加方便組織和管理,并且擴展性也更強,下面這篇文章主要給大家介紹了關(guān)于vue3組件化開發(fā)之可復用性應用的相關(guān)資料,需要的朋友可以參考下
2022-06-06
進入Hooks時代寫出高質(zhì)量react及vue組件詳解
這篇文章主要介紹了Hooks時代中如何寫出高質(zhì)量的react和vue組件的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
Vue項目代碼之路由拆分、Vuex模塊拆分、element按需加載詳解
這篇文章主要介紹了Vue項目代碼之路由拆分、Vuex模塊拆分、element按需加載,項目較大路由較多時，路由拆分是一個不錯的代碼優(yōu)化方案，按不同業(yè)務(wù)分為多個模塊，結(jié)構(gòu)清晰便于統(tǒng)一管理，本文通過示例給大家詳細講解，需要的朋友可以參考下
2022-11-11
el-table 選擇框根據(jù)條件設(shè)置某項不可選中的操作代碼
這篇文章主要介紹了el-table 選擇框根據(jù)條件設(shè)置某項不可選中的操作代碼,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-03-03
vue響應式系統(tǒng)之observe、watcher、dep的源碼解析
這篇文章主要介紹了vue響應式系統(tǒng)之observe、watcher、dep的源碼解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
vue2.5.2使用http請求獲取靜態(tài)json數(shù)據(jù)的實例代碼
這篇文章主要介紹了vue2.5.2使用http請求獲取靜態(tài)json數(shù)據(jù)的實例代碼,需要的朋友可以參考下
2018-02-02
Vue-cli搭建spa項目的項目實踐
本文主要介紹了Vue-cli搭建spa項目的項目實踐,首先,你需要安裝Vue CLI,然后通過它創(chuàng)建新項目,接著,選擇和配置適當?shù)牟寮鸵蕾図?以完善你的SPA項目,感興趣的可以了解一下
2023-09-09
基于vue的短信驗證碼倒計時demo
這篇文章主要介紹了基于vue的短信驗證碼倒計時demo，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09