Vue-ANTD表單輸入中自定義校驗(yàn)一些正則表達(dá)式規(guī)則介紹
更新時(shí)間：2024年01月03日 10:19:35 作者：一顆知足的心
這篇文章主要介紹了Vue-ANTD表單輸入中自定義校驗(yàn)一些正則表達(dá)式規(guī)則介紹,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
寫(xiě)一個(gè)示例
表單的rules里面添加自定義校驗(yàn)的方法：
{ rules: [ {validator: this.checkPhone} ] }在下面的method里面添加方法：
checkPhone (rule, value, callback) {
const pwdRegex = new RegExp('^[1-9]\\d{0,11}$')
if (!pwdRegex.test(value)) {
callback(new Error('電話號(hào)碼輸入格式有誤'))
}
callback()
},
1.校驗(yàn)輸入為電話號(hào)碼（手機(jī)號(hào)碼）
^((13[0-9])|(14[5,7])|(15[^4,\\D])|(17[0,1,3,6-8])|(18[0-9])|(19[8,9])|(166))[0-9]{8}$2.校驗(yàn)輸入為是否為郵箱
/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/3.校驗(yàn)是否全部為數(shù)字且有一范圍
^[1-9]\\d{0,11}$ 或者 ^[1-9]\d{0,11}$4.校驗(yàn)輸入包含數(shù)字+字母+特殊符號(hào)
^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,20}$5.校驗(yàn)輸入包含字母加數(shù)字
其實(shí)這三者可以隨意組合的
有些兩邊要加引號(hào)，有些不加，都試試吧
'^[A-Za-z0-9]{6,6}$'6.輸入0-10的整數(shù)，輸入1-999的整數(shù)
/^([0-9]|10)$/
/^(?!0)\d{1,3}$/
后面還會(huì)添加更多常用規(guī)則
更多規(guī)則點(diǎn)擊這里
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目打包之開(kāi)發(fā)環(huán)境和部署環(huán)境的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目打包之開(kāi)發(fā)環(huán)境和部署環(huán)境的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
本篇文章主要介紹了淺談Vue SPA 首屏加載優(yōu)化實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
這篇文章主要介紹了Vue如何配置根目錄@(引用路徑)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
ElementUI的this.$notify.close()調(diào)用不起作用的解決
本文主要介紹了ElementUI的this.$notify.close()調(diào)用不起作用的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
下面小編就為大家分享一篇使用vue中的v-for遍歷二維數(shù)組的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue element-ui實(shí)現(xiàn)el-table表格多選以及回顯方式
這篇文章主要介紹了vue element-ui實(shí)現(xiàn)el-table表格多選以及回顯方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue中使用scrollTo沒(méi)有效果的完美解決方法
這篇文章主要介紹了在vue中使用scrollTo沒(méi)有效果的解決方法,本文給大家分享具體操作步驟,在這里需要注意scrollTo要作用在可滾動(dòng)的元素上,不然不生效,scrollTop就會(huì)一直為0,需要的朋友可以參考下2023-10-10
Vue.js實(shí)現(xiàn)拖放效果的實(shí)例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)拖放效果的實(shí)例的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
在做文字處理的項(xiàng)目時(shí)經(jīng)常會(huì)遇到搜索文字并高亮的需求,本文就來(lái)介紹vue 指定文字高亮的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了封裝Vue Element的table表格組件的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-08-08