js form 驗證函數(shù) 當(dāng)前比較流行的錯誤提示

WindySky 2009-06-24

展開全文

-
-
前段時間寫了一個 js數(shù)據(jù)驗證、js email驗證、js url驗證、js長度驗證、js數(shù)字驗證等彈出對話框形式的但是,現(xiàn)在不太流行那種很不友好的方式,于是重寫了一個,封裝得更加好的,更友好的層形式
共享給大家,如果大家使用有bug,請大家給我留言完善,謝謝了.
保存為 test.js
[復(fù)制此代碼]CODE:
/**
* 數(shù)據(jù)驗證框架.增加了對id字段檢查出錯時,直接在對應(yīng)后面添加一< span>元素來顯示錯誤信息.
*
* @author wangzi6hao
* @version 2.1
* @description 2009-05-16
*/
var checkData = new function() {
var idExt="_wangzi6hao_Span";//生成span層的id后綴
/**
* 得到中英文字符長(中文為2個字符)
*
* @param {}
* str
* @return 字符長
*/
this.length = function(str) {
var p1 = new RegExp('%u..', 'g')
var p2 = new RegExp('%.', 'g')
return escape(str).replace(p1, '').replace(p2, '').length
}
/**
* 刪除對應(yīng)id元素
*/
this.remove = function(id) {
var idObject = document.getElementById(id);
if (idObject != null)
idObject.parentNode.removeChild(idObject);
}
/**
* 在對應(yīng)id后面錯誤信息
*
* @param id:需要顯示錯誤信息的id元素
* str:顯示錯誤信息
*/
this.appendError = function(id, str) {
this.remove(id + idExt);// 如果span元素存在，則先刪除此元素
var spanNew = document.createElement("span");// 創(chuàng)建span
spanNew.id = id + idExt;// 生成spanid
spanNew.style.color = "red";
spanNew.appendChild(document.createTextNode(str));// 給span添加內(nèi)容
var inputId = document.getElementById(id);
inputId.parentNode.insertBefore(spanNew, inputId.nextSibling);// 給需要添加元素后面添加span
}
/**
* @description 過濾所有空格字符。
* @param str:需要去掉空間的原始字符串
* @return 返回已經(jīng)去掉空格的字符串
*/
this.trimSpace = function(str) {
str += "";
while ((str.charAt(0) == ' ') || (str.charAt(0) == '???')
|| (escape(str.charAt(0)) == '%u3000'))
str = str.substring(1, str.length);
while ((str.charAt(str.length - 1) == ' ')
|| (str.charAt(str.length - 1) == '???')
|| (escape(str.charAt(str.length - 1)) == '%u3000'))
str = str.substring(0, str.length - 1);
return str;
}
/**
* 過濾字符串開始部分的空格\字符串結(jié)束部分的空格\將文字中間多個相連的空格變?yōu)橐粋€空格
*
* @param {Object}
* inputString
*/
this.trim = function(inputString) {
if (typeof inputString != "string") {
return inputString;
}
var retValue = inputString;
var ch = retValue.substring(0, 1);
while (ch == " ") {
// 檢查字符串開始部分的空格
retValue = retValue.substring(1, retValue.length);
ch = retValue.substring(0, 1);
}
ch = retValue.substring(retValue.length - 1, retValue.length);
while (ch == " ") {
// 檢查字符串結(jié)束部分的空格
retValue = retValue.substring(0, retValue.length - 1);
ch = retValue.substring(retValue.length - 1, retValue.length);
}
while (retValue.indexOf(" ") != -1) {
// 將文字中間多個相連的空格變?yōu)橐粋€空格
retValue = retValue.substring(0, retValue.indexOf(" "))
+ retValue.substring(retValue.indexOf(" ") + 1,
retValue.length);
}
return retValue;
}
/**
* 過濾字符串,指定過濾內(nèi)容，如果內(nèi)容為空，則默認(rèn)過濾 '~!@#$%^&*()-+."
*
* @param {Object}
* str
* @param {Object}
* filterStr
*
* @return 包含過濾內(nèi)容，返回True,否則返回false;
*/
this.filterStr = function(str, filterString) {
filterString = filterString == "" ? "'~!@#$%^&*()-+.\"" : filterString
var ch;
var i;
var temp;
var error = false;// 當(dāng)包含非法字符時，返回True
for (i = 0; i <= (filterString.length - 1); i++) {
ch = filterString.charAt(i);
temp = str.indexOf(ch);
if (temp != -1) {
error = true;
break;
}
}
return error;
}
this.filterStrSpan = function(id, filterString) {
filterString = filterString == "" ? "'~!@#$%^&*()-+.\"" : filterString
var val = document.getElementById(id);
if (this.filterStr(val.value, filterString)) {
val.select();
var str = "不能包含非法字符" + filterString;
this.appendError(id, str);
return false;
} else {
this.remove(id + idExt);
return true;
}
}
/**
* 檢查是否為網(wǎng)址
*
* @param {}
* str_url
* @return {Boolean} true：是網(wǎng)址，false:<b>不是</b>網(wǎng)址;
*/
this.isURL = function(str_url) {// 驗證url
var strRegex = "^((https|http|ftp|rtsp|mms)?://)"
+ "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" // ftp的user@
+ "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
+ "|" // 允許IP和DOMAIN（域名）
+ "([0-9a-z_!~*'()-]+\.)*" // 域名- www.
+ "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二級域名
+ "[a-z]{2,6})" // first level domain- .com or .museum
+ "(:[0-9]{1,4})?" // 端口- :80
+ "((/?)|" // a slash isn't required if there is no file name
+ "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
var re = new RegExp(strRegex);
return re.test(str_url);
}
this.isURLSpan = function(id) {
var val = document.getElementById(id);
if (!this.isURL(val.value)) {
val.select();
var str = "鏈接不符合格式;";
this.appendError(id, str);
return false;
} else {
this.remove(id + idExt);
return true;
}
}
/**
* 檢查是否為電子郵件
*
* @param {}
* str
* @return {Boolean} true：電子郵件，false:<b>不是</b>電子郵件;
*/
this.isEmail = function(str) {
var re = /^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
return re.test(str);
}
this.isEmailSpan = function(id) {
var val = document.getElementById(id);
if (!this.isEmail(val.value)) {
val.select();
var str = "郵件不符合格式;";
this.appendError(id, str);
return false;
} else {
this.remove(id + idExt);
return true;
}
}
/**
* 檢查是否為數(shù)字
*
* @param {}
* str
* @return {Boolean} true：數(shù)字，false:<b>不是</b>數(shù)字;
*/
this.isNum = function(str) {
var re = /^[\d]+$/
return re.test(str);
}
this.isNumSpan = function(id) {
var val = document.getElementById(id);
if (!this.isNum(val.value)) {
val.select();
var str = "必須是數(shù)字;";
this.appendError(id, str);
return false;
} else {
this.remove(id + idExt);
return true;
}
}
/**
* 檢查數(shù)值是否在給定范圍以內(nèi),為空,不做檢查<br>
*
* @param {}
* str_num
* @param {}
* small 應(yīng)該大于或者等于的數(shù)值（此值為空時，只檢查不能大于最大值）
* @param {}
* big 應(yīng)該小于或者等于的數(shù)值（此值為空時，只檢查不能小于最小值）
*
* @return {Boolean} <b>小于最小數(shù)值或者大于最大數(shù)值</b>數(shù)字返回false 否則返回true;
*/
this.isRangeNum = function(str_num, small, big) {
if (!this.isNum(str_num)) // 檢查是否為數(shù)字
return false
if (small == "" && big == "")
throw str_num + "沒有定義最大，最小值數(shù)字！";
if (small != "") {
if (str_num < small)
return false;
}
if (big != "") {
if (str_num > big)
return false;
}
return true;
}
this.isRangeNumSpan = function(id, small, big) {
var val = document.getElementById(id);
if (!this.isRangeNum(val.value, small, big)) {
val.select();
var str = "";
if (small != "") {
str = "應(yīng)該大于或者等于 " + small;
}
if (big != "") {
str += " 應(yīng)該小于或者等于 " + big;
}
this.appendError(id, str);
return false;
} else {
this.remove(id + idExt);
return true;
}
}
/**
* 檢查是否為合格字符串(不區(qū)分大小寫)<br>
* 是由a-z0-9_組成的字符串
*
* @param {}
* str 檢查的字符串
* @param {}
* idStr 光標(biāo)定位的字段ID<b>只能接收ID</b>
* @return {Boolean} <b>不是</b>"a-z0-9_"組成返回false,否則返回true;
*/
this.isLicit = function(str) {
var re = /^[_0-9a-zA-Z]*$/
return re.test(str);
}
this.isLicitSpan = function(id) {
var val = document.getElementById(id);
if (!this.isLicit(val.value)) {
val.select();
var str = "是由a-z0-9_組成的字符串(不區(qū)分大小寫);";
this.appendError(id, str);
return false;
} else {
this.remove(id + idExt);
return true;
}
}
/**
* 檢查二個字符串是否相等
*
* @param {}
* str1 第一個字符串
* @param {}
* str2 第二個字符串
* @return {Boolean} 字符串不相等返回false,否則返回true;
*/
this.isEquals = function(str1, str2) {
return str1 == str2;
}
this.isEqualsSpan = function(id, id1) {
var val = document.getElementById(id);
var val1 = document.getElementById(id1);
if (!this.isEquals(val.value, val1.value)) {
val.select();
var str = "二次輸入內(nèi)容必須一樣;";
this.appendError(id, str);
return false;
} else {
this.remove(id + idExt);
return true;
}
}
/**
* 檢查字符串是否在給定長度范圍以內(nèi)(中文字符以2個字節(jié)計算),字符為空,不做檢查<br>
*
* @param {}
* str 檢查的字符
* @param {}
* lessLen 應(yīng)該大于或者等于的長度
* @param {}
* moreLen 應(yīng)該小于或者等于的長度
*
* @return {Boolean} <b>小于最小長度或者大于最大長度</b>數(shù)字返回false;
*/
this.isRange = function(str, lessLen, moreLen) {
var strLen = this.length(str);
if (lessLen != "") {
if (strLen < lessLen)
return false;
}
if (moreLen != "") {
if (strLen > moreLen)
return false;
}
if (lessLen == "" && moreLen == "")
throw "沒有定義最大最小長度!";
return true;
}
this.isRangeSpan = function(id, lessLen, moreLen) {
var val = document.getElementById(id);
if (!this.isRange(val.value, lessLen, moreLen)) {
var str = "長度";
if (lessLen != "")
str += "大于或者等于 " + lessLen + ";";
if (moreLen != "")
str += " 應(yīng)該小于或者等于 " + moreLen;
val.select();
this.appendError(id, str);
return false;
} else {
this.remove(id + idExt);
return true;
}
}
/**
* 檢查字符串是否小于給定長度范圍(中文字符以2個字節(jié)計算)<br>
*
* @param {}
* str 字符串
* @param {}
* lessLen 小于或等于長度
*
* @return {Boolean} <b>小于給定長度</b>數(shù)字返回false;
*/
this.isLess = function(str, lessLen) {
return this.isRange(str, lessLen, "");
}
this.isLessSpan = function(id, lessLen) {
var val = document.getElementById(id);
if (!this.isLess(val.value, lessLen)) {
var str = "長度大于或者等于 " + lessLen;
val.select();
this.appendError(id, str);
return false;
} else {
this.remove(id + idExt);
return true;
}
}
/**
* 檢查字符串是否大于給定長度范圍(中文字符以2個字節(jié)計算)<br>
*
* @param {}
* str 字符串
* @param {}
* moreLen 小于或等于長度
*
* @return {Boolean} <b>大于給定長度</b>數(shù)字返回false;
*/
this.isMore = function(str, moreLen) {
return this.isRange(str, "", moreLen);
}
this.isMoreSpan = function(id, moreLen) {
var val = document.getElementById(id);
if (!this.isMore(val.value, moreLen)) {
var str = "長度應(yīng)該小于或者等于 " + moreLen;
val.select();
this.appendError(id, str);
return false;
} else {
this.remove(id + idExt);
return true;
}
}
/**
* 檢查字符不為空
*
* @param {}
* str
* @return {Boolean} <b>字符為空</b>返回true,否則為false;
*/
this.isEmpty = function(str) {
return str == "";
}
this.isEmptySpan = function(id) {
var val = document.getElementById(id);
if (this.isEmpty(val.value)) {
var str = "不允許為空;";
val.select();
this.appendError(id, str);
return false;
} else {
this.remove(id + idExt);
return true;
}
}
}

