第一百五十四節，封裝庫--JavaScript，表單驗證--提交驗證

封裝庫--JavaScript，表單驗證--提交驗證

將表單的全部必填項，作一個判斷函數，填寫正確時返回布爾值

最後在提交時，判斷每一項是否正確，所有正確才能夠 提交

 

html

<div id="reg">
    <h2 class="tuo"><img src="img/close.png" alt="" class="close" />會員註冊</h2>
    <form name="reg">
        <dl>
            <dd>用 戶 名： <input type="text" name="user" class="text"/>
                <span class="info info_user">請輸入用戶名，4~20位，由字母、數字和下劃線組成！</span>
                <span class="error error_user">輸入不合法，請從新輸入！</span>
                <span class="succ succ_user">可用</span>
            </dd>
            <dd>密　　碼： <input type="password" name="pass" class="text"/>
                <span class="info info_pass">
                    <p>安全級別：<strong class="s s1">■</strong><strong class="s s2">■</strong><strong
                            class="s s3">■</strong> <strong class="s s4" style="font-weight:normal;"></strong></p>
                    <p><strong class="q1" style="font-weight:normal;">○</strong> 6-20 個字符</p>
                    <p><strong class="q2" style="font-weight:normal;">○</strong> 只能包含大小寫字母、數字和非空格字符</p>
                    <p><strong class="q3" style="font-weight:normal;">○</strong> 大、小寫字母、數字、非空字符，2種以上</p>
                </span>
                <span class="error error_pass">輸入不合法，請從新輸入！</span>
                <span class="succ succ_pass">可用</span>
            </dd>
            <dd>密碼確認： <input type="password" name="notpass" class="text"/>
                <span class="info info_notpass">請再一次輸入密碼！</span>
                <span class="error error_notpass">密碼不一致，請從新輸入！</span>
                <span class="succ succ_notpass">可用</span>
            </dd>
            <dd><span style="vertical-align:-2px">提　　問：</span> <select name="ques">
                <option value="0">- - - - 請選擇 - - - -</option>
                <option value="1">- - 您最喜歡吃的菜</option>
                <option value="2">- - 您的狗狗的名字</option>
                <option value="3">- - 您的出生地</option>
                <option value="4">- - 您最喜歡的明星</option>
            </select></dd>
            <dd>回　　答： <input type="text" name="ans" class="text"/>
                <span class="info info_ans">請輸入回答，2~32位！</span>
                <span class="error error_ans">回答不合法，請從新輸入！</span>
                <span class="succ succ_ans">可用</span>
            </dd>
            <dd>電子郵件： <input type="text" name="email" class="text" autocomplete="off"/>
                <span class="info info_email">請輸入電子郵件！</span>
                <span class="error error_email">郵件不合法，請從新輸入！</span>
                <span class="succ succ_email">可用</span>
                <ul class="all_email">
                    <li><span></span>@qq.com</li>
                    <li><span></span>@163.com</li>
                    <li><span></span>@sohu.com</li>
                    <li><span></span>@sina.com.cn</li>
                    <li><span></span>@gmail.com</li>
                </ul>
            </dd>
            <dd class="birthday"><span style="vertical-align:-2px">生　　日：</span> <select name="year">
                <option value="0">- 請選擇 -</option>
            </select> 年
                <select name="month">
                    <option value="0">- 請選擇 -</option>
                </select> 月
                <select name="day">
                    <option value="0">- 請選擇 -</option>
                </select> 日
            </dd>
            <dd style="height:105px;"><span style="vertical-align:85px">備　　注：</span> <textarea name="ps"></textarea>
            </dd>
            <dd class="tsh1">還能夠輸入<strong class="unm">10</strong>字</dd>
            <dd class="tsh2">已超過<strong class="unm2"></strong>字,<span>清尾</span></dd>
            <dd><input type="button" class="submit" name="sub"/></dd>
        </dl>
    </form>
</div>

css

