@@ -7,6 +7,7 @@ main-class: 'dev'
77color : ' #632321'
88tags :
99- " 表单验证"
10+ - " 正则表达式"
1011twitter_text : " 使用正则表达式打造自己的jQuery表单验证插件"
1112introduction : " 使用正则表达式打造自己的jQuery表单验证插件"
1213---
@@ -18,11 +19,19 @@ introduction: "使用正则表达式打造自己的jQuery表单验证插件"
1819
1920### 表单验证的关键——正则表达式
2021判断用户输入的值是否符合尺寸、大小写、字符规则就需要使用正则表达式RegExp。RegExp 对象提供了test()方法来检测字符串是否符合正则表达式模式的规范。
22+ 下面的代码是4个应用正则表达式来验证表单元素的检验函数。
23+ 例如` isMobile() ` 方法是检测元素的输入值是否是手机号码的函数,三个参数分别为表单元素的Dom对象ele,错误提示字符串tipText,以及表单输入值。
24+ 变量` d ` 是一个正则表达式对象,通过'RegExp'的'test()'方法的返回值来判定输入值是否符合手机号码的规律。
25+ 若不符合就调用一个表单错误提示函数'$.formTips'来提醒用户输入错误。
26+ 中国现行的手机号码都是以'13'、'15'、'18'、'14'、'17'开头的11位数字,因此正则表达式是从'13'、'15'、'18'、'14'、'17'开始匹配,并已9位数字结束。
27+ 于是` isMobile() ` 方法的正则表达式可以写成` "^(13|15|18|14|17)[0-9]{9}$" ` ,` ^ ` 和` $ ` 分别是正则表达式的开始匹配符号和结束匹配符号。
28+ 按照这样的规律,我们可以编写其他的检验正则表达式用来检测用户的输入值是否符合规定。
29+ 如下代码中的` isPhone() ` 方法、` isEmail() ` 方法、` isBankNum() ` 方法分别用来检测固定电话号码、电子邮件以及银行卡号。
2130``` javascript
22- isMobile : function (ele ,tipText ,value ){var d= new RegExp (" ^(13|15|18|14|17)[0-9]{9}$" );return d .test (value)? ! 0 : $ .formTips (ele,tipText)},
23- isPhone : function (ele ,tipText ,value ){var d= new RegExp (" ^([0-9]{3,4}-)?[0-9]{7,8}$" );return d .test (value)? ! 0 : $ .formTips (ele,tipText)},
24- isEmail : function (ele ,tipText ,value ){var d= new RegExp (" ^\\ w+((-\\ w+)|(\\ .\\ w+))*\\ @[A-Za-z0-9]+((\\ .|-)[A-Za-z0-9]+)*\\ .[A-Za-z0-9]+$" );return d .test (value)? true : $ .formTips (ele,tipText)},
25- isBankNum : function (ele ,tipText ,value ){var d= new RegExp (" ^([0-9]{16}|[0-9]{19})$" );return d .test (value)? true : $ .formTips (ele,tipText)},
31+ var isMobile = function (ele ,tipText ,value ){var d= new RegExp (" ^(13|15|18|14|17)[0-9]{9}$" );return d .test (value)? true : $ .formTips (ele,tipText)}
32+ var isPhone = function (ele ,tipText ,value ){var d= new RegExp (" ^([0-9]{3,4}-)?[0-9]{7,8}$" );return d .test (value)? true : $ .formTips (ele,tipText)}
33+ var isEmail = function (ele ,tipText ,value ){var d= new RegExp (" ^\\ w+((-\\ w+)|(\\ .\\ w+))*\\ @[A-Za-z0-9]+((\\ .|-)[A-Za-z0-9]+)*\\ .[A-Za-z0-9]+$" );return d .test (value)? true : $ .formTips (ele,tipText)}
34+ var isBankNum = function (ele ,tipText ,value ){var d= new RegExp (" ^([0-9]{16}|[0-9]{19})$" );return d .test (value)? true : $ .formTips (ele,tipText)}
2635```
2736
2837### 表单验证的示例
0 commit comments