原生JS 表單提交驗證器

一、前言

　　最近在開發一個新項目，需要做登陸等一系列的表單提交頁面。在經過“縝密”的討論后,我們決定 不用外部流行的框架，如bootstrap，由於我負責的模塊

僅僅是其中的一部分，因此少數服從多數，無奈只能拋棄bootstrap等提供的布局，樣式以及驗證等一些列如此方便的組件，（他們拒絕使用的原因也令人發省）。

　　那么問題就來了。

二、設計理念

　　我們都知道，在拋開外部框架，僅僅用JS+css+html 去開發一個頁面，是很復雜的，尤其是在沒有美工，前台的情況下。其實bootstrap 在一定程度上 為公司節省了 美工 前台的開支...

　　廢話少說，1天搞定了頁面之后，開始為表單添加JS驗證。用原生JS寫驗證是一件很吃力的事情，就算把各種驗證方式，正則表達式，為空判斷，長度判斷，復雜各類字符組合判斷等，集中到一個文件當中，依然可能無法排除每個頁面中各種的條件語句，萬一一個表單 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地址的正則表達式
    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;
}

//正則表達式驗證器
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();
    });
    });        

　　效果

 

　　

　　其中樣式 是我自己寫的，當input（包括下拉框） 值 發生變化 則進行驗證（可以調整驗證器，改變觸發形式），提交觸發驗證，input獲得焦點時

如果之前驗證不通過，則彈出提示框。

四、總結

　　很簡單，一下午就能看懂 並且調整自如，由於本人懶，沒有展示CSS相關的代碼文件，如有興趣，可以吧這些東西提取出來或者做整合

做成組件，做成像日期控件那樣的，方便移植和運用。

　　

tip：（提示框等樣式如果需要可以留言）