js驗(yàn)證模型自我實(shí)現(xiàn)的具體方法
市面上有很多表單驗(yàn)證的框架，教我們?cè)趺打?yàn)證表單的數(shù)據(jù)提交，說(shuō)實(shí)話也真的很簡(jiǎn)單，但是我們會(huì)有一種感覺我們要是離開了這些框架的時(shí)候，我們有時(shí)候會(huì)束手無(wú)策，然后js驗(yàn)證寫的很不規(guī)范，沒(méi)有一套比較好的模式，那我寫這篇的目的就是：我們自己構(gòu)建js驗(yàn)證應(yīng)該是什么樣子的，來(lái)慢慢看一下。
假設(shè)我們現(xiàn)在寫一個(gè)登錄的頁(yè)面（這可能是最簡(jiǎn)單的數(shù)據(jù)提交了哦），html頁(yè)面會(huì)有一個(gè)用戶名和一個(gè)密碼的文本框讓我們用戶輸入自己的用戶名和密碼，我們肯定是要判斷用戶名和密碼是否為空，很明顯這樣的js驗(yàn)證判斷是放在onblur事件里面觸發(fā)，html代碼如下：
ValidateHelper是一個(gè)對(duì)象，一些驗(yàn)證的方法就是在這個(gè)對(duì)象里面，我們規(guī)定一下，js驗(yàn)證用戶的輸入有兩返回結(jié)果，一個(gè)成功，一個(gè)是失敗。成功的時(shí)候我們輸出成功的提示，
失敗的時(shí)候我們輸出失敗的提示，對(duì)應(yīng)的兩個(gè)輸出方法：
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);
},
還有一個(gè)清除提示的方法：
clearMessage: function(jqueryObj) {
var emObj = $(jqueryObj.parent().find('em')[0]);
emObj.empty();
},
我們已經(jīng)寫了成功和失敗提示方法，以及清除提示的方法，這個(gè)三個(gè)是我們?cè)诤竺鏁?huì)一直調(diào)用的基本方法。
好了，我們寫一個(gè)驗(yàn)證用戶輸入不能為空的方法：
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;
}
},
這個(gè)方法會(huì)在onblur中被調(diào)用的驗(yàn)證方法，里面自然也用到了成功和失敗提示方法，以及清除提示的方法。參數(shù)有三個(gè)，要驗(yàn)證的Dom或者jQuery對(duì)象、成功提示信息、失敗提示信
息。要是為空就失敗，要是不為空就成功。
上面寫好的方法在onblur中會(huì)觸發(fā)的，我們提交數(shù)據(jù)的時(shí)候還會(huì)用到得哦：
initInfo: function() {
var userName = $('#email');
var userPwd = $('#setPwd');
if (!ValidateHelper.validateStringValueIsEmpty(userName, '通過(guò)', '不能為空')) {
userName.focus();
return null;
}
if (!ValidateHelper.validateStringValueIsEmpty(userPwd, '通過(guò)', '不能為空')) {
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());
}
});
}
這邊呢要是在提交數(shù)據(jù)的時(shí)候會(huì)調(diào)用validateStringValueIsEmpty方法，要是返回的是失敗 是不會(huì)真的提交給服務(wù)器端得。
那上面的情況是一個(gè)最簡(jiǎn)單的處理不為空的情況，要是我們想驗(yàn)證是否是Email 是否是身份證號(hào)碼，這些復(fù)雜的驗(yàn)證實(shí)現(xiàn)如下：
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); },
isEmail: function(s) {
var pattern = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
return pattern.test(s);
},
isLowEmail: function(s) {
var b, e;
b = s.indexOf("@");
e = s.indexOf(".");
if (b <= 0) return false;
if (e < 0 || e == (s.length - 1)) { return false; }
return true;
},
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) {
var integerReg = new RegExp(/^\d+$/);
return integerReg.test(value);
},
isValidateReg: function(value) {
var validateReg = /^([A-Za-z0-9\s\-\_\~\!\@\#\$\%\^\&\*\(\)\|\<\>\?\:\;\"\'\.\[\]\{\}\,\+\`\/\\\=]){6,16}$/;
if (validateReg.test(value)) {
return true;
}
return false;
},
isDate: function(strValue) {
var objRegExp = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/
if (!objRegExp.test(strValue))
return false;
else {
var arrayDate = strValue.split(RegExp.$1);
var intDay = parseInt(arrayDate[2], 10);
var intYear = parseInt(arrayDate[0], 10);
var intMonth = parseInt(arrayDate[1], 10);
if (intMonth > 12 || intMonth < 1) {
return false;
}
var arrayLookup = { '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)
return true;
}
if (intMonth - 2 == 0) {
var booLeapYear = (intYear % 4 == 0 && (intYear % 100 != 0 || intYear % 400 == 0));
if (((booLeapYear && intDay <= 29) || (!booLeapYear && intDay <= 28)) && intDay != 0)
return true;
}
}
return false;
},
isZip: function(value) {
var validateReg = /^[0-9]{6}$/;
return validateReg.test(value);
},
checkSpecialChar: function(value) {
var validateReg = /([~!@#$%^&*\/\\,.\(\)]){6,16}$/;
return validateReg.test(value);
},
CheckSpecialString: function(value) {
var validateReg = /[\u0000-\u0008\u000B\u000C\u000E-\u001F\uD800-\uDFFF\uFFFE\uFFFF]/;
return validateReg.test(value);
},
isTel: function(s) {
var patrn = /^\d{3,4}-\d{7,8}(-\d{3,4})?$/
if (!patrn.exec(s)) return false
return true
},
isMobile: function(value) {
var validateReg = /^1\d{10}$/;
return validateReg.test(value);
},
getLength: function(value) {
return value.replace(/[^\x00-\xff]/g, "**").length;
},
isLicence: function(value) {
var validateReg = /^[A-Za-z]{10}[0-9]{10}$/;
return validateReg.test(value);
},
isPersonalCard: function(value) {
var validateReg = /(^\d{15}$)|(^\d{17}(\d|[A-Za-z]{1})$)/;
return validateReg.test(value);
},
isOrganizationCodeCard: function(value) {
var validateReg = /^[A-Za-z0-9]{9}$/;
return validateReg.test(value);
},
isBankAccount: function(value) {
var validateReg = /^[1-9]{1}[0-9]*$/;
return validateReg.test(value);
},
MaxLength: function(field, maxlimit) {
var j = field.value.replace(/[^\x00-\xff]/g, "**").length;
var tempString = field.value;
var tt = "";
if (j > maxlimit) {
for (var i = 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;
}
}
}
};
這個(gè)類是寫了一些驗(yàn)證Email 、身份證號(hào)碼等等的正則表達(dá)式，供我們后面使用，使用方法如下：
validateStringValueForEmail: function(obj, normalMsg, warningMsg) {
var jqueryObj = $(obj);
ValidateHelper.clearMessage(obj);
if (!ValidateHelper.validateStringValueIsEmpty(jqueryObj, "通過(guò)", "不能為空")) {
ValidateHelper.warningMessage(jqueryObj, "不能為空");
return false;
}
if (!Validation.isEmail(jqueryObj.val())) {
ValidateHelper.warningMessage(jqueryObj, warningMsg);
return false;
}
else {
ValidateHelper.normalMessage(jqueryObj, normalMsg);
return true;
}
},
validateStringValueForCardID: function(obj, normalMsg, warningMsg) {
var jqueryObj = $(obj);
ValidateHelper.clearMessage(obj);
if (!ValidateHelper.validateStringValueIsEmpty(jqueryObj, "通過(guò)", "不能為空")) {
ValidateHelper.warningMessage(jqueryObj, "不能為空");
return false;
}
if (!Validation.isPersonalCard(jqueryObj.val())) {
ValidateHelper.warningMessage(jqueryObj, warningMsg);
return false;
}
else {
ValidateHelper.normalMessage(jqueryObj, normalMsg);
return true;
}
},
那到這邊是基本可以處理我們的一般的js驗(yàn)證了，可以試試以后用在自己的框架上，我們把自己調(diào)試的源碼附上：
ASPX ：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FormValidateModuleEx._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js\jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js\MyValidate.js" type="text/javascript"></script>
<%--<script src="js\CheckPersonCardID.js" type="text/javascript"></script>--%>
</head>
<body>
<div>
<li>
<label for="email">
用戶名：
</label>
<input name="email" type="text" id="email" maxlength="50" onblur="return ValidateHelper.validateStringValueIsEmpty($(this),'通過(guò)','不能為空');" /><em></em>
</li>
<li>
<label for="setPwd">
密碼：
</label>
<input name="setPwd" type="password" id="setPwd" maxlength="16" onblur="return ValidateHelper.validateStringValueIsEmpty($(this),'通過(guò)','不能為空');" /><em></em>
</li>
<li>
<label for="setPwd">
身份證：
</label>
<input name="cardId" type="text" id="cardId" onblur="return ValidateHelper.validateStringValueForCardID($(this),'通過(guò)','身份證格式不正確');" /><em></em><%--IdCardValidate($(this),'身份證的格式不正確');--%>
</li>
<li>
<label for="setPwd">
Email：
</label>
<input name="againEmail" type="text" id="againEmail" onblur="return ValidateHelper.validateStringValueForEmail($(this),'通過(guò)','email格式不正確');" /><em></em>
</li>
<li><input onclick="return ValidateHelper.post();" type="button" id="btnPost" /></li>
</div>
</body>
</html>
js：
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); },
isEmail: function(s) {
var pattern = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
return pattern.test(s);
},
isLowEmail: function(s) {
var b, e;
b = s.indexOf("@");
e = s.indexOf(".");
if (b <= 0) return false;
if (e < 0 || e == (s.length - 1)) { return false; }
return true;
},
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) {
var integerReg = new RegExp(/^\d+$/);
return integerReg.test(value);
},
isValidateReg: function(value) {
var validateReg = /^([A-Za-z0-9\s\-\_\~\!\@\#\$\%\^\&\*\(\)\|\<\>\?\:\;\"\'\.\[\]\{\}\,\+\`\/\\\=]){6,16}$/;
if (validateReg.test(value)) {
return true;
}
return false;
},
isDate: function(strValue) {
var objRegExp = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/
if (!objRegExp.test(strValue))
return false;
else {
var arrayDate = strValue.split(RegExp.$1);
var intDay = parseInt(arrayDate[2], 10);
var intYear = parseInt(arrayDate[0], 10);
var intMonth = parseInt(arrayDate[1], 10);
if (intMonth > 12 || intMonth < 1) {
return false;
}
var arrayLookup = { '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)
return true;
}
if (intMonth - 2 == 0) {
var booLeapYear = (intYear % 4 == 0 && (intYear % 100 != 0 || intYear % 400 == 0));
if (((booLeapYear && intDay <= 29) || (!booLeapYear && intDay <= 28)) && intDay != 0)
return true;
}
}
return false;
},
isZip: function(value) {
var validateReg = /^[0-9]{6}$/;
return validateReg.test(value);
},
checkSpecialChar: function(value) {
var validateReg = /([~!@#$%^&*\/\\,.\(\)]){6,16}$/;
return validateReg.test(value);
},
CheckSpecialString: function(value) {
var validateReg = /[\u0000-\u0008\u000B\u000C\u000E-\u001F\uD800-\uDFFF\uFFFE\uFFFF]/;
return validateReg.test(value);
},
isTel: function(s) {
var patrn = /^\d{3,4}-\d{7,8}(-\d{3,4})?$/
if (!patrn.exec(s)) return false
return true
},
isMobile: function(value) {
var validateReg = /^1\d{10}$/;
return validateReg.test(value);
},
getLength: function(value) {
return value.replace(/[^\x00-\xff]/g, "**").length;
},
isLicence: function(value) {
var validateReg = /^[A-Za-z]{10}[0-9]{10}$/;
return validateReg.test(value);
},
isPersonalCard: function(value) {
var validateReg = /(^\d{15}$)|(^\d{17}(\d|[A-Za-z]{1})$)/;
return validateReg.test(value);
},
isOrganizationCodeCard: function(value) {
var validateReg = /^[A-Za-z0-9]{9}$/;
return validateReg.test(value);
},
isBankAccount: function(value) {
var validateReg = /^[1-9]{1}[0-9]*$/;
return validateReg.test(value);
},
MaxLength: function(field, maxlimit) {
var j = field.value.replace(/[^\x00-\xff]/g, "**").length;
var tempString = field.value;
var tt = "";
if (j > maxlimit) {
for (var i = 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;
}
}
}
};
var ValidateHelper = {
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;
}
},
validateStringValueForEmail: function(obj, normalMsg, warningMsg) {
var jqueryObj = $(obj);
ValidateHelper.clearMessage(obj);
if (!ValidateHelper.validateStringValueIsEmpty(jqueryObj, "通過(guò)", "不能為空")) {
ValidateHelper.warningMessage(jqueryObj, "不能為空");
return false;
}
if (!Validation.isEmail(jqueryObj.val())) {
ValidateHelper.warningMessage(jqueryObj, warningMsg);
return false;
}
else {
ValidateHelper.normalMessage(jqueryObj, normalMsg);
return true;
}
},
validateStringValueForCardID: function(obj, normalMsg, warningMsg) {
var jqueryObj = $(obj);
ValidateHelper.clearMessage(obj);
if (!ValidateHelper.validateStringValueIsEmpty(jqueryObj, "通過(guò)", "不能為空")) {
ValidateHelper.warningMessage(jqueryObj, "不能為空");
return false;
}
if (!Validation.isPersonalCard(jqueryObj.val())) {
ValidateHelper.warningMessage(jqueryObj, warningMsg);
return false;
}
else {
ValidateHelper.normalMessage(jqueryObj, normalMsg);
return true;
}
},
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);
},
clearMessage: function(jqueryObj) {
var emObj = $(jqueryObj.parent().find('em')[0]);
emObj.empty();
},
initInfo: function() {
var userName = $('#email');
var userPwd = $('#setPwd');
if (!ValidateHelper.validateStringValueIsEmpty(userName, '通過(guò)', '不能為空')) {
userName.focus();
return null;
}
if (!ValidateHelper.validateStringValueIsEmpty(userPwd, '通過(guò)', '不能為空')) {
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());
}
});
}
}
相關(guān)文章
圖片連續(xù)不間斷滾動(dòng)像冊(cè)...2007-01-01
這篇文章主要介紹了js基于cookie方式記住返回頁(yè)面的用法,涉及javascript操作cookie及php針對(duì)cookie的判斷技巧,需要的朋友可以參考下2016-05-05
比JSON.stringify快兩倍的fast-json-stringify性能對(duì)比分析
這篇文章主要為大家介紹了比JSON.stringify快兩倍的fast-json-stringify性能對(duì)比分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了JavaScript 條件判斷與比較運(yùn)算,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
在iframe里的頁(yè)面編寫js，實(shí)現(xiàn)在父窗口上創(chuàng)建動(dòng)畫效果展開和收縮的div（不變動(dòng)iframe父窗口代碼）
在iframe里的頁(yè)面編寫js，實(shí)現(xiàn)在父窗口上創(chuàng)建動(dòng)畫效果展開和收縮的div（不變動(dòng)iframe父窗口代碼）2011-12-12
本篇文章主要是對(duì)js 判斷控件獲得焦點(diǎn)的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
這篇文章主要介紹了 jstree單選功能的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-06-06
JS插件plupload.js實(shí)現(xiàn)多圖上傳并顯示進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了PHP結(jié)合plupload.js JS插件實(shí)現(xiàn)多圖上傳并顯示進(jìn)度條加刪除實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
原生js實(shí)現(xiàn)倒計(jì)時(shí)--2018
本文主要介紹了原生js實(shí)現(xiàn)倒計(jì)時(shí)--2018的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
使用JSX 建立組件 Parser（解析器）開發(fā)的示例
這篇文章主要介紹了使用JSX 建立組件 Parser（解析器）開發(fā)的示例（前端組件化）本文重點(diǎn)講述我們?nèi)绾螐?開始搭建一個(gè)組件系統(tǒng)，基于標(biāo)記語(yǔ)言的Parser的一種風(fēng)格2021-04-04