第一百五十二節，封裝庫--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 style="padding:0 0 0 320px;">還能夠輸入200字</dd>
            <dd style="padding:0 0 0 80px;"><input type="button" class="submit"/></dd>
        </dl>
    </form>
</div>

前臺js

//年月日
    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() {                  //當改變年value值並失去焦點時觸發
        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天
                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;
        }
    }

首先引入封裝庫