js验证模型自我实现的具体方法
市面上有很多表单验证的框架，教我们怎么验证表单的数据提交，说实话也真的很简单，但是我们会有一种感觉我们要是离开了这些框架的时候，我们有时候会束手无策，然后js验证写的很不规范，没有一套比较好的模式，那我写这篇的目的就是：我们自己构建js验证应该是什么样子的，来慢慢看一下。
假设我们现在写一个登录的页面（这可能是最简单的数据提交了哦），html页面会有一个用户名和一个密码的文本框让我们用户输入自己的用户名和密码，我们肯定是要判断用户名和密码是否为空，很明显这样的js验证判断是放在onblur事件里面触发，html代码如下：
ValidateHelper是一个对象，一些验证的方法就是在这个对象里面，我们规定一下，js验证用户的输入有两返回结果，一个成功，一个是失败。成功的时候我们输出成功的提示，
失败的时候我们输出失败的提示，对应的两个输出方法：
normalMessage:function(jqueryObj,msg){
varemObj=$(jqueryObj.parent().find("em")[0]);
emObj.empty().append(msg);
},
warningMessage:function(jqueryObj,msg){
ValidateHelper.clearMessage(jqueryObj);
varemObj=$(jqueryObj.parent().find("em")[0]);
varspanElement="<spanstyle="color:#FF4C31;float:left;height:23px;line-height:23px;padding:010px035px;">"
+msg
+"</span>";
emObj.empty().append(spanElement);
},
还有一个清除提示的方法：
clearMessage:function(jqueryObj){
varemObj=$(jqueryObj.parent().find("em")[0]);
emObj.empty();
},
我们已经写了成功和失败提示方法，以及清除提示的方法，这个三个是我们在后面会一直调用的基本方法。
好了，我们写一个验证用户输入不能为空的方法：
validateStringValueIsEmpty:function(obj,normalMsg,warningMsg){
varjqueryObj=$(obj);
ValidateHelper.clearMessage(obj);
if($.trim(jqueryObj.val()).length==0){
ValidateHelper.warningMessage(jqueryObj,warningMsg);
returnfalse;
}
else{
ValidateHelper.normalMessage(jqueryObj,normalMsg);
returntrue;
}
},
这个方法会在onblur中被调用的验证方法，里面自然也用到了成功和失败提示方法，以及清除提示的方法。参数有三个，要验证的Dom或者jQuery对象、成功提示信息、失败提示信
息。要是为空就失败，要是不为空就成功。
上面写好的方法在onblur中会触发的，我们提交数据的时候还会用到得哦：
initInfo:function(){
varuserName=$("#email");
varuserPwd=$("#setPwd");
if(!ValidateHelper.validateStringValueIsEmpty(userName,"通过","不能为空")){
userName.focus();
returnnull;
}
if(!ValidateHelper.validateStringValueIsEmpty(userPwd,"通过","不能为空")){
userPwd.focus();
returnnull;
}
varuserInfo={
UserName:userName.val(),
UserPwd:userPwd.val()
};
returnuserInfo;
},
post:function(){
varuserInfo=ValidateHelper.initInfo();
if(userInfo==null){
return;
}
$.ajax({
type:"post",
dataType:"text",
url:"Ajax/Module.aspx",
timeout:30000,
data:{UserName:userInfo.UserName,UserPwd:userInfo.UserPwd},
success:function(data){
alert(data.toString());
}
});
}
这边呢要是在提交数据的时候会调用validateStringValueIsEmpty方法，要是返回的是失败是不会真的提交给服务器端得。
那上面的情况是一个最简单的处理不为空的情况，要是我们想验证是否是Email是否是身份证号码，这些复杂的验证实现如下：
varValidation={
textCount:function(field,counter,maxLimit){
varmessage=$(field).val();
if($(field).val().length>maxLimit)
$(field).val(message.substring(0,maxLimit))
//$(counter).text(maxLimit-field.value.length);
},
refreshValidator:function(img,input){
$(img).attr("src",$(img).attr("src")+"&r="+Math.random());
$(input).focus();
},
isUrl:function(s){
varstrRegex=
/^((http(s)?|ftp|telnet|news|rtsp|mms):\/\/)?(((\w(\-*\w)*\.)+[a-zA-Z]{2,4})|(((1\d\d|2([0-4]\d|5[0-5])|[1-9]\d|\d).){3}(1\d\d|2([0-4]\d|5[0-5])|[1-9]\d|\d).?))(:\d{0,5})?(\/+.*)*$/;
returnstrRegex.test(s);
},
isDecimal:function(d){varpattern=/^(([1-9]\d{0,12})|0)(\.\d{1,2})?$/;returnpattern.test(d);},
isEmail:function(s){
varpattern=/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
returnpattern.test(s);
},
isLowEmail:function(s){
varb,e;
b=s.indexOf("@");
e=s.indexOf(".");
if(b<=0)returnfalse;
if(e<0||e==(s.length-1)){returnfalse;}
returntrue;
},
clearNoNum:function(event,obj){
event=window.event||event;
if(event.keyCode==37|event.keyCode==39){
return;
}
obj.value=obj.value.replace(/[^\d.]/g,"");
obj.value=obj.value.replace(/^\./g,"");
obj.value=obj.value.replace(/\.{2,}/g,".");
obj.value=obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
},
checkNum:function(obj){
obj.value=obj.value.replace(/\.$/g,"");
},
isInteger:function(value){
varintegerReg=newRegExp(/^\d+$/);
returnintegerReg.test(value);
},
isValidateReg:function(value){
varvalidateReg=/^([A-Za-z0-9\s\-\_\~\!\@\#\$\%\^\&\*\(\)\|\<\>\?\:\;\"\"\.\[\]\{\}\,\+\`\/\\\=]){6,16}$/;
if(validateReg.test(value)){
returntrue;
}
returnfalse;
},
isDate:function(strValue){
varobjRegExp=/^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/
if(!objRegExp.test(strValue))
returnfalse;
else{
vararrayDate=strValue.split(RegExp.$1);
varintDay=parseInt(arrayDate[2],10);
varintYear=parseInt(arrayDate[0],10);
varintMonth=parseInt(arrayDate[1],10);
if(intMonth>12||intMonth<1){
returnfalse;
}
vararrayLookup={"1":31,"3":31,"4":30,"5":31,"6":30,"7":31,
"8":31,"9":30,"10":31,"11":30,"12":31
}
if(arrayLookup[parseInt(arrayDate[1])]!=null){
if(intDay<=arrayLookup[parseInt(arrayDate[1])]&&intDay!=0)
returntrue;
}
if(intMonth-2==0){
varbooLeapYear=(intYear%4==0&&(intYear%100!=0||intYear%400==0));
if(((booLeapYear&&intDay<=29)||(!booLeapYear&&intDay<=28))&&intDay!=0)
returntrue;
}
}
returnfalse;
},
isZip:function(value){
varvalidateReg=/^[0-9]{6}$/;
returnvalidateReg.test(value);
},
checkSpecialChar:function(value){
varvalidateReg=/([~!@#$%^&*\/\\,.\(\)]){6,16}$/;
returnvalidateReg.test(value);
},
CheckSpecialString:function(value){
varvalidateReg=/[\u0000-\u0008\u000B\u000C\u000E-\u001F\uD800-\uDFFF\uFFFE\uFFFF]/;
returnvalidateReg.test(value);
},
isTel:function(s){
varpatrn=/^\d{3,4}-\d{7,8}(-\d{3,4})?$/
if(!patrn.exec(s))returnfalse
returntrue
},
isMobile:function(value){
varvalidateReg=/^1\d{10}$/;
returnvalidateReg.test(value);
},
getLength:function(value){
returnvalue.replace(/[^\x00-\xff]/g,"**").length;
},
isLicence:function(value){
varvalidateReg=/^[A-Za-z]{10}[0-9]{10}$/;
returnvalidateReg.test(value);
},
isPersonalCard:function(value){
varvalidateReg=/(^\d{15}$)|(^\d{17}(\d|[A-Za-z]{1})$)/;
returnvalidateReg.test(value);
},
isOrganizationCodeCard:function(value){
varvalidateReg=/^[A-Za-z0-9]{9}$/;
returnvalidateReg.test(value);
},
isBankAccount:function(value){
varvalidateReg=/^[1-9]{1}[0-9]*$/;
returnvalidateReg.test(value);
},
MaxLength:function(field,maxlimit){
varj=field.value.replace(/[^\x00-\xff]/g,"**").length;
vartempString=field.value;
vartt="";
if(j>maxlimit){
for(vari=0;i<maxlimit;i++){
if(tt.replace(/[^\x00-\xff]/g,"**").length<maxlimit)
tt=tempString.substr(0,i+1);
else
break;
}
if(tt.replace(/[^\x00-\xff]/g,"**").length>maxlimit){
tt=tt.substr(0,tt.length-1);
field.value=tt;
}
else{
field.value=tt;
}
}
}
};
这个类是写了一些验证Email、身份证号码等等的正则表达式，供我们后面使用，使用方法如下：
validateStringValueForEmail:function(obj,normalMsg,warningMsg){
varjqueryObj=$(obj);
ValidateHelper.clearMessage(obj);
if(!ValidateHelper.validateStringValueIsEmpty(jqueryObj,"通过","不能为空")){
ValidateHelper.warningMessage(jqueryObj,"不能为空");
returnfalse;
}
if(!Validation.isEmail(jqueryObj.val())){
ValidateHelper.warningMessage(jqueryObj,warningMsg);
returnfalse;
}
else{
ValidateHelper.normalMessage(jqueryObj,normalMsg);
returntrue;
}
},
validateStringValueForCardID:function(obj,normalMsg,warningMsg){
varjqueryObj=$(obj);
ValidateHelper.clearMessage(obj);
if(!ValidateHelper.validateStringValueIsEmpty(jqueryObj,"通过","不能为空")){
ValidateHelper.warningMessage(jqueryObj,"不能为空");
returnfalse;
}
if(!Validation.isPersonalCard(jqueryObj.val())){
ValidateHelper.warningMessage(jqueryObj,warningMsg);
returnfalse;
}
else{
ValidateHelper.normalMessage(jqueryObj,normalMsg);
returntrue;
}
},
那到这边是基本可以处理我们的一般的js验证了，可以试试以后用在自己的框架上，我们把自己调试的源码附上：
ASPX：
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="FormValidateModuleEx._Default"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="js\jquery-1.6.2.min.js"type="text/javascript"></script>
<scriptsrc="js\MyValidate.js"type="text/javascript"></script>
<%--<scriptsrc="js\CheckPersonCardID.js"type="text/javascript"></script>--%>
</head>
<body>
<div>
<li>
<labelfor="email">
用户名：
</label>
<inputname="email"type="text"id="email"maxlength="50"onblur="returnValidateHelper.validateStringValueIsEmpty($(this),"通过","不能为空");"/><em></em>
</li>
<li>
<labelfor="setPwd">
密码：
</label>
<inputname="setPwd"type="password"id="setPwd"maxlength="16"onblur="returnValidateHelper.validateStringValueIsEmpty($(this),"通过","不能为空");"/><em></em>
</li>
<li>
<labelfor="setPwd">
身份证：
</label>
<inputname="cardId"type="text"id="cardId"onblur="returnValidateHelper.validateStringValueForCardID($(this),"通过","身份证格式不正确");"/><em></em><%--IdCardValidate($(this),"身份证的格式不正确");--%>
</li>
<li>
<labelfor="setPwd">
Email：
</label>
<inputname="againEmail"type="text"id="againEmail"onblur="returnValidateHelper.validateStringValueForEmail($(this),"通过","email格式不正确");"/><em></em>
</li>
<li><inputonclick="returnValidateHelper.post();"type="button"id="btnPost"/></li>
</div>
</body>
</html>
js：
varValidation={
textCount:function(field,counter,maxLimit){
varmessage=$(field).val();
if($(field).val().length>maxLimit)
$(field).val(message.substring(0,maxLimit))
//$(counter).text(maxLimit-field.value.length);
},
refreshValidator:function(img,input){
$(img).attr("src",$(img).attr("src")+"&r="+Math.random());
$(input).focus();
},
isUrl:function(s){
varstrRegex=
/^((http(s)?|ftp|telnet|news|rtsp|mms):\/\/)?(((\w(\-*\w)*\.)+[a-zA-Z]{2,4})|(((1\d\d|2([0-4]\d|5[0-5])|[1-9]\d|\d).){3}(1\d\d|2([0-4]\d|5[0-5])|[1-9]\d|\d).?))(:\d{0,5})?(\/+.*)*$/;
returnstrRegex.test(s);
},
isDecimal:function(d){varpattern=/^(([1-9]\d{0,12})|0)(\.\d{1,2})?$/;returnpattern.test(d);},
isEmail:function(s){
varpattern=/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
returnpattern.test(s);
},
isLowEmail:function(s){
varb,e;
b=s.indexOf("@");
e=s.indexOf(".");
if(b<=0)returnfalse;
if(e<0||e==(s.length-1)){returnfalse;}
returntrue;
},
clearNoNum:function(event,obj){
event=window.event||event;
if(event.keyCode==37|event.keyCode==39){
return;
}
obj.value=obj.value.replace(/[^\d.]/g,"");
obj.value=obj.value.replace(/^\./g,"");
obj.value=obj.value.replace(/\.{2,}/g,".");
obj.value=obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
},
checkNum:function(obj){
obj.value=obj.value.replace(/\.$/g,"");
},
isInteger:function(value){
varintegerReg=newRegExp(/^\d+$/);
returnintegerReg.test(value);
},
isValidateReg:function(value){
varvalidateReg=/^([A-Za-z0-9\s\-\_\~\!\@\#\$\%\^\&\*\(\)\|\<\>\?\:\;\"\"\.\[\]\{\}\,\+\`\/\\\=]){6,16}$/;
if(validateReg.test(value)){
returntrue;
}
returnfalse;
},
isDate:function(strValue){
varobjRegExp=/^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/
if(!objRegExp.test(strValue))
returnfalse;
else{
vararrayDate=strValue.split(RegExp.$1);
varintDay=parseInt(arrayDate[2],10);
varintYear=parseInt(arrayDate[0],10);
varintMonth=parseInt(arrayDate[1],10);
if(intMonth>12||intMonth<1){
returnfalse;
}
vararrayLookup={"1":31,"3":31,"4":30,"5":31,"6":30,"7":31,
"8":31,"9":30,"10":31,"11":30,"12":31
}
if(arrayLookup[parseInt(arrayDate[1])]!=null){
if(intDay<=arrayLookup[parseInt(arrayDate[1])]&&intDay!=0)
returntrue;
}
if(intMonth-2==0){
varbooLeapYear=(intYear%4==0&&(intYear%100!=0||intYear%400==0));
if(((booLeapYear&&intDay<=29)||(!booLeapYear&&intDay<=28))&&intDay!=0)
returntrue;
}
}
returnfalse;
},
isZip:function(value){
varvalidateReg=/^[0-9]{6}$/;
returnvalidateReg.test(value);
},
checkSpecialChar:function(value){
varvalidateReg=/([~!@#$%^&*\/\\,.\(\)]){6,16}$/;
returnvalidateReg.test(value);
},
CheckSpecialString:function(value){
varvalidateReg=/[\u0000-\u0008\u000B\u000C\u000E-\u001F\uD800-\uDFFF\uFFFE\uFFFF]/;
returnvalidateReg.test(value);
},
isTel:function(s){
varpatrn=/^\d{3,4}-\d{7,8}(-\d{3,4})?$/
if(!patrn.exec(s))returnfalse
returntrue
},
isMobile:function(value){
varvalidateReg=/^1\d{10}$/;
returnvalidateReg.test(value);
},
getLength:function(value){
returnvalue.replace(/[^\x00-\xff]/g,"**").length;
},
isLicence:function(value){
varvalidateReg=/^[A-Za-z]{10}[0-9]{10}$/;
returnvalidateReg.test(value);
},
isPersonalCard:function(value){
varvalidateReg=/(^\d{15}$)|(^\d{17}(\d|[A-Za-z]{1})$)/;
returnvalidateReg.test(value);
},
isOrganizationCodeCard:function(value){
varvalidateReg=/^[A-Za-z0-9]{9}$/;
returnvalidateReg.test(value);
},
isBankAccount:function(value){
varvalidateReg=/^[1-9]{1}[0-9]*$/;
returnvalidateReg.test(value);
},
MaxLength:function(field,maxlimit){
varj=field.value.replace(/[^\x00-\xff]/g,"**").length;
vartempString=field.value;
vartt="";
if(j>maxlimit){
for(vari=0;i<maxlimit;i++){
if(tt.replace(/[^\x00-\xff]/g,"**").length<maxlimit)
tt=tempString.substr(0,i+1);
else
break;
}
if(tt.replace(/[^\x00-\xff]/g,"**").length>maxlimit){
tt=tt.substr(0,tt.length-1);
field.value=tt;
}
else{
field.value=tt;
}
}
}
};
varValidateHelper={
validateStringValueIsEmpty:function(obj,normalMsg,warningMsg){
varjqueryObj=$(obj);
ValidateHelper.clearMessage(obj);
if($.trim(jqueryObj.val()).length==0){
ValidateHelper.warningMessage(jqueryObj,warningMsg);
returnfalse;
}
else{
ValidateHelper.normalMessage(jqueryObj,normalMsg);
returntrue;
}
},
validateStringValueForEmail:function(obj,normalMsg,warningMsg){
varjqueryObj=$(obj);
ValidateHelper.clearMessage(obj);
if(!ValidateHelper.validateStringValueIsEmpty(jqueryObj,"通过","不能为空")){
ValidateHelper.warningMessage(jqueryObj,"不能为空");
returnfalse;
}
if(!Validation.isEmail(jqueryObj.val())){
ValidateHelper.warningMessage(jqueryObj,warningMsg);
returnfalse;
}
else{
ValidateHelper.normalMessage(jqueryObj,normalMsg);
returntrue;
}
},
validateStringValueForCardID:function(obj,normalMsg,warningMsg){
varjqueryObj=$(obj);
ValidateHelper.clearMessage(obj);
if(!ValidateHelper.validateStringValueIsEmpty(jqueryObj,"通过","不能为空")){
ValidateHelper.warningMessage(jqueryObj,"不能为空");
returnfalse;
}
if(!Validation.isPersonalCard(jqueryObj.val())){
ValidateHelper.warningMessage(jqueryObj,warningMsg);
returnfalse;
}
else{
ValidateHelper.normalMessage(jqueryObj,normalMsg);
returntrue;
}
},
normalMessage:function(jqueryObj,msg){
varemObj=$(jqueryObj.parent().find("em")[0]);
emObj.empty().append(msg);
},
warningMessage:function(jqueryObj,msg){
ValidateHelper.clearMessage(jqueryObj);
varemObj=$(jqueryObj.parent().find("em")[0]);
varspanElement="<spanstyle="color:#FF4C31;float:left;height:23px;line-height:23px;padding:010px035px;">"
+msg
+"</span>";
emObj.empty().append(spanElement);
},
clearMessage:function(jqueryObj){
varemObj=$(jqueryObj.parent().find("em")[0]);
emObj.empty();
},
initInfo:function(){
varuserName=$("#email");
varuserPwd=$("#setPwd");
if(!ValidateHelper.validateStringValueIsEmpty(userName,"通过","不能为空")){
userName.focus();
returnnull;
}
if(!ValidateHelper.validateStringValueIsEmpty(userPwd,"通过","不能为空")){
userPwd.focus();
returnnull;
}
varuserInfo={
UserName:userName.val(),
UserPwd:userPwd.val()
};
returnuserInfo;
},
post:function(){
varuserInfo=ValidateHelper.initInfo();
if(userInfo==null){
return;
}
$.ajax({
type:"post",
dataType:"text",
url:"Ajax/Module.aspx",
timeout:30000,
data:{UserName:userInfo.UserName,UserPwd:userInfo.UserPwd},
success:function(data){
alert(data.toString());
}
});
}
}
相关文章
- MongoVUE_Vue.js+Flask+MongoDB
- html js 全局 变量,JS定义全局变量
- 初识js中的闭包_Js闭包中变量理解
- js数组转对象_js数组去重的四种方法
- Js生成二维码_js在线生成二维码
- js 数组去除重复数据-当WPS开始像支持VBA一样支持JS语言时，微软又该何去何从？
- 【JS 逆向百例】猿人学系列 web 比赛第五题：js 混淆 - 乱码增强，详细剖析
- js如何引用同级元素
- 【愚公系列】2023年03月 其他-Web前端基础面试题（JS_33道）
- 如何使用jscythe并通过Node.js的Inspector机制执行任意JS代码
- JS scroll事件：页面滚动
- 使用JS连接MySQL数据库：实现化繁为简（js连接mysql数据库）
- 使用JS实现Redis数据读取（js读取redis）
- 利用 JS 实现 Redis 的连接（js连接redis）
- 使用 JS 操作 Redis：实现强大数据存储.（js调用redis）
- 用SQL Server和JS实现数据库管理技术（sqlserver.js）
- 妙用JS获取Oracle信息的快速方法（js获取Oracle）
- JS在Oracle中的应用（js如何oracle）
- 总结AJAX相关JS代码片段和浏览器模型
- js自动滑动+鼠标滑动区域
- JS入门代码集合
- js日期转换成中文格式的函数
- 调用js时ie6和ie7，ff的区别
- CSS和JS标签style属性对照表(方便js开发的朋友)
- js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
- js对象之JS入门之Array对象操作小结
- 远离JS灾难css灾难之js私有函数和css选择器作为容器
- C#利用ScriptControl动态执行JS和VBS脚本
- 动态加载js和css(外部文件)
- 解析jQuery与其它js(Prototype)库兼容共存
- JS随机生成不重复数据的实例方法
- 多种方法实现JS动态添加事件
- js调用百度地图api并在地图上进行打点添加标注
- JS新增Cookie取cookie值删除cookie举例详解
- node.js中的fs.futimesSync方法使用说明