下面是具體的測試頁面：
[復(fù)制此代碼]CODE:
<html>
<head>
<title>網(wǎng)頁標(biāo)題</title>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
function checkForm(){
var isPass = true;
//過濾字符串
if(!(checkData.isEmptySpan("filterStr") && checkData.filterStrSpan('filterStr','#$%$'))) {
isPass = false;
}
//檢查url
if(!(checkData.isEmptySpan("isURL") && checkData.isURLSpan('isURL')))
isPass = false;
//email
if(!(checkData.isEmptySpan("isEmail") && checkData.isEmailSpan('isEmail')))
isPass = false;
//數(shù)字
if(!(checkData.isNumSpan('isNum')))
isPass = false;
//數(shù)字大小
if(!(checkData.isEmptySpan("isRangeNum") && checkData.isNumSpan('isRangeNum') && checkData.isRangeNumSpan('isRangeNum',10,100)))
isPass = false;
//密碼 (數(shù)字,字母,下劃線)
if(!(checkData.isLicitSpan('isLicit')))
isPass = false;
//二個字段是否相等
if(!(checkData.isEmptySpan("isEquals") && checkData.isEqualsSpan('isEquals','isEquals1')))
isPass = false;
//字符長度控制
if(!(checkData.isRangeSpan('isRange',5,10)))
isPass = false;
//字符最短控制
if(!(checkData.isLessSpan('isLess',10)))
isPass = false;
//字符最長控制
if(!(checkData.isEmptySpan("isMore") && checkData.isMoreSpan('isMore',30)))
isPass = false;
//為空控制
if(!(checkData.isEmptySpan("isEmpty")))
isPass = false;
return isPass;
}
</script>
</head>
<body>
<form action="index.jsp" method="post" onsubmit="return checkForm();">
<table>
<tbody>
<tr>
<td>字符過濾：<input type="text" id="filterStr" name="filterStr"></td>
<td>鏈接：<input type="text" id="isURL" name="isURL"></td>
</tr>
<tr>
<td>郵件：<input type="text" id="isEmail" name="isEmail"></td>
<td>數(shù)字：<input type="text" id="isNum" name="isNum"></td>
</tr>
<tr>
<td>數(shù)字范圍：<input type="text" id="isRangeNum" name="isRangeNum"></td>
<td>a-zA-Z0-9_<input type="text" id="isLicit" name="isLicit"></td>
</tr>
<tr>
<td>判斷相等：<input type="text" id="isEquals" name="isEquals"></td>
<td><input type="text" id="isEquals1" name="isEquals1"></td>
</tr>
<tr>
<td>長度控制：<input type="text" id="isRange" name="isRange"></td>
<td>長度大于控制：<input type="text" id="isLess" name="isLess"></td>
</tr>
<tr>
<td>長度小于控制：<input type="text" id="isMore" name="isMore"></td>
<td>是否為空：<input type="text" id="isEmpty" name="isEmpty"></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="提交數(shù)據(jù)"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

效果圖：