Skip to content

Commit 91c1b68

Browse files
feleventhfeleventh
committed
blog
blog
1 parent 8b4b475 commit 91c1b68

2 files changed

Lines changed: 89 additions & 1 deletion

File tree

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

Lines changed: 89 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ introduction: "使用正则表达式打造自己的jQuery表单验证插件"
2727
于是`isMobile()`方法的正则表达式可以写成`"^(13|15|18|14|17)[0-9]{9}$"`,`^`和`$`分别是正则表达式的开始匹配符号和结束匹配符号。
2828
按照这样的规律，我们可以编写其他的检验正则表达式用来检测用户的输入值是否符合规定。
2929
如下代码中的`isPhone()`方法、`isEmail()`方法、`isBankNum()`方法分别用来检测固定电话号码、电子邮件以及银行卡号。
30+
3031
```javascript
3132
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)}
3233
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)}
@@ -36,5 +37,92 @@ var isBankNum = function(ele,tipText,value){var d=new RegExp("^([0-9]{16}|[0-9]{
3637

3738
### 表单验证的示例
3839
如下图是一个简单的表单，三个输入框分别要求输入中文汉字、18位身份证以及6到12位的密码，且都不能为空。
40+
![一个简单的表单](../assets/img/2016-9-28-1.jpg)
41+
42+
当输入不符合要求就提交时，光标会回到相应的输入框，即自动触发focus事件，如果有滚动条且目标不在可视区域内滚动条也滚动到相应位置。
43+
并且，会在相应输入框的附近弹出提示文本。
44+
核心代码如下，表单验证插件通过extend写入了一个formRules对象来保存表单验证规则，两个函数对象。
45+
其中`formValidate(arrayVali))`方法是用来验证表单的所有输入元素，`formTips(ele,tipText,nofocus)`方法是用来弹出错误提示文本的。
46+
`formValidate(arrayVali))`方法的参数是一个对象数组，里面的元素对象包含了表单元素对象和一个或多个验证规则。
47+
`formValidate(arrayVali))`方法通过循环arrayVali数组里面的每一个对象，获取表单元素的输入值以及相应的验证规则，
48+
并对表单元素的输入值进行验证，一旦发现验证错误，就return一个false值，阻止验证继续。
49+
50+
```html
51+
<div class="form">
52+
<p><label for="name">姓名:</label><input type="text" id='name' name='name' placeholder="请填写中文姓名"></p>
53+
<p><label for="identity">身份证号:</label><input type="text" id='identity' name='identity' placeholder="请填写身份证号"></p>
54+
<p><label for="password">密码:</label><input type="password" id='password' name='password' placeholder="请设置密码"></p>
55+
<p><button class="submit">提交</button></p>
56+
</div>
57+
<script src="node_modules/jquery/dist/jquery.min.js"></script>
58+
<script>
59+
$.extend({
60+
formTips:function(ele,tipText,nofocus){
61+
var topDoc,topEle;
62+
ele.after("<span class='tips'>"+tipText+"</span>");
63+
var topSize = ele.offset().top;
64+
var leftSize = ele.offset().left;
65+
$('.tips').css({
66+
top: topSize-35,
67+
left: leftSize+5
68+
})
69+
setTimeout("$('.tips').remove()",2000);
70+
return !nofocus&&ele.focus(),topDoc=$(window).scrollTop(),topEle=ele.offset().top-topDoc,50>topEle&&$(window).scrollTop(topDoc-50+topEle),false
71+
},
72+
formRules:{
73+
required:function(ele,tipText,value){return""==value?(ele.val(""),$.formTips(ele,tipText)):true},
74+
length:function(ele,ruleMsg,value){return value.length<ruleMsg.rule[0]||value.length>ruleMsg.rule[1]?$.formTips(ele,ruleMsg.msg):true},
75+
isCname : function(ele,tipText,value){var d=new RegExp("^[\u4E00-\u9FA5]{2,9}$");return d.test(value)?true:$.formTips(ele,tipText)},
76+
isIdNum : function(ele,tipText,value){var d=new RegExp("^([0-9]{17}|[0-9]{18})$");return d.test(value)?true:$.formTips(ele,tipText)},
77+
},
78+
formValidate:function(arrayVali){/!*a为验证数组，[{el: el1, rule1: tipText,},{el: el2, rule1: tipText,}]*!/
79+
var b=this,c=true;
80+
return $.each(arrayVali,function(index,ele){ /!*ele: {el: el1, ruglar1: tipText,}*!/
81+
var h,i,rule,fn,arrayRule=[],required=false,value=$.trim(ele.el.val());
82+
for(h in ele){
83+
if(h != "el"){
84+
arrayRule.push(h);
85+
}
86+
if(h =='required'){
87+
required = true;
88+
}
89+
}
90+
91+
if(!required&&value==""){
92+
return false;
93+
}
94+
95+
for(i=0; i<arrayRule.length;i++){
96+
if(arrayRule[i] in b.formRules){
97+
rule = arrayRule[i];
98+
fn=b.formRules[rule](ele.el,ele[rule],value)
99+
if(!fn){
100+
return c=false, false;
101+
}
102+
}
103+
}
104+
}), c;
105+
}
106+
});
107+
108+
$().ready(function(){
109+
$('.submit').click(function(){
110+
var name = $('input#name');
111+
var identity = $('#identity');
112+
var password = $('#password');
113+
var v = $.formValidate([
114+
{el:name,required:"请输入姓名！",isCname:"姓名必须为中文汉字！"},
115+
{el:identity,required:"请输入身份证号！",isIdNum:"请输入正确的身份证号！"},
116+
{el:password,required:"请输入密码！",length:{rule:[6,12],msg:"密码长度必须为6到12位"}},
117+
]);
118+
if (!v) {
119+
return false;
120+
}
121+
//ajax
122+
$.formTips($(this),'填写正确，已提交！');
123+
});
124+
});
125+
</script>
126+
```
39127

40-
### 未完待续
128+
### 完整源代码请查看我的github的blogDemo项目

‎assets/img/2016-9-28-1.jpg‎

19.7 KB
Loading

0 commit comments

Comments
 (0)