js验证模型自我实现
市面上有很多表单验证的框架，教我们怎么验证表单的数据提交，说实话也真的很简单，但是我们会有一种感觉我们要是离开了这些框架的时候，我们有时候会束手无策，然后js验证写的很不规范，没有一套比较好的模式，那我写这篇的目的就是：我们自己构建js验证应该是什么样子的，来慢慢看一下。
假设我们现在写一个登录的页面（这可能是最简单的数据提交了哦），html页面会有一个用户名和一个密码的文本框让我们用户输入自己的用户名和密码，我们肯定是要判断用户名和密码是否为空，很明显这样的js验证判断是放在onblur事件里面触发，html代码如下：
View Code
ValidateHelper是一个对象，一些验证的方法就是在这个对象里面，我们规定一下，js验证用户的输入有两返回结果，一个成功，一个是失败。成功的时候我们输出成功的提示，
失败的时候我们输出失败的提示，对应的两个输出方法：
View Code
normalMessage: function(jqueryObj, msg) {
var emObj = $(jqueryObj.parent().find('em')[0]);
emObj.empty().append(msg);
},
warningMessage: function(jqueryObj, msg) {
ValidateHelper.clearMessage(jqueryObj);
var emObj = $(jqueryObj.parent().find('em')[0]);
var spanElement = "<span style='color:#FF4C31;float:left;height:23px;line-height:23px;padding:0 10px 0 35px;'>"
+ msg
+ "</span>";
emObj.empty().append(spanElement);
},
还有一个清除提示的方法：
View Code
clearMessage: function(jqueryObj) {
var emObj = $(jqueryObj.parent().find('em')[0]);
emObj.empty();
},
我们已经写了成功和失败提示方法，以及清除提示的方法，这个三个是我们在后面会一直调用的基本方法。
好了，我们写一个验证用户输入不能为空的方法：
View Code
validateStringValueIsEmpty: function(obj, normalMsg, warningMsg) {
var jqueryObj = $(obj);
ValidateHelper.clearMessage(obj);
if ($.trim(jqueryObj.val()).length == 0) {
ValidateHelper.warningMessage(jqueryObj, warningMsg);
return false;
}
else {
ValidateHelper.normalMessage(jqueryObj, normalMsg);
return true;
}
},
这个方易做图在onblur中被调用的验证方法，里面自然也用到了成功和失败提示方法，以及清除提示的方法。参数有三个，要验证的Dom或者jQuery对象、成功提示信息、失败提示信
息。要是为空就失败，要是不为空就成功。
上面写好的方法在onblur中会触发的，我们提交数据的时候还会用到得哦：
View Code
initInfo: function() {
var userName = $('#email');
var userPwd = $('#setPwd');
if (!ValidateHelper.validateStringValueIsEmpty(userName, '通过', '不能为空')) {
userName.focus();
return null;
}
if (!ValidateHelper.validateStringValueIsEmpty(userPwd, '通过', '不能为空')) {
userPwd.focus();
return null;
}
var userInfo = {
UserName: userName.val(),
UserPwd: userPwd.val()
};
return userInfo;
},
post: function() {
var userInfo = 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 是否是身份证号码，这些复杂的验证实现如下：
var Validation = {
textCount: function(field, counter, maxLimit) {
var message = $(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) {
var strRegex =
/^((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})?(\/+.*)*$/;
return strRegex.test(s);
},
isDecimal: function(d) { var pattern = /^(([1-9]\d{0,12})|0)(\.\d{1,2})?$/; return pattern.test(d); },
