js資料驗證、js email驗證、js url驗證、js長度驗證、js數字驗證等

/**<br />* 資料驗證架構.增加了對id欄位檢查出錯時,直接在對應後面添加一< span>元素來顯示錯誤資訊.<br />*<br />* @author wangzi6hao<br />* @version 2.1<br />* @description 2009-05-16<br />*/<br />var checkData = new function() {<br /> var idExt="_wangzi6hao_Span";//產生span層的id尾碼<br /> /**<br /> * 得到中英文字元長(中文為2個字元)<br /> *<br /> * @param {}<br /> * str<br /> * @return 字元長<br /> */<br /> this.length = function(str) {<br /> var p1 = new RegExp('%u..', 'g')<br /> var p2 = new RegExp('%.', 'g')<br /> return escape(str).replace(p1, '').replace(p2, '').length<br /> } </p><p> /**<br /> * 刪除對應id元素<br /> */<br /> this.remove = function(id) {<br /> var idObject = document.getElementById(id);<br /> if (idObject != null)<br /> idObject.parentNode.removeChild(idObject);<br /> } </p><p> /**<br /> * 在對應id後面錯誤資訊<br /> *<br /> * @param id:需要顯示錯誤資訊的id元素<br /> * str:顯示錯誤資訊<br /> */<br /> this.appendError = function(id, str) {<br /> this.remove(id + idExt);// 如果span元素存在，則先刪除此元素<br /> var spanNew = document.createElement("span");// 建立span<br /> spanNew.id = id + idExt;// 產生spanid<br /> spanNew.style.color = "red";<br /> spanNew.appendChild(document.createTextNode(str));// 給span新增內容<br /> var inputId = document.getElementById(id);<br /> inputId.parentNode.insertBefore(spanNew, inputId.nextSibling);// 給需要添加元素後面添加span<br /> } </p><p> /**<br /> * @description 過濾所有空白字元。<br /> * @param str:需要去掉空間的原始字串<br /> * @return 返回已經去掉空格的字串<br /> */<br /> this.trimSpace = function(str) {<br /> str += "";<br /> while ((str.charAt(0) == ' ') || (str.charAt(0) == '???')<br /> || (escape(str.charAt(0)) == '%u3000'))<br /> str = str.substring(1, str.length);<br /> while ((str.charAt(str.length - 1) == ' ')<br /> || (str.charAt(str.length - 1) == '???')<br /> || (escape(str.charAt(str.length - 1)) == '%u3000'))<br /> str = str.substring(0, str.length - 1);<br /> return str;<br /> } </p><p> /**<br /> * 過濾字串開始部分的空格/字串結束部分的空格/將文字中間多個相連的空格變為一個空格<br /> *<br /> * @param {Object}<br /> * inputString<br /> */<br /> this.trim = function(inputString) {<br /> if (typeof inputString != "string") {<br /> return inputString;<br /> }<br /> var retValue = inputString;<br /> var ch = retValue.substring(0, 1);<br /> while (ch == " ") {<br /> // 檢查字串開始部分的空格<br /> retValue = retValue.substring(1, retValue.length);<br /> ch = retValue.substring(0, 1);<br /> }<br /> ch = retValue.substring(retValue.length - 1, retValue.length);<br /> while (ch == " ") {<br /> // 檢查字串結束部分的空格<br /> retValue = retValue.substring(0, retValue.length - 1);<br /> ch = retValue.substring(retValue.length - 1, retValue.length);<br /> }<br /> while (retValue.indexOf(" ") != -1) {<br /> // 將文字中間多個相連的空格變為一個空格<br /> retValue = retValue.substring(0, retValue.indexOf(" "))<br /> + retValue.substring(retValue.indexOf(" ") + 1,<br /> retValue.length);<br /> }<br /> return retValue;<br /> } </p><p> /**<br /> * 過濾字串,指定過濾內容，如果內容為空白，則預設過濾 '~!@#$%^&*()-+."<br /> *<br /> * @param {Object}<br /> * str<br /> * @param {Object}<br /> * filterStr<br /> *<br /> * @return 包含過濾內容，返回True,否則返回false;<br /> */<br /> this.filterStr = function(str, filterString) {<br /> filterString = filterString == "" ? "'~!@#$%^&*()-+./"" : filterString<br /> var ch;<br /> var i;<br /> var temp;<br /> var error = false;// 當包含非法字元時，返回True<br /> for (i = 0; i <= (filterString.length - 1); i++) {<br /> ch = filterString.charAt(i);<br /> temp = str.indexOf(ch);<br /> if (temp != -1) {<br /> error = true;<br /> break;<br /> }<br /> }<br /> return error;<br /> } </p><p> this.filterStrSpan = function(id, filterString) {<br /> filterString = filterString == "" ? "'~!@#$%^&*()-+./"" : filterString<br /> var val = document.getElementById(id);<br /> if (this.filterStr(val.value, filterString)) {<br /> val.select();<br /> var str = "不能包含非法字元" + filterString;<br /> this.appendError(id, str);<br /> return false;<br /> } else {<br /> this.remove(id + idExt);<br /> return true;<br /> }<br /> } </p><p> /**<br /> * 檢查是否為網址<br /> *<br /> * @param {}<br /> * str_url<br /> * @return {Boolean} true：是網址，false:<b>不是</b>網址;<br /> */<br /> this.isURL = function(str_url) {// 驗證url<br /> var strRegex = "^((https|http|ftp|rtsp|mms)?://)"<br /> + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" // ftp的user@<br /> + "(([0-9]{1,3}/.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184<br /> + "|" // 允許IP和DOMAIN（網域名稱）<br /> + "([0-9a-z_!~*'()-]+/.)*" // 網域名稱- www.<br /> + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]/." // 次層網域<br /> + "[a-z]{2,6})" // first level domain- .com or .museum<br /> + "(:[0-9]{1,4})?" // 連接埠- :80<br /> + "((/?)|" // a slash isn't required if there is no file name<br /> + "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";<br /> var re = new RegExp(strRegex);<br /> return re.test(str_url);<br /> } </p><p> this.isURLSpan = function(id) {<br /> var val = document.getElementById(id);<br /> if (!this.isURL(val.value)) {<br /> val.select();<br /> var str = "連結不符合格式;";<br /> this.appendError(id, str);<br /> return false;<br /> } else {<br /> this.remove(id + idExt);<br /> return true;<br /> }<br /> } </p><p> /**<br /> * 檢查是否為電子郵件<br /> *<br /> * @param {}<br /> * str<br /> * @return {Boolean} true：電子郵件，false:<b>不是</b>電子郵件;<br /> */<br /> this.isEmail = function(str) {<br /> var re = /^([a-zA-Z0-9]+[_|/-|/.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|/-|/.]?)*[a-zA-Z0-9]+/.[a-zA-Z]{2,3}$/;<br /> return re.test(str);<br /> } </p><p> this.isEmailSpan = function(id) {<br /> var val = document.getElementById(id);<br /> if (!this.isEmail(val.value)) {<br /> val.select();<br /> var str = "郵件不符合格式;";<br /> this.appendError(id, str);<br /> return false;<br /> } else {<br /> this.remove(id + idExt);<br /> return true;<br /> }<br /> } </p><p> /**<br /> * 檢查是否為數字<br /> *<br /> * @param {}<br /> * str<br /> * @return {Boolean} true：數字，false:<b>不是</b>數字;<br /> */<br /> this.isNum = function(str) {<br /> var re = /^[/d]+$/<br /> return re.test(str);<br /> } </p><p> this.isNumSpan = function(id) {<br /> var val = document.getElementById(id);<br /> if (!this.isNum(val.value)) {<br /> val.select();<br /> var str = "必須是數字;";<br /> this.appendError(id, str);<br /> return false;<br /> } else {<br /> this.remove(id + idExt);<br /> return true;<br /> }<br /> } </p><p> /**<br /> * 檢查數值是否在給定範圍以內,為空白,不做檢查<br><br /> *<br /> * @param {}<br /> * str_num<br /> * @param {}<br /> * small 應該大於或者等於的數值（此值為空白時，只檢查不能大於最大值）<br /> * @param {}<br /> * big 應該小於或者等於的數值（此值為空白時，只檢查不能小於最小值）<br /> *<br /> * @return {Boolean} <b>小於最小數值或者大於最大數值</b>數字返回false 否則返回true;<br /> */<br /> this.isRangeNum = function(str_num, small, big) {<br /> if (!this.isNum(str_num)) // 檢查是否為數字<br /> return false </p><p> if (small == "" && big == "")<br /> throw str_num + "沒有定義最大，最小值數字！"; </p><p> if (small != "") {<br /> if (str_num < small)<br /> return false;<br /> }<br /> if (big != "") {<br /> if (str_num > big)<br /> return false;<br /> }<br /> return true; </p><p> } </p><p> this.isRangeNumSpan = function(id, small, big) {<br /> var val = document.getElementById(id);<br /> if (!this.isRangeNum(val.value, small, big)) {<br /> val.select();<br /> var str = "";<br /> if (small != "") {<br /> str = "應該大於或者等於 " + small;<br /> } </p><p> if (big != "") {<br /> str += " 應該小於或者等於 " + big;<br /> }<br /> this.appendError(id, str);<br /> return false;<br /> } else {<br /> this.remove(id + idExt);<br /> return true;<br /> }<br /> } </p><p> /**<br /> * 檢查是否為合格字串(不區分大小寫)<br><br /> * 是由a-z0-9_組成的字串<br /> *<br /> * @param {}<br /> * str 檢查的字串<br /> * @param {}<br /> * idStr 游標定位的欄位ID<b>只能接收ID</b><br /> * @return {Boolean} <b>不是</b>"a-z0-9_"組成返回false,否則返回true;<br /> */<br /> this.isLicit = function(str) {<br /> var re = /^[_0-9a-zA-Z]*$/<br /> return re.test(str);<br /> } </p><p> this.isLicitSpan = function(id) {<br /> var val = document.getElementById(id);<br /> if (!this.isLicit(val.value)) {<br /> val.select();<br /> var str = "是由a-z0-9_組成的字串(不區分大小寫);";<br /> this.appendError(id, str);<br /> return false;<br /> } else {<br /> this.remove(id + idExt);<br /> return true;<br /> }<br /> } </p><p> /**<br /> * 檢查二個字串是否相等<br /> *<br /> * @param {}<br /> * str1 第一個字串<br /> * @param {}<br /> * str2 第二個字串<br /> * @return {Boolean} 字串不相等返回false,否則返回true;<br /> */<br /> this.isEquals = function(str1, str2) {<br /> return str1 == str2;<br /> } </p><p> this.isEqualsSpan = function(id, id1) {<br /> var val = document.getElementById(id);<br /> var val1 = document.getElementById(id1);<br /> if (!this.isEquals(val.value, val1.value)) {<br /> val.select();<br /> var str = "二次輸入內容必須一樣;";<br /> this.appendError(id, str);<br /> return false;<br /> } else {<br /> this.remove(id + idExt);<br /> return true;<br /> }<br /> } </p><p> /**<br /> * 檢查字串是否在給定長度範圍以內(中文字元以2個位元組計算),字元為空白,不做檢查<br><br /> *<br /> * @param {}<br /> * str 檢查的字元<br /> * @param {}<br /> * lessLen 應該大於或者等於的長度<br /> * @param {}<br /> * moreLen 應該小於或者等於的長度<br /> *<br /> * @return {Boolean} <b>小於最小長度或者大於最大長度</b>數字返回false;<br /> */<br /> this.isRange = function(str, lessLen, moreLen) {<br /> var strLen = this.length(str); </p><p> if (lessLen != "") {<br /> if (strLen < lessLen)<br /> return false;<br /> } </p><p> if (moreLen != "") {<br /> if (strLen > moreLen)<br /> return false;<br /> } </p><p> if (lessLen == "" && moreLen == "")<br /> throw "沒有定義最大最小長度!";<br /> return true;<br /> } </p><p> this.isRangeSpan = function(id, lessLen, moreLen) {<br /> var val = document.getElementById(id);<br /> if (!this.isRange(val.value, lessLen, moreLen)) {<br /> var str = "長度"; </p><p> if (lessLen != "")<br /> str += "大於或者等於 " + lessLen + ";"; </p><p> if (moreLen != "")<br /> str += " 應該小於或者等於 " + moreLen; </p><p> val.select();<br /> this.appendError(id, str);<br /> return false;<br /> } else {<br /> this.remove(id + idExt);<br /> return true;<br /> }<br /> } </p><p> /**<br /> * 檢查字串是否小於給定長度範圍(中文字元以2個位元組計算)<br><br /> *<br /> * @param {}<br /> * str 字串<br /> * @param {}<br /> * lessLen 小於或等於長度<br /> *<br /> * @return {Boolean} <b>小於給定長度</b>數字返回false;<br /> */<br /> this.isLess = function(str, lessLen) {<br /> return this.isRange(str, lessLen, "");<br /> } </p><p> this.isLessSpan = function(id, lessLen) {<br /> var val = document.getElementById(id);<br /> if (!this.isLess(val.value, lessLen)) {<br /> var str = "長度大於或者等於 " + lessLen;<br /> val.select();<br /> this.appendError(id, str);<br /> return false;<br /> } else {<br /> this.remove(id + idExt);<br /> return true;<br /> }<br /> } </p><p> /**<br /> * 檢查字串是否大於給定長度範圍(中文字元以2個位元組計算)<br><br /> *<br /> * @param {}<br /> * str 字串<br /> * @param {}<br /> * moreLen 小於或等於長度<br /> *<br /> * @return {Boolean} <b>大於給定長度</b>數字返回false;<br /> */<br /> this.isMore = function(str, moreLen) {<br /> return this.isRange(str, "", moreLen);<br /> } </p><p> this.isMoreSpan = function(id, moreLen) {<br /> var val = document.getElementById(id);<br /> if (!this.isMore(val.value, moreLen)) {<br /> var str = "長度應該小於或者等於 " + moreLen;<br /> val.select();<br /> this.appendError(id, str);<br /> return false;<br /> } else {<br /> this.remove(id + idExt);<br /> return true;<br /> }<br /> } </p><p> /**<br /> * 檢查字元不為空白<br /> *<br /> * @param {}<br /> * str<br /> * @return {Boolean} <b>字元為空白</b>返回true,否則為false;<br /> */<br /> this.isEmpty = function(str) {<br /> return str == "";<br /> } </p><p> this.isEmptySpan = function(id) {<br /> var val = document.getElementById(id);<br /> if (this.isEmpty(val.value)) {<br /> var str = "不允許為空白;";<br /> val.select();<br /> this.appendError(id, str);<br /> return false;<br /> } else {<br /> this.remove(id + idExt);<br /> return true;<br /> }<br /> }<br />}

 

//*******************************************測試頁面*************************************************/

<html><br /><head><br /><title>網頁標題</title><br /><mce:script type="text/javascript" src="test.js" mce_src="test.js"></mce:script> </p><p><mce:script type="text/javascript"><!--</p><p>function checkForm(){<br /> var isPass = true;<br /> //過濾字串<br /> if(!(checkData.isEmptySpan("filterStr") && checkData.filterStrSpan('filterStr','#$%$'))) {<br /> isPass = false;<br /> } </p><p> //檢查url<br /> if(!(checkData.isEmptySpan("isURL") && checkData.isURLSpan('isURL')))<br /> isPass = false; </p><p> //email<br /> if(!(checkData.isEmptySpan("isEmail") && checkData.isEmailSpan('isEmail')))<br /> isPass = false; </p><p> //數字<br /> if(!(checkData.isNumSpan('isNum')))<br /> isPass = false; </p><p> //數字大小<br /> if(!(checkData.isEmptySpan("isRangeNum") && checkData.isNumSpan('isRangeNum') && checkData.isRangeNumSpan('isRangeNum',10,100)))<br /> isPass = false; </p><p> //密碼 (數字,字母,底線)<br /> if(!(checkData.isLicitSpan('isLicit')))<br /> isPass = false; </p><p> //二個欄位是否相等<br /> if(!(checkData.isEmptySpan("isEquals") && checkData.isEqualsSpan('isEquals','isEquals1')))<br /> isPass = false; </p><p> //字元長度控制<br /> if(!(checkData.isRangeSpan('isRange',5,10)))<br /> isPass = false; </p><p> //字元最短控制<br /> if(!(checkData.isLessSpan('isLess',10)))<br /> isPass = false; </p><p> //字元最長控制<br /> if(!(checkData.isEmptySpan("isMore") && checkData.isMoreSpan('isMore',30)))<br /> isPass = false; </p><p> //為空白控制<br /> if(!(checkData.isEmptySpan("isEmpty")))<br /> isPass = false;<br /> return isPass;<br />}<br />// --></mce:script><br /></head><br /><body><br /><form action="index.jsp" method="post" onsubmit="return checkForm();"><br /><table><br /> <tbody><br /> <tr><br /> <td>字元過濾：<input type="text" id="filterStr" name="filterStr"></td><br /> <td>連結：<input type="text" id="isURL" name="isURL"></td><br /> </tr><br /> <tr><br /> <td>郵件：<input type="text" id="isEmail" name="isEmail"></td><br /> <td>數字：<input type="text" id="isNum" name="isNum"></td><br /> </tr><br /> <tr><br /> <td>數字範圍：<input type="text" id="isRangeNum" name="isRangeNum"></td><br /> <td>a-zA-Z0-9_<input type="text" id="isLicit" name="isLicit"></td><br /> </tr><br /> <tr><br /> <td>判斷相等：<input type="text" id="isEquals" name="isEquals"></td><br /> <td><input type="text" id="isEquals1" name="isEquals1"></td><br /> </tr><br /> <tr><br /> <td>長度控制：<input type="text" id="isRange" name="isRange"></td><br /> <td>長度大於控制：<input type="text" id="isLess" name="isLess"></td><br /> </tr><br /> <tr><br /> <td>長度小於控制：<input type="text" id="isMore" name="isMore"></td><br /> <td>是否為空白：<input type="text" id="isEmpty" name="isEmpty"></td><br /> </tr><br /> <tr><br /> <td><input type="submit" name="submit" value="提交資料"></td><br /> </tr><br /> </tbody><br /></table> </p><p></form><br /></body><br /></html>