原生JS 表單提交驗證器

原生JS 表單提交驗證器
一、前言 　　最近在開發一個新項目，需要做登陸等一系列的表單提交頁面。在經過“縝密”的討論後,我們決定 不用外部流行的架構，如bootstrap，由於我負責的模組 僅僅是其中的一部分，因此少數服從多數，無奈只能拋棄bootstrap等提供的布局，樣式以及驗證等一些列如此方便的組件，（他們拒絕使用的原因也令人發省）。 　　那麼問題就來了。 二、設計理念 　　我們都知道，在拋開外部架構，僅僅用JS+css+html 去開發一個頁面，是很複雜的，尤其是在沒有美工，前台的情況下。其實bootstrap 在一定程度上 為公司節省了 美工 前台的開支... 　　廢話少說，1天搞定了頁面之後，開始為表單添加JS驗證。用原生JS寫驗證是一件很吃力的事情，就算把各種驗證方式，Regex，為空白判斷，長度判斷，複雜各類字元組合判斷等，集中到一個檔案當中，依然可能無法排除每個頁面中各種的條件陳述式，萬一一個表單 N個input呢？ 　　而jquery validate組件 等  是怎樣實現的呢，其實現實中表示，只要會用就行了  不用瞭解其工作原理。就像你只要會開汽車 就足夠了，不用去瞭解車是怎麼實現的，那麼當你有一天會開飛機，那麼你就登上了人生的“巔峰”。 三、自訂驗證器 　　廢話不多說 直接上代碼 　　

