之前設計login組件時增加了簡單的表單驗證，因此對應的users組件，添加用戶功能也必須設置相應的驗證規則。

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

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="手機" prop="mobile"
:label-width="formLabelWidth"><el-input v-model="form.mobile" autocomplete="off"></el-input>
</el-form-item>

js部分，在data內的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('電話號碼不能為空'))}setTimeout(() => {// Number.isInteger是es6驗證數字是否為整數的方法,但是我實際用的時候輸入的數字總是識別成字符串// 所以我就在前面加了一個+實現隱式轉換if (!Number.isInteger(+value)) {callback(new Error('請輸入數字值'))} else {if (phoneReg.test(value)) {callback()} else {callback(new Error('電話號碼格式/長度不正確'))}}}, 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('請輸入正確的郵箱格式'))}}, 100)}rules: {mobile: [{ validator: checkPhone, trigger: 'blur', required: true }],email: [{ validator: checkEmail, trigger: 'blur', required: true }]}}

實現效果如下：

一些常用的正則：

  1 JS的正則表達式2 3 強：字母+數字+特殊字符&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 中：字母+數字，字母+特殊字符，數字+特殊字符8 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$9 10 弱：純數字，純字母，純特殊字符11 ^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+)$12 13 14 //校驗是否全由數字組成15 16 function isDigit(s)17 {18 var patrn=/^[0-9]{1,20}$/;19 if (!patrn.exec(s)) return false20 return true21 }22 23 //校驗登錄名：只能輸入5-20個以字母開頭、可帶數字、“_”、“.”的字串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 //校驗用戶姓名：只能輸入1-30個以字母開頭的字串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 //校驗密碼：只能輸入6-20個字母、數字、下劃線  50 function isPasswd(s)  51 {  52 var patrn=/^(\w){6,20}$/;  53 if (!patrn.exec(s)) return false54 return true55 }  56 57 //校驗普通電話、傳真號碼：可以“+”開頭，除數字外，可含有“-”  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 //校驗手機號碼：必須以數字開頭，除數字外，可含有“-”  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 //校驗郵政編碼  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 //校驗搜索關鍵字  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 正則表達式
100 ^\\d+$　　//非負整數（正整數 + 0）  
101 ^[0-9]*[1-9][0-9]*$　　//正整數   
102 ^((-\\d+)|(0+))$　　//非正整數（負整數 + 0）   
103 ^-[0-9]*[1-9][0-9]*$　　//負整數   
104 ^-?\\d+$　　　　//整數   
105 ^\\d+(　　//非負浮點數（正浮點數 + 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 //正浮點數   
108 ^((-\\d+(　　//非正浮點數（負浮點數 + 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 //負浮點數   
111 ^(-?\\d+)(　　//浮點數   
112 ^[A-Za-z]+$　　//由26個英文字母組成的字符串   
113 ^[A-Z]+$　　//由26個英文字母的大寫組成的字符串   
114 ^[a-z]+$　　//由26個英文字母的小寫組成的字符串   
115 ^[A-Za-z0-9]+$　　//由數字和26個英文字母組成的字符串   
116 ^\\w+$　　//由數字、26個英文字母或者下劃線組成的字符串   
117 ^[\\w-]+(　　　　//email地址   
118 ^[a-zA-z]+://(　　//url  
119 ^[A-Za-z0-9_]*$
120 
121 匹配完整域名的正則表達式：
122 [a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?