第一百五十二节，封装库--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;
        }
    }

首先引入封装库