Skip to content

Commit 8b4b475

Browse files
committed
blog
blog
1 parent 67421b8 commit 8b4b475

3 files changed

Lines changed: 19 additions & 7 deletions

File tree

_posts/2016-9-28-使用正则表达式编写表单验证插件.md

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ main-class: 'dev'
77
color: '#632321'
88
tags:
99
- "表单验证"
10+
- "正则表达式"
1011
twitter_text: "使用正则表达式打造自己的jQuery表单验证插件"
1112
introduction: "使用正则表达式打造自己的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
### 表单验证的示例

_site/feed.xml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<description>A blog about Front End Development</description>
66
<link>/</link>
77
<atom:link href="/feed.xml" rel="self" type="application/rss+xml"/>
8-
<pubDate>Thu, 29 Sep 2016 09:08:41 +0800</pubDate>
9-
<lastBuildDate>Thu, 29 Sep 2016 09:08:41 +0800</lastBuildDate>
8+
<pubDate>Thu, 29 Sep 2016 09:12:37 +0800</pubDate>
9+
<lastBuildDate>Thu, 29 Sep 2016 09:12:37 +0800</lastBuildDate>
1010
<generator>Jekyll v3.2.1</generator>
1111

1212
<item>

_site/使用正则表达式编写表单验证插件/index.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,10 @@ <h3 id="section">表单验证的关键——正则表达式</h3>
129129
</code></pre>
130130
</div>
131131

132-
<h3 id="section-1">未完待续</h3>
132+
<h3 id="section-1">表单验证的示例</h3>
133+
<p>如下图是一个简单的表单,三个输入框分别要求输入中文汉字、18位身份证以及6到12位的密码,且都不能为空。</p>
134+
135+
<h3 id="section-2">未完待续</h3>
133136

134137
</article>
135138

0 commit comments

Comments
 (0)