/*註冊提示*/
/*用戶名提示*/
#reg dl dd span.info, #reg dl dd span.error, #reg dl dd span.succ {
    display:block;
    font-size:12px;
    color:#333;
    width:165px;
    height:32px;
    line-height:32px;
    padding:0 0 0 35px;
    position:absolute;
    letter-spacing:1px;
    display:none;
}
#reg dl dd span.info {
    background:url(img/reg_info.png) no-repeat;
}
#reg dl dd span.error {
    background:url(img/reg_error.png) no-repeat;
}
#reg dl dd span.succ {
    height:14px;
    line-height:14px;
    background:url(img/reg_succ.png) no-repeat;
    padding:0 0 0 20px;
    color:green;
}
/*輸入*/
#reg dl dd span.info_user {
    height:43px;
    line-height:18px;
    padding-top:7px;
    background:url(img/reg_info2.png) no-repeat;
    top:60px;
    left:310px;
    /*display:block;*/
}
/*錯誤*/
#reg dl dd span.error_user {
    top:60px;
    left:310px;
    /*display:block;*/
}
/*可用*/
#reg dl dd span.succ_user {
    top:70px;
    left:315px;
    /*display:block;*/
}

/*密碼驗證*/
#reg dl dd span.info_pass {
    width:244px;
    height:102px;
    padding:4px 0 0 16px;
    background:url(img/reg_info3.png) no-repeat;
    top:60px;
    left:310px;
    /*display:block;*/
    letter-spacing:0;
}
#reg dl dd span.info_pass p {
    height:25px;
    line-height:25px;
    color:#666;
}
#reg dl dd span.info_pass p strong.s {
    color:#ccc;
}
#reg dl dd span.error_pass {
    top:43px;
    left:295px;
}
#reg dl dd span.succ_pass {
    top:52px;
    left:295px;
}
/*錯誤*/
#reg dl dd span.error_pass {
    top:110px;
    left:310px;
    /*display:block;*/
}
/*可用*/
#reg dl dd span.succ_pass {
    top:110px;
    left:315px;
    /*display:block;*/
}
#reg .info_pass strong{
    font-size: 25px;
}

/*密碼確認*/
#reg dl dd span.info_notpass{
    height:43px;
    line-height:18px;
    padding-top:7px;
    background:url(img/reg_info2.png) no-repeat;
    top:140px;
    left:310px;
    /*display:block;*/
}
/*錯誤*/
#reg dl dd span.error_notpass {
    top:140px;
    left:310px;
    /*display:block;*/
}
/*可用*/
#reg dl dd span.succ_notpass {
    top:150px;
    left:315px;
    /*display:block;*/
}

/*回答*/
#reg dl dd span.info_ans{
    height:43px;
    line-height:18px;
    padding-top:7px;
    background:url(img/reg_info2.png) no-repeat;
    top:220px;
    left:310px;
    /*display:block;*/
}
/*錯誤*/
#reg dl dd span.error_ans {
    top:220px;
    left:310px;
    /*display:block;*/
}
/*可用*/
#reg dl dd span.succ_ans {
    top:220px;
    left:315px;
    /*display:block;*/
}

/*電子郵件*/
#reg dl dd span.info_email{
    height:43px;
    line-height:18px;
    padding-top:7px;
    background:url(img/reg_info2.png) no-repeat;
    top:255px;
    left:310px;
    /*display:block;*/
}
/*錯誤*/
#reg dl dd span.error_email {
    top:255px;
    left:310px;
    /*display:block;*/
}
/*可用*/
#reg dl dd span.succ_email {
    top:275px;
    left:315px;
    /*display:block;*/
}
#reg dl dd ul.all_email {
    width:180px;
    height:130px;
    background:#fff;
    padding:5px 10px;
    position:absolute;
    top:292px;
    left:104px;
    border:1px solid #ccc;
    display:none;
}
#reg dl dd ul.all_email li {
    height:25px;
    line-height:25px;
    border-bottom:1px solid #e5edf2;
    padding:0 5px;
    cursor:pointer;
}

/*備註提示*/
#reg dl dd.tsh1{
    padding:0 0 0 320px;
    display: block;
}