/** * Created by sicd 2015-5-29. */$(function(){});var suc_img='<i class="error-img"></i>';var err_tag='<span class="error-msg" id="error-msg" style="display: block;"></span>';function isIP(strIP) {    if (isNull(strIP)) return false;    var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的Regex    if(re.test(strIP))    {        if( RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256) return true;    }    return false;}/* 用途：檢查輸入字串是否為空白或者全部都是空格 輸入：str 返回： 如果全是空返回true,否則返回false */function isNull( str ){    if ( str == "" ) return true;    var regu = "^[ ]+$";    var re = new RegExp(regu);    return re.test(str);}/* 用途：檢查輸入對象的值是否符合整數格式 輸入：str 輸入的字串 返回：如果通過驗證返回true,否則返回false */function isInteger( str ){    var regu = /^[-]{0,1}[0-9]{1,}$/;    return regu.test(str);}/* 用途：檢查輸入手機號碼是否正確 輸入： s：字串 返回： 如果通過驗證返回true,否則返回false */function checkMobile( s ){    var regu =/^[1][3][0-9]{9}$/;    var re = new RegExp(regu);    if (re.test(s)) {        return true;    }else{        return false;    }}/* 用途：檢查輸入字串是否符合正整數格式 輸入： s：字串 返回： 如果通過驗證返回true,否則返回false */function isNumber( s ){    var regu = "^[0-9]+$";    var re = new RegExp(regu);    if (s.search(re) != -1) {        return true;    } else {        return false;    }}/* 用途：檢查輸入字串是否是帶小數的數字格式,可以是負數 輸入： s：字串 返回： 如果通過驗證返回true,否則返回false */function isDecimal( str ){    if(isInteger(str)) return true;    var re = /^[-]{0,1}(\d+)[\.]+(\d+)$/;    if (re.test(str)) {        if(RegExp.$1==0&&RegExp.$2==0) return false;        return true;    } else {        return false;    }}/* 用途：檢查輸入對象的值是否符合連接埠號碼格式 輸入：str 輸入的字串 返回：如果通過驗證返回true,否則返回false */function isPort( str ){    return (isNumber(str) && str<65536);}/* 用途：檢查輸入對象的值是否符合E-Mail格式 輸入：str 輸入的字串 返回：如果通過驗證返回true,否則返回false */function isEmail( str ){    var myReg = /^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;    if(myReg.test(str)) return true;    return false;}/* 用途：檢查輸入字串是否符合金額格式 格式定義為帶小數的正數，小數點後最多三位 輸入： s：字串 返回： 如果通過驗證返回true,否則返回false */function isMoney( s ){    var regu = "^[0-9]+[\.][0-9]{0,3}$";    var re = new RegExp(regu);    if (re.test(s)) {        return true;    } else {        return false;    }}/* 用途：檢查輸入字串是否只由英文字母和數字和底線組成 輸入： s：字串 返回： 如果通過驗證返回true,否則返回false */function isNumberOr_Letter( s ){//判斷是否是數字或字母    var regu = "^[0-9a-zA-Z\_]+$";    var re = new RegExp(regu);    if (re.test(s)) {        return true;    }else{        return false;    }}/* 用途：檢查輸入字串是否只由英文字母和數字組成 輸入： s：字串 返回： 如果通過驗證返回true,否則返回false */function isNumberOrLetter( s ){//判斷是否是數字或字母    var regu = "^[0-9a-zA-Z]+$";    var re = new RegExp(regu);    if (re.test(s)) {        return true;    }else{        return false;    }}/* 用途：檢查輸入字串是否只由漢字、字母、數字組成 輸入： value：字串 返回： 如果通過驗證返回true,否則返回false */function isChinaOrNumbOrLett( s ){//判斷是否是漢字、字母、數字組成    var regu = "^[0-9a-zA-Z\u4e00-\u9fa5]+$";    var re = new RegExp(regu);    if (re.test(s)) {        return true;    }else{        return false;    }}/* 用途：判斷是否是日期 輸入：date：日期；fmt：日期格式 返回：如果通過驗證返回true,否則返回false */function isDate( date, fmt ) {    if (fmt==null) fmt="yyyyMMdd";    var yIndex = fmt.indexOf("yyyy");    if(yIndex==-1) return false;    var year = date.substring(yIndex,yIndex+4);    var mIndex = fmt.indexOf("MM");    if(mIndex==-1) return false;    var month = date.substring(mIndex,mIndex+2);    var dIndex = fmt.indexOf("dd");    if(dIndex==-1) return false;    var day = date.substring(dIndex,dIndex+2);    if(!isNumber(year)||year>"2100" || year< "1900") return false;    if(!isNumber(month)||month>"12" || month< "01") return false;    if(day>getMaxDay(year,month) || day< "01") return false;    return true;}function getMaxDay(year,month) {    if(month==4||month==6||month==9||month==11)        return "30";    if(month==2)        if(year%4==0&&year%100!=0 || year%400==0)            return "29";        else            return "28";    return "31";}/* 用途：字元1是否以字串2結束 輸入：str1：字串；str2：被包含的字串 返回：如果通過驗證返回true,否則返回false */function isLastMatch(str1,str2){    var index = str1.lastIndexOf(str2);    if(str1.length==index+str2.length) return true;    return false;}/* 用途：字元1是否以字串2開始 輸入：str1：字串；str2：被包含的字串 返回：如果通過驗證返回true,否則返回false */function isFirstMatch(str1,str2){    var index = str1.indexOf(str2);    if(index==0) return true;    return false;}/* 用途：字元1是包含字串2 輸入：str1：字串；str2：被包含的字串 返回：如果通過驗證返回true,否則返回false */function isMatch(str1,str2){    var index = str1.indexOf(str2);    if(index==-1) return false;    return true;}/* 用途：檢查輸入的起止日期是否正確，規則為兩個日期的格式正確， 且結束如期>=起始日期 輸入： startDate：起始日期，字串 endDate：結束如期，字串 返回： 如果通過驗證返回true,否則返回false */function checkTwoDate( startDate,endDate ) {    if( !isDate(startDate) ) {        alert("起始日期不正確!");        return false;    } else if( !isDate(endDate) ) {        alert("終止日期不正確!");        return false;    } else if( startDate > endDate ) {        alert("起始日期不能大於終止日期!");        return false;    }    return true;}/* 用途：檢查輸入的Email信箱格式是否正確 輸入： strEmail：字串 返回： 如果通過驗證返回true,否則返回false */function checkEmail(strEmail) {//var emailReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/;    var emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;    if( emailReg.test(strEmail) ){        return true;    }else{        alert("您輸入的Email地址格式不正確！");        return false;    }}/* 用途：檢查輸入的電話號碼格式是否正確 輸入： strPhone：字串 返回： 如果通過驗證返回true,否則返回false */function checkPhone( strPhone ) {    var phoneRegWithArea = /^[0][1-9]{2,3}-[0-9]{5,10}$/;    var phoneRegNoArea = /^[1-9]{1}[0-9]{5,8}$/;    var prompt = "您輸入的電話號碼不正確!"    if( strPhone.length > 9 ) {        if( phoneRegWithArea.test(strPhone) ){            return true;        }else{            alert( prompt );            return false;        }    }else{        if( phoneRegNoArea.test( strPhone ) ){            return true;        }else{            alert( prompt );            return false;        }    }}/* 用途：檢查複選框被選中的數目 輸入： checkboxID：字串 返回： 返回該複選框中被選中的數目 */function checkSelect( checkboxID ) {    var check = 0;    var i=0;    if( document.all(checkboxID).length > 0 ) {        for(  i=0; i<document.all(checkboxID).length; i++ ) {            if( document.all(checkboxID).item( i ).checked  ) {                check += 1;            }        }    }else{        if( document.all(checkboxID).checked )            check = 1;    }    return check;}/* * * 檢查是否是64的倍數 */function Is64Multi(num){    if(num % 64 == 0){        return true;    }else{        return false;    }}function getTotalBytes(varField) {    if(varField == null)        return -1;    var totalCount = 0;    for (i = 0; i< varField.value.length; i++) {        if (varField.value.charCodeAt(i) > 127)            totalCount += 2;        else            totalCount++ ;    }    return totalCount;}function getFirstSelectedValue( checkboxID ){    var value = null;    var i=0;    if( document.all(checkboxID).length > 0 ){        for(  i=0; i<document.all(checkboxID).length; i++ ){            if( document.all(checkboxID).item( i ).checked ){                value = document.all(checkboxID).item(i).value;                break;            }        }    } else {        if( document.all(checkboxID).checked )            value = document.all(checkboxID).value;    }    return value;}function getFirstSelectedIndex( checkboxID ){    var value = -2;    var i=0;    if( document.all(checkboxID).length > 0 ){        for(  i=0; i<document.all(checkboxID).length; i++ ) {            if( document.all(checkboxID).item( i ).checked  ) {                value = i;                break;            }        }    } else {        if( document.all(checkboxID).checked )            value = -1;    }    return value;}function selectAll( checkboxID,status ){    if( document.all(checkboxID) == null)        return;    if( document.all(checkboxID).length > 0 ){        for(  i=0; i<document.all(checkboxID).length; i++ ){            document.all(checkboxID).item( i ).checked = status;        }    } else {        document.all(checkboxID).checked = status;    }}function selectInverse( checkboxID ) {    if( document.all(checkboxID) == null)        return;    if( document.all(checkboxID).length > 0 ) {        for(  i=0; i<document.all(checkboxID).length; i++ ) {            document.all(checkboxID).item( i ).checked = !document.all(checkboxID).item( i ).checked;        }    } else {        document.all(checkboxID).checked = !document.all(checkboxID).checked;    }}function checkDate( value ) {    if(value=='') return true;    if(value.length!=8 || !isNumber(value)) return false;    var year = value.substring(0,4);    if(year>"2100" || year< "1900")        return false;    var month = value.substring(4,6);    if(month>"12" || month< "01") return false;    var day = value.substring(6,8);    if(day>getMaxDay(year,month) || day< "01") return false;    return true;}/* 用途：檢查輸入的起止日期是否正確，規則為兩個日期的格式正確或都為空白 且結束日期>=起始日期 輸入： startDate：起始日期，字串 endDate：  結束日期，字串 返回： 如果通過驗證返回true,否則返回false */function checkPeriod( startDate,endDate ) {    if( !checkDate(startDate) ) {        alert("起始日期不正確!");        return false;    } else if( !checkDate(endDate) ) {        alert("終止日期不正確!");        return false;    } else if( startDate > endDate ) {        alert("起始日期不能大於終止日期!");        return false;    }    return true;}/* 用途：檢查證券代碼是否正確 輸入： secCode:證券代碼 返回： 如果通過驗證返回true,否則返回false */function checkSecCode( secCode ) {    if( secCode.length !=6 ){        alert("證券代碼長度應該為6位");        return false;    }    if(!isNumber( secCode ) ){        alert("證券代碼只能包含數字");        return false;    }    return true;}/**************************************************** function:cTrim(sInputString,iType) description:字串去空格的函數 parameters:iType：1=去掉字串左邊的空格 2=去掉字串左邊的空格 0=去掉字串左邊和右邊的空格 return value:去掉空格的字串 ****************************************************/function cTrim(sInputString,iType) {    var sTmpStr = ' ';    var i = -1;    if (iType == 0 || iType == 1) {        while (sTmpStr == ' ') {            ++i;            sTmpStr = sInputString.substr(i, 1);        }        sInputString = sInputString.substring(i);    }    if (iType == 0 || iType == 2) {        sTmpStr = ' ';        i = sInputString.length;        while (sTmpStr == ' ') {            --i;            sTmpStr = sInputString.substr(i, 1);        }        sInputString = sInputString.substring(0, i + 1);    }    return sInputString;}function checkLength (str, lessLen, moreLen) {    var strLen = this.length(str);    if (lessLen != "") {        if (strLen < lessLen)            return false;    }}/*描述對欄位驗證的類*/function Field(params){    this.field_id=params.fid;     //要驗證的欄位的ID    this.validators=params.val;   //驗證器對象數組    this.on_suc=params.suc;       //當驗證成功的時候執行的事件    this.on_error=params.err;     //當驗證失敗的時候執行的事件    this.checked=false;           //是否通過驗證}/*擴充這個類，加入validate方法*/Field.prototype.validate=function(){    //迴圈每一個驗證器    for ( var item=0;item<this.validators.length;item++ ){    /*for(item in this.valid{ators)*/        //給驗證器附加驗證成功和驗證失敗的回調事件        this.set_callback(this.validators[item]);        //執行驗證器上的Validate方法，驗證是否符合規則        if(this.validators[item]){        if(!this.validators[item].validate(this.data())){            break; //一旦任意一個驗證器失敗就停止        }        }    }};//擷取欄位值的方法Field.prototype.data=function(){    return document.getElementById(this.field_id).value;};//擷取該欄位的對象Field.prototype.obj=function(){    return document.getElementById(this.field_id);}/*設定驗證器回呼函數的方法set_callback如下：*/Field.prototype.set_callback=function(val){    var self=this;              //換一個名字來儲存this，不然函數的閉包中會覆蓋這個名字    if(val){    val.on_suc=function(){      //驗證成功執行的方法        self.checked=true;      //將欄位設定為驗證成功        /*self.on_suc(val.tips);  //執行驗證成功的事件*/        //不執行回調        $(self.obj()).attr('class','validate-suc');        $(self.obj()).nextAll('.error-img').show();        $(self.obj()).nextAll('.error-msg').hide().text(val.tips);    };    val.on_error=function(){    //驗證失敗的時候執行的方法        self.checked=false;     //欄位設定為驗證失敗        /*self.on_error(val.tips);//執行驗證失敗的事件*/        //不執行回調        $(self.obj()).attr('class','validate-err');        $(self.obj()).nextAll('.error-img').hide();        $('.error-msg').hide();        $(self.obj()).nextAll('.error-msg').css('display','inline').text(val.tips);    }    }};/*驗證器*///非空驗證function Null_val(tip){    this.tips = tip;    this.on_suc=null;    this.on_error=null;}Null_val.prototype.validate=function(fd){    if(isNull(fd)){        this.on_error();        return false;    }    this.on_suc();    return true;}//長度驗證function Len_val(min_l,max_l,tip){    this.min_v=min_l;    this.max_v=max_l;    this.tips=tip;    this.on_suc=null;    this.on_error=null;}Len_val.prototype.validate=function(fd){    if(fd.length<this.min_v||fd.length>this.max_v){        this.on_error();        return false;    }    this.on_suc();    return true;}//正整數數字驗證function PosiInteg_val(tip){    this.tips=tip;    this.on_suc=null;    this.on_error=null;}PosiInteg_val.prototype.validate = function(fd){    if(!isNumber(fd)){        this.on_error();        return false;    }    this.on_suc();    return true;}//是否是64的倍數function Is64Multiple(tip){    this.tips=tip;    this.on_suc=null;    this.on_error=null;}Is64Multiple.prototype.validate = function(fd){    if(!Is64Multi(fd)){        this.on_error();        return false;    }    this.on_suc();    return true;}//select是否選擇驗證Select_isSelected.prototype.validate=function(fd){    if(fd == -1){        this.on_error();        return false;    }    this.on_suc();    return true;}function Select_isSelected(tip){    this.tips=tip;    this.on_suc=null;    this.on_error=null;}//Regex驗證器function Exp_val(expresion,tip){    this.exps=expresion;    this.tips=tip;    this.on_suc=null;    this.on_error=null;}Exp_val.prototype.validate=function(fd){    if(!fd){        this.on_suc();        return true;    }    if(this.exps.test(fd)){        this.on_suc();        return true;    }else{        this.on_error();        return false;    }}//遠程驗證器function Remote_val(url,tip){    this.p_url=url;    this.tips=tip;    this.on_suc=null;    this.on_error=null;}Remote_val.prototype.validate=function(fd){    var self=this;    $.post(this.p_url,{f:fd},        function(data){            if(data.rs){                self.on_suc();                return;            }else{                self.on_error();            }        },"json"    );    return false;}//自訂函數驗證器function Man_val(tip,func){    this.tips=tip;    this.val_func=func;    this.on_suc=null;    this.on_error=null;}Man_val.prototype.validate=function(fd){    if(this.val_func(fd)){        this.on_suc();    }else{        this.on_error();    }}function  FieldForm(items){    this.f_item=items;                             //把欄位驗證對象數組複製給屬性    for(idx=0;idx<this.f_item.length;idx++){       //迴圈數組        var fc=this.get_check(this.f_item[idx]);   //擷取封裝後的回調事件        $("#"+this.f_item[idx].field_id).change(fc); //綁定到控制項上    }};//綁定驗證事件的處理器，為了避開迴圈對閉包的影響FieldForm.prototype.get_check=function(v){    return function(){   //返回封裝了調用validate方法的事件        v.validate();    }}/*綁定按鈕click*/FieldForm.prototype.set_submit=function(bid,bind){    var self=this;    $("#"+bid).click(        function(){            if(self.validate()){                bind();            }        }    );}/*這裡提到了一個FieldForm的validate方法*/FieldForm.prototype.validate=function(){    for(idx in this.f_item){             //迴圈每一個驗證器        this.f_item[idx].validate();     //再檢測一遍        if(!this.f_item[idx].checked){            return false;                //如果錯誤就返回失敗，阻止提交        }    }    return true;                         //一個都沒錯就返回成功執行提交}//綁定輸入框foucs事件 檢測$(function(){    $('.theme-normal input').bind('click', function() {        if($(this).hasClass('validate-err')){            $('.error-msg').hide();            $(this).nextAll('.error-msg').css('display','inline');        }    });});

 

　　原理就不多說了，或多或少都有注釋，結構就是很簡單，最上面一部分是驗證方法集合，本人偷懶 直接寫在一個檔案裡，中間部分就是驗證器，關於事件觸發，回調，定義等， 稍微花點時間就能夠看懂。當然 本驗證器 還有很多最佳化的地方，可以通過調整，改變成符合自己的專用驗證器。 　　下面是調用，或者說是賦予標籤 驗證器： 　　 

var form;    $(function() {        //表單驗證        var uf = new FieldForm([        new Field({fid : "captcha",val : [ new Null_val("驗證碼為必填項,請輸入")]}),        new Field({fid : "username",val : [ new Null_val("使用者名稱為必填項,請輸入"),new Len_val(1,8,"使用者名稱長度不能超過8位，請重新輸入！")]}),        new Field({fid : "password",val : [ new Null_val("密碼為必填項,請輸入"),new Len_val(1,32,"密碼長度不能超過32位，請重新輸入！")]})]);    uf.set_submit("subBtn", function(form) {        $('#subBtn').parents('form').submit();    });    });