之前設(shè)計(jì)login組件時(shí)增加了簡(jiǎn)單的表單驗(yàn)證，因此對(duì)應(yīng)的users組件，添加用戶功能也必須設(shè)置相應(yīng)的驗(yàn)證規(guī)則。

文檔form表單驗(yàn)證只提供了用戶名/密碼，是否必須/長(zhǎng)度限制的驗(yàn)證。對(duì)于電話、郵箱和地址的驗(yàn)證如下：

html部分，先綁定props

<el-form-item label="郵箱" prop="email" :label-width="formLabelWidth"><el-input v-model="form.email" autocomplete="off"></el-input> </el-form-item> <el-form-item label="手機(jī)" prop="mobile" :label-width="formLabelWidth"><el-input v-model="form.mobile" autocomplete="off"></el-input> </el-form-item>

js部分，在data內(nèi)的return之前

data () {const checkPhone = (rule, value, callback) => {const phoneReg = /^1[3|4|5|7|8|9][0-9]{9}$/if (!value) {return callback(new Error('電話號(hào)碼不能為空'))}setTimeout(() => {// Number.isInteger是es6驗(yàn)證數(shù)字是否為整數(shù)的方法,但是我實(shí)際用的時(shí)候輸入的數(shù)字總是識(shí)別成字符串// 所以我就在前面加了一個(gè)+實(shí)現(xiàn)隱式轉(zhuǎn)換if (!Number.isInteger(+value)) {callback(new Error('請(qǐng)輸入數(shù)字值'))} else {if (phoneReg.test(value)) {callback()} else {callback(new Error('電話號(hào)碼格式/長(zhǎng)度不正確'))}}}, 100)}var checkEmail = (rule, value, callback) => {const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/if (!value) {return callback(new Error('郵箱不能為空'))}setTimeout(() => {if (mailReg.test(value)) {callback()} else {callback(new Error('請(qǐng)輸入正確的郵箱格式'))}}, 100)}rules: {mobile: [{ validator: checkPhone, trigger: 'blur', required: true }],email: [{ validator: checkEmail, trigger: 'blur', required: true }]}}

實(shí)現(xiàn)效果如下：

一些常用的正則：

1 JS的正則表達(dá)式2 3 強(qiáng)：字母+數(shù)字+特殊字符&nbsp;4 &nbsp;^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*]+$)(?![\d!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$5 &nbsp;&nbsp;&nbsp;6 &nbsp;&nbsp;&nbsp;&nbsp;7 中：字母+數(shù)字，字母+特殊字符，數(shù)字+特殊字符8 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$9 10 弱：純數(shù)字，純字母，純特殊字符11 ^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+)$12 13 14 //校驗(yàn)是否全由數(shù)字組成15 16 function isDigit(s)17 {18 var patrn=/^[0-9]{1,20}$/;19 if (!patrn.exec(s)) return false20 return true21 }22 23 //校驗(yàn)登錄名：只能輸入5-20個(gè)以字母開頭、可帶數(shù)字、“_”、“.”的字串24 function isRegisterUserName(s) 25 { 26 var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/; 27 if (!patrn.exec(s)) return false28 return true29 }30 31 function isRegisterUserName(s)32 {33 var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;34 if (!patrn.exec(s)) return false35 return true36 }37 38 39 //校驗(yàn)用戶姓名：只能輸入1-30個(gè)以字母開頭的字串40 Javascript代碼41 function isTrueName(s) 42 { 43 var patrn=/^[a-zA-Z]{1,30}$/; 44 if (!patrn.exec(s)) return false45 return true46 } 47 }} 48 49 //校驗(yàn)密碼：只能輸入6-20個(gè)字母、數(shù)字、下劃線 50 function isPasswd(s) 51 { 52 var patrn=/^(\w){6,20}$/; 53 if (!patrn.exec(s)) return false54 return true55 } 56 57 //校驗(yàn)普通電話、傳真號(hào)碼：可以“+”開頭，除數(shù)字外，可含有“-” 58 function isTel(s) 59 { 60 //var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?(\d){1,12})+$/; 61 var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/; 62 if (!patrn.exec(s)) return false63 return true64 } 65 66 //校驗(yàn)手機(jī)號(hào)碼：必須以數(shù)字開頭，除數(shù)字外，可含有“-” 67 function isMobil(s) 68 { 69 var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/; 70 if (!patrn.exec(s)) return false71 return true72 } 73 74 //校驗(yàn)郵政編碼 75 function isPostalCode(s) 76 { 77 //var patrn=/^[a-zA-Z0-9]{3,12}$/; 78 var patrn=/^[a-zA-Z0-9 ]{3,12}$/; 79 if (!patrn.exec(s)) return false80 return true81 } 82 83 //校驗(yàn)搜索關(guān)鍵字 84 function isSearch(s) 85 { 86 var patrn=/^[^`~!@#$%^&*()+=|\\\][\]\{\}:;'\,.<>/?]{1}[^`~!@$%^&()+=|\\\] 87 [\]\{\}:;'\,.<>?]{0,19}$/; 88 if (!patrn.exec(s)) return false89 return true90 } 91 92 function isIP(s) //by zergling 93 { 94 var patrn=/^[0-9.]{1,20}$/; 95 if (!patrn.exec(s)) return false96 return true97 } 98 99 正則表達(dá)式 100 ^\\d+$　　//非負(fù)整數(shù)（正整數(shù) + 0） 101 ^[0-9]*[1-9][0-9]*$　　//正整數(shù) 102 ^((-\\d+)|(0+))$　　//非正整數(shù)（負(fù)整數(shù) + 0） 103 ^-[0-9]*[1-9][0-9]*$　　//負(fù)整數(shù) 104 ^-?\\d+$　　　　//整數(shù) 105 ^\\d+(　　//非負(fù)浮點(diǎn)數(shù)（正浮點(diǎn)數(shù) + 0） 106 ^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$　 107 //正浮點(diǎn)數(shù) 108 ^((-\\d+(　　//非正浮點(diǎn)數(shù)（負(fù)浮點(diǎn)數(shù) + 0） 109 ^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$ 110 //負(fù)浮點(diǎn)數(shù) 111 ^(-?\\d+)(　　//浮點(diǎn)數(shù) 112 ^[A-Za-z]+$　　//由26個(gè)英文字母組成的字符串 113 ^[A-Z]+$　　//由26個(gè)英文字母的大寫組成的字符串 114 ^[a-z]+$　　//由26個(gè)英文字母的小寫組成的字符串 115 ^[A-Za-z0-9]+$　　//由數(shù)字和26個(gè)英文字母組成的字符串 116 ^\\w+$　　//由數(shù)字、26個(gè)英文字母或者下劃線組成的字符串 117 ^[\\w-]+(　　　　//email地址 118 ^[a-zA-z]+://(　　//url 119 ^[A-Za-z0-9_]*$ 120 121 匹配完整域名的正則表達(dá)式： 122 [a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?

總結(jié)

以上是生活随笔為你收集整理的element-ui表单验证：用户名、密码、电话、邮箱的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。