#reg dl dd.tsh2{
    padding:0 0 0 320px;
    display: none;
}
#reg dl dd.tsh2 span{
    color: #1227ff;
    cursor:pointer;
}

/*提交*/
#reg dl dd input.submit{
    margin-left:150px;
    background-color: #19ff1d;
}

前臺js

// 表單驗證
    $('form').sh_jd().reset();
    //驗證用戶名
    $('form').hq_form_name('user').yuan_su_shi_jian('focus', function () {                 //給用戶名設置彙集光標事件
        $('#reg .info_user').xian_shi();                                                    //當彙集光標時顯示輸入提示
        $('#reg .error_user').yin_cang();
        $('#reg .succ_user').yin_cang();
    }).yuan_su_shi_jian('blur', function () {                                              //給用戶名設置光標離開事件

        if (trim($(this).hq_value()) == ''){                                               //當光標離開時判斷，輸入框是否爲空
            $('#reg .info_user').yin_cang();                                                //若是輸入框爲空，隱藏輸入提示
        }else if (!pd_user()){                   //若是輸入的信息不符合提示要求
            $('#reg .error_user').xian_shi();                                               //顯示錯誤提示
            $('#reg .info_user').yin_cang();
            $('#reg .succ_user').yin_cang();
        }else{
            $('#reg .succ_user').xian_shi();
            $('#reg .info_user').yin_cang();
            $('#reg .error_user').yin_cang();
        }
    });
    function pd_user() { //最終判斷
        if (/[a-zA-Z0-9_]{4,20}/.test(trim($('form').hq_form_name('user').hq_value())))return true;
    }


    //驗證密碼
    $('form').hq_form_name('pass').yuan_su_shi_jian('focus', function () {          //獲取密碼框，添加彙集光標事件
        $('#reg .info_pass').xian_shi();                                            //彙集光標時顯示提示
        $('#reg .error_pass').yin_cang();
        $('#reg .succ_pass').yin_cang();
    }).yuan_su_shi_jian('blur', function () {                                       //光標離開事件
        if (trim($(this).hq_value()) == '') {
            $('#reg .info_pass').yin_cang();
        } else {
            if (qiang_yanzh()) {
                $('#reg .succ_pass').xian_shi();
                $('#reg .info_pass').yin_cang();
                $('#reg .error_pass').yin_cang();
            } else {
                $('#reg .succ_pass').yin_cang();
                $('#reg .info_pass').yin_cang();
                $('#reg .error_pass').xian_shi();
            }
        }
    });
    //密碼強度驗證
    $('form').hq_form_name('pass').yuan_su_shi_jian('keyup',function () {           //按下鍵盤鍵放開時事件
        qiang_yanzh();
    });
    function qiang_yanzh() {
        var neirong = trim($('form').hq_form_name('pass').hq_value());                                     //獲取輸入的字符
        var chuang = neirong.length;                                                //獲取輸入的字符長度
        var fuza = 0;                                                               //計數器，同級密碼的複雜性
        //第一個必須條件驗證6至20位之間
        if (chuang >= 6 && chuang <= 20) {
            $('#reg .info_pass .q1').wen_ben('●').c_css('color', '#008000');
        } else {
            $('#reg .info_pass .q1').wen_ben('○').c_css('color', '#666');
        }
        //第二個必須條件大小寫字母、數字和非空格字符，任意一個便可知足
        if (chuang > 0 && !/\s/.test(neirong)) {
            $('#reg .info_pass .q2').wen_ben('●').c_css('color', '#008000');
        } else {
            $('#reg .info_pass .q2').wen_ben('○').c_css('color', '#666');
        }
        //第三個必須條件大、小寫字母、數字、非空字符，2種以上
        if (/[0-9]/.test(neirong)) {         //判斷是否輸入了數字
            fuza++;
        }
        if (/[a-z]/.test(neirong)) {         //判斷是否輸入了小寫字母
            fuza++;
        }
        if (/[A-Z]/.test(neirong)) {         //判斷是否輸入了大寫字母
            fuza++;
        }
        if (/[^0-9a-zA-Z]/.test(neirong)) {  //判斷是否輸入了特殊字符
            fuza++;
        }

        if (fuza >= 2) {
            $('#reg .info_pass .q3').wen_ben('●').c_css('color', '#008000');
        } else {
            $('#reg .info_pass .q3').wen_ben('○').c_css('color', '#666');
        }
        //安全級別判斷
        //判斷等級務必從高數值到低數值判斷。防止高數值沒法判斷
        if (chuang >= 10 && fuza >= 3) {
            $('#reg .info_pass .s1').c_css('color', '#008000');
            $('#reg .info_pass .s2').c_css('color', '#008000');
            $('#reg .info_pass .s3').c_css('color', '#008000');
            $('#reg .info_pass .s4').c_css('color', '#008000').wen_ben('高');
        } else if (chuang >= 8 && fuza >= 2) {
            $('#reg .info_pass .s1').c_css('color', '#FF6600');
            $('#reg .info_pass .s2').c_css('color', '#FF6600');
            $('#reg .info_pass .s3').c_css('color', '#ccc');
            $('#reg .info_pass .s4').c_css('color', '#FF6600').wen_ben('中');
        } else if (chuang >= 1 && fuza >= 1) {
            $('#reg .info_pass .s1').c_css('color', '#800000');
            $('#reg .info_pass .s2').c_css('color', '#ccc');
            $('#reg .info_pass .s3').c_css('color', '#ccc');
            $('#reg .info_pass .s4').c_css('color', '#800000').wen_ben('低');
        } else {
            $('#reg .info_pass .s1').c_css('color', '#ccc');
            $('#reg .info_pass .s2').c_css('color', '#ccc');
            $('#reg .info_pass .s3').c_css('color', '#ccc');
            $('#reg .info_pass .s4').wen_ben('');
        }
        if (chuang >= 6 && chuang <= 20 && !/\s/.test(neirong) && fuza >= 2){
            return true;
        }else {
            return false;
        }
    }



    //密碼確認
    $('form').hq_form_name('notpass').yuan_su_shi_jian('focus', function () {          //獲取密碼確認框，添加彙集光標事件
        $('#reg .info_notpass').xian_shi();                                            //彙集光標時顯示提示
        $('#reg .error_notpass').yin_cang();
        $('#reg .succ_notpass').yin_cang();
    }).yuan_su_shi_jian('blur', function () {
        var mima = trim($('form').hq_form_name('pass').hq_value());
        var qrmima = trim($(this).hq_value());
        if (qrmima == '') {
            $('#reg .info_notpass').yin_cang();
        } else if (qrmima == mima) {
            $('#reg .info_notpass').yin_cang();
            $('#reg .error_notpass').yin_cang();
            $('#reg .succ_notpass').xian_shi();
        }else {
            $('#reg .info_notpass').yin_cang();
            $('#reg .error_notpass').xian_shi();
            $('#reg .succ_notpass').yin_cang();
        }
    });
    function qr_mim() {
        if (trim($('form').hq_form_name('pass').hq_value()) == trim($('form').hq_form_name('notpass').hq_value())){
            return true;
        }
    }

     //回答
    $('form').hq_form_name('ans').yuan_su_shi_jian('focus', function () {          //獲取回答框，添加彙集光標事件
        $('#reg .info_ans').xian_shi();                                            //彙集光標時顯示提示
        $('#reg .error_ans').yin_cang();
        $('#reg .succ_ans').yin_cang();
    }).yuan_su_shi_jian('blur', function () {
        var huida = trim($(this).hq_value());
        if (huida == '') {
            $('#reg .info_ans').yin_cang();
        } else if (huida.length >= 2 && huida.length <= 32) {
            $('#reg .info_ans').yin_cang();
            $('#reg .error_ans').yin_cang();
            $('#reg .succ_ans').xian_shi();
        } else {
            $('#reg .info_ans').yin_cang();
            $('#reg .error_ans').xian_shi();
            $('#reg .succ_ans').yin_cang();
        }
    });
    function qr_huoda() {
        if (trim($('form').hq_form_name('ans').hq_value()).length >= 2 && trim($('form').hq_form_name('ans').hq_value()).length <= 32){
            return true;
        }

    }


    //電子郵件
    $('form').hq_form_name('email').yuan_su_shi_jian('focus', function () {          //獲取電子郵件框，添加彙集光標事件
        $('#reg .info_email').xian_shi();                                            //彙集光標時顯示提示
        $('#reg .error_email').yin_cang();
        $('#reg .succ_email').yin_cang();
        if(trim($('form').hq_form_name('email').hq_value()).indexOf('@') == -1){
            $('#reg .all_email').xian_shi();
        }
    }).yuan_su_shi_jian('blur', function () {
        $('#reg .all_email').yin_cang();
        var email = trim($(this).hq_value());
        if (email == '') {
            $('#reg .info_email').yin_cang();
        } else if (/^[a-zA-Z0-9_\-\.]+@[a-zA-Z0-9_\-]+(\.[a-zA-Z]{2,4}){1,2}$/.test(email)) {
            $('#reg .info_email').yin_cang();
            $('#reg .error_email').yin_cang();
            $('#reg .succ_email').xian_shi();
        } else {
            $('#reg .info_email').yin_cang();
            $('#reg .error_email').xian_shi();
            $('#reg .succ_email').yin_cang();
        }
    });
    //電子郵件自動補全界面
    $('#reg .all_email li').shu_biao_yi_ru_yi_chu(function () {
        $(this).c_css('background','#e5edf2');
        $(this).c_css('color','#369');
    },function () {
        $(this).c_css('background','none');
        $(this).c_css('color','#666');
    });
    //自動補全鍵入
    $('form').hq_form_name('email').yuan_su_shi_jian('keyup', function (event) {
        var value = trim($(this).hq_value());
        if (value.indexOf('@') == -1) {               //在沒遇到@時補全，若是遇到中止補全
            $('#reg .all_email span').wen_ben(value);
        } else {
            $('#reg .all_email').yin_cang();
        }
        var length = $('#reg .all_email li').jd_length();
        if (event.keyCode == 40) {       //上鍵選擇補全
            if (this.jishuqi == undefined || this.jishuqi >= length - 1) {    //計數器
                this.jishuqi = 0;
            } else {
                this.jishuqi++;
            }
            $('#reg .all_email li').c_css('background', 'none');
            $('#reg .all_email li').c_css('color', '#666666');
            $('#reg .all_email li').guo_lv_jie_dian(this.jishuqi).c_css('background', '#e5edf2');
            $('#reg .all_email li').guo_lv_jie_dian(this.jishuqi).c_css('color', '#369');
        }
        if (event.keyCode == 38) {       //下鍵選擇補全
            if (this.jishuqi == undefined || this.jishuqi <= 0) {    //計數器
                this.jishuqi = length - 1;
            } else {
                this.jishuqi--;
            }
            $('#reg .all_email li').c_css('background', 'none');
            $('#reg .all_email li').c_css('color', '#666666');
            $('#reg .all_email li').guo_lv_jie_dian(this.jishuqi).c_css('background', '#e5edf2');
            $('#reg .all_email li').guo_lv_jie_dian(this.jishuqi).c_css('color', '#369');
        }
        if (event.keyCode == 13){       //按下回車鍵
            $(this).hq_value($('#reg .all_email li').guo_lv_jie_dian(this.jishuqi).wen_ben_guo_lv());
            $('#reg .all_email').yin_cang();
            this.jishuqi = undefined;  //初始化
        }
    });
    //點擊補全
    $('#reg .all_email li').yuan_su_shi_jian('mousedown',function () {
        $('form').hq_form_name('email').hq_value($(this).wen_ben_guo_lv());
    });
    function qr_email() {
        var lshi = trim($('form').hq_form_name('email').hq_value());
        if (/^[a-zA-Z0-9_\-\.]+@[a-zA-Z0-9_\-]+(\.[a-zA-Z]{2,4}){1,2}$/.test(lshi)){
            return true;
        }
    }


    //年月日
    var nian = $('form').hq_form_name('year');
    var yuen = $('form').hq_form_name('month');
    var ri = $('form').hq_form_name('day');
    //根據月份判斷天數
    var yuen30 = [4,6,9,11];           //30天的月份
    var yuen31 = [1,3,5,7,8,10,12];    //31天的月份

    //注入年
    for(var i = 1950; i <= 2017; i++){
        nian.sh_jd().add(new Option(i,i),undefined);
    }

    //注入月
    for (var i = 1; i <= 12; i++){
        yuen.sh_jd().add(new Option(i,i),undefined);
    }

    //判斷注入日
    //當改變年月value值並失去焦點時觸發
    nian.yuan_su_shi_jian('change', select_day);
    yuen.yuan_su_shi_jian('change', select_day);
    function select_day() {
        if (nian.hq_value() != 0 && yuen.hq_value() != 0) {      //判斷當年月的值都不等於0時
            //清理以前的注入
            ri.sh_jd().options.length = 1;
            var chu_ri = 0;                                         //初始化日
            //注入31天
            if (pd_shuzu(yuen31, parseInt(yuen.hq_value()))) {      //判斷當月屬於31天時
                chu_ri = 31;
                //注入30
            } else if (pd_shuzu(yuen30, parseInt(yuen.hq_value()))) {
                chu_ri = 30;
            } else {
                //判斷潤年29天1
                if ((parseInt(nian.hq_value()) % 4 == 0 && parseInt(nian.hq_value()) % 100 != 0) || parseInt(nian.hq_value()) % 400 == 0) {
                    chu_ri = 29;
                } else {
                    //注入28天
                    chu_ri = 28;
                }
            }
            for (var i = 1; i <= chu_ri; i++) {
                ri.sh_jd().add(new Option(i, i), undefined);
            }

        } else {    //若是年爲0時清理注入
            ri.sh_jd().options.length = 1;
        }

    }

    //備註
    var zong = 10;     //總輸入字數
    $('form').hq_form_name('ps').yuan_su_shi_jian('keyup', function () {
        beizhu(zong);
    }).yuan_su_shi_jian('paste',function () {    //鼠標粘貼檢測
        setTimeout(function () {
           beizhu(zong);
        },50);
    });
    //清尾
    $('#reg .tsh2 span').on_click(function () {
        $('form').hq_form_name('ps').hq_value($('form').hq_form_name('ps').hq_value().substring(0,zong));
        beizhu(zong);
    });

    function beizhu(zong) {
        var num = zong - $('form').hq_form_name('ps').hq_value().length;    //獲得還能夠輸入
        if (num >= 0) {
            $('#reg .tsh1').c_css('display', 'block');
            $('#reg .tsh2').c_css('display', 'none');
            $('#reg .tsh1 .unm').wen_ben(num);
        } else if (num < 0) {
            var chang = ($('form').hq_form_name('ps').hq_value().length) - zong;  //獲得超出多少
            $('#reg .tsh1').c_css('display', 'none');
            $('#reg .tsh2').c_css('display', 'block');
            $('#reg .tsh2 .unm2').wen_ben(chang).c_css('color', '#FF3724');
        }
    }

    //提交判斷
    $('form').hq_form_name('sub').on_click(function () {
        var flag = true;
        if (!pd_user()) {        //判斷用戶名
            flag = false;
            $('#reg .error_user').xian_shi();
        }
        if (!qiang_yanzh()) {    //判斷密碼
            flag = false;
            $('#reg .error_pass').xian_shi();
        }
        if (!qr_mim()){          //判斷確認密碼
            flag = false;
            $('#reg .error_notpass').xian_shi();
        }
        if (!qr_huoda()){        //判斷回答
            flag = false;
            $('#reg .error_ans').xian_shi();
        }
        if (!qr_email()){        //判斷電子郵件
            flag = false;
            $('#reg .error_email').xian_shi();
        }

        if (flag) {
            $('form').sh_jd().submit(); //執行提交
        }

    });