傳統js驗證

js驗證
Java代碼 
/** 
* 數據驗證框架.增加瞭對id字段檢查出錯時,直接在對應後面添加一< 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   
    }   
   
    /** 
    * 刪除對應id元素 
    */   
    this.remove = function(id) {   
        var idObject = document.getElementById(id);   
        if (idObject != null)   
            idObject.parentNode.removeChild(idObject);   
    }   
   
    /** 
    * 在對應id後面錯誤信息 
    * 
    * @param id:需要顯示錯誤信息的id元素 
    *            str:顯示錯誤信息 
    */   
    this.appendError = function(id, str) {   
        this.remove(id + idExt);// 如果span元素存在，則先刪除此元素   
        var spanNew = document.createElement("span");// 創建span   
        spanNew.id = id + idExt;// 生成spanid   
        spanNew.style.color = "red";   
        spanNew.appendChild(document.createTextNode(str));// 給span添加內容   
        var inputId = document.getElementById(id);   
        inputId.parentNode.insertBefore(spanNew, inputId.nextSibling);// 給需要添加元素後面添加span   
    }   
   
    /** 
    * @description 過濾所有空格字符。 
    * @param str:需要去掉空間的原始字符串 
    * @return 返回已經去掉空格的字符串 
    */   
    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;   
    }   
   
    /** 
    * 過濾字符串開始部分的空格\字符串結束部分的空格\將文字中間多個相連的空格變為一個空格 
    * 
    * @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 == " ") {   
            // 檢查字符串結束部分的空格   
            retValue = retValue.substring(0, retValue.length – 1);   
            ch = retValue.substring(retValue.length – 1, retValue.length);   
        }   
        while (retValue.indexOf(" ") != -1) {   
            // 將文字中間多個相連的空格變為一個空格   
            retValue = retValue.substring(0, retValue.indexOf(" "))   
                    + retValue.substring(retValue.indexOf(" ") + 1,   
                            retValue.length);   
        }   
        return retValue;   
    }   
   
    /** 
    * 過濾字符串,指定過濾內容，如果內容為空，則默認過濾 '~!@#$%^&*()-+." 
    * 
    * @param {Object} 
    *            str 
    * @param {Object} 
    *            filterStr 
    * 
    * @return 包含過濾內容，返回True,否則返回false; 
    */   
    this.filterStr = function(str, filterString) {   
        filterString = filterString == "" ? "'~!@#$%^&*()-+.\"" : filterString   
        var ch;   
        var i;   
        var temp;   
        var error = false;// 當包含非法字符時，返回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;   
        }   
    }   
   
    /** 
    * 檢查是否為網址 
    * 
    * @param {} 
    *            str_url 
    * @return {Boolean} true：是網址，false:<b>不是</b>網址; 
    */   
    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;   
        }   
    }   
   
    /** 
    * 檢查是否為數字 
    * 
    * @param {} 
    *            str 
    * @return {Boolean} true：數字，false:<b>不是</b>數字; 
    */   
    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 = "必須是數字;";   
            this.appendError(id, str);   
            return false;   
        } else {   
            this.remove(id + idExt);   
            return true;   
        }   
    }   
   
    /** 
    * 檢查數值是否在給定范圍以內,為空,不做檢查<br> 
    * 
    * @param {} 
    *            str_num 
    * @param {} 
    *            small 應該大於或者等於的數值（此值為空時，隻檢查不能大於最大值） 
    * @param {} 
    *            big 應該小於或者等於的數值（此值為空時，隻檢查不能小於最小值） 
    * 
    * @return {Boolean} <b>小於最小數值或者大於最大數值</b>數字返回false 否則返回true; 
    */   
    this.isRangeNum = function(str_num, small, big) {   
        if (!this.isNum(str_num)) // 檢查是否為數字   
            return false   
   
        if (small == "" && big == "")   
            throw str_num + "沒有定義最大，最小值數字！";   
   
        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 = "應該大於或者等於 " + small;   
            }   
   
            if (big != "") {   
                str += " 應該小於或者等於 " + big;   
            }   
            this.appendError(id, str);   
            return false;   
        } else {   
            this.remove(id + idExt);   
            return true;   
        }   
    }   
   
    /** 
    * 檢查是否為合格字符串(不區分大小寫)<br> 
    * 是由a-z0-9_組成的字符串 
    * 
    * @param {} 
    *            str 檢查的字符串 
    * @param {} 
    *            idStr 光標定位的字段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_組成的字符串(不區分大小寫);";   
            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 = "二次輸入內容必須一樣;";   
            this.appendError(id, str);   
            return false;   
        } else {   
            this.remove(id + idExt);   
            return true;   
        }   
    }   
   
    /** 
    * 檢查字符串是否在給定長度范圍以內(中文字符以2個字節計算),字符為空,不做檢查<br> 
    * 
    * @param {} 
    *            str 檢查的字符 
    * @param {} 
    *            lessLen 應該大於或者等於的長度 
    * @param {} 
    *            moreLen 應該小於或者等於的長度 
    * 
    * @return {Boolean} <b>小於最小長度或者大於最大長度</b>數字返回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 += " 應該小於或者等於 " + moreLen;   
   
            val.select();   
            this.appendError(id, str);   
            return false;   
        } else {   
            this.remove(id + idExt);   
            return true;   
        }   
    }   
   
    /** 
    * 檢查字符串是否小於給定長度范圍(中文字符以2個字節計算)<br> 
    * 
    * @param {} 
    *            str 字符串 
    * @param {} 
    *            lessLen 小於或等於長度 
    * 
    * @return {Boolean} <b>小於給定長度</b>數字返回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個字節計算)<br> 
    * 
    * @param {} 
    *            str 字符串 
    * @param {} 
    *            moreLen 小於或等於長度 
    * 
    * @return {Boolean} <b>大於給定長度</b>數字返回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 = "長度應該小於或者等於 " + 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;   
        }   
    }   
}   


測試頁面
Java代碼 
<html>   
<head>   
<title>網頁標題</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;   
     
   //數字   
    if(!(checkData.isNumSpan('isNum')))   
        isPass = false;   
      
    //數字大小   
    if(!(checkData.isEmptySpan("isRangeNum") && checkData.isNumSpan('isRangeNum') && checkData.isRangeNumSpan('isRangeNum',10,100)))   
       isPass = false;   
          
    //密碼 (數字,字母,下劃線)       
    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>數字：<input type="text" id="isNum" name="isNum"></td>   
        </tr>   
        <tr>   
            <td>數字范圍：<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="提交數據"></td>   
        </tr>   
    </tbody>   
</table>   
   
</form>   
</body>   
</html>   

作者“小菜 …”
 

Related posts:

  1. javascript異步編程—-用jscex畫圓
  2. JS基礎之undefined與null的區別
  3. Js跨瀏覽器的dom事件封裝
  4. JavaScript實現頁面滾動圖片加載
  5. JS畫線，雖然很原始，但是兼容所有瀏覽器
  6. JavaScript事件冒泡簡介及應用
  7. REMOTE_ADDR HTTP_CLIENT_IP HTTP_X_FORWARDED_FOR – Javascript教程_JS教程_技術文章 – 程式設計聯盟
  8. jQuery cookie插件詳細用法 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *