第一百八十四节，jQuery-UI，验证注册表单

Posted 2020-09-05 林贵秀

 

jQuery-UI，验证注册表单

html

<form id="reg" action="123.html" title="会员注册">
    <ol class="reg_error"></ol>
    <p>
        <label for="user">帐号：</label>
        <input type="text" name="user" class="text" id="user"/>
        <span class="star">*</span>
    </p>
    <p>
        <label for="pass">密码：</label>
        <input type="text" name="pass" class="text" id="pass"/>
        <span class="star">*</span>
    </p>
    <p>
        <label for="email">邮箱：</label>
        <input type="text" name="email" class="text" id="email"/>
        <span class="star">*</span>
    </p>
    <p>
        <label>性别：</label>
        <input type="radio" name="sex" id="male" checked="checked"><label for="male">男</label></input>
        <input type="radio" name="sex" id="female"><label for="female">女</label></input>
    </p>
    <p>
        <label for="date">生日：</label>
        <input type="text" name="date" readonly="readonly" class="text" id="date"/>
    </p>
</form>

css

/*注册框*/
#reg {
    padding: 15px;
}

#reg p {
    margin: 10px 0;
    padding: 0;
}

#reg p label {
    font-size: 14px;
    /*color: #666;*/
}

#reg p .star {
    color: red;
}

#reg .text {
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    height: 25px;
    width: 200px;
    text-indent: 5px;
    color: #666;
}
#reg .reg_error{
    color: #ff171f;
    padding:0;
    margin:0 0 0 20px;
}
#reg .succ{
    display:inline-block;
    width:20px;
    background:url(../img/reg_succ.png) no-repeat;
}

/*ui提示信息*/
.ui-tooltip{
    color: #ff1c24;
}

.su{
    width: 50px;
    height: 20px;
    background-color: #2cff24;
}

js

//注册框
    $(‘#reg_a‘).on(‘click‘,function () {    //将注册框，执行对话框方法
        $(‘#reg‘).dialog({
            autoOpen : true,
            modal : true,
            resizable : false,
            width : 320,
            height : 360,
            buttons : {
                ‘提交‘ : function () {
                    $(this).submit();       //执行提交方法
                }
            },
            closeText : ‘关闭对话框‘
        }).buttonset().validate({           //验证表单
            submitHandler: function (form) {                                        //全部验证成功准备提交
                alert(‘验证完成，准备提交！‘);
            },
            highlight: function (element, errorClass) {                             //如果出错，错误框边框改变颜色
                $(element).css(‘border‘, ‘1px solid #630‘);
            },
            unhighlight: function (element, errorClass) {                           //如果正确取消边框改变颜色
                $(element).css(‘border‘, ‘1px solid #ccc‘);
                $(element).parent().find(‘span‘).html(‘ ‘).addClass(‘succ‘);   //显示正确图片
            },
            showErrors: function (errorMap, errorList) {                            //获取出错句柄
                var errors = this.numberOfInvalids();
                if (errors > 0) {                                                   //判断出错句柄个数来改变对话框的高度
                    $(‘#reg‘).dialog(‘option‘, ‘height‘, errors * 20 + 340);
                } else {
                    $(‘#reg‘).dialog(‘option‘, ‘height‘, 360);
                }
                this.defaultShowErrors();
            },
            errorLabelContainer: ‘ol.reg_error‘,                                    //有错误时，将所有表单错误信息统一放到class为ol.reg_error的元素里
            wrapper: ‘li‘,                                                          //将每个错误信息放入一个li标签
            rules : {
                user : {
                    required:true,
                    rangelength:[2,10]
                },
                pass:{
                    required:true,
                    rangelength:[6,20]
                },
                email:{
                    required:true,
                    email:true
                }
            },
            messages : {
                user : {
                    required:‘用户名不能为空！‘,
                    rangelength:jQuery.format(‘用户名不得小于{0}位，大于{1}位‘)
                },
                pass:{
                    required:‘密码不能为空‘,
                    rangelength:jQuery.format(‘密码不得小于{0}位，大于{1}位‘)
                },
                email:{
                    required:‘邮箱不能为空‘,
                    email:‘请输入正确的邮箱格式‘
                }
            }
        });


        //邮箱执行自动补全
        $(‘#email‘).autocomplete({
            autoFocus: true,
            delay: 0,
            source: function (request, response) {
                var hosts = [‘qq.com‘, ‘163.com‘, ‘263.com‘, ‘gmail.com‘, ‘hotmail.com‘], //起始
                    term = request.term,        //获取输入值
                    ix = term.indexOf(‘@‘),     //@
                    name = term,                //用户名
                    host = ‘‘,                  //域名
                    result = [];                //结果
                //结果第一条是自己输入
                result.push(term);
                if (ix > -1) { //如果有@的时候
                    name = term.slice(0, ix); //得到用户名
                    host = term.slice(ix + 1); //得到域名
                }
                if (name) {
                    //得到找到的域名
                    var findedHosts = (host ? $.grep(hosts, function (value, index) {
                            return value.indexOf(host) > -1;
                        }) : hosts),
                        //最终列表的邮箱
                        findedResults = $.map(findedHosts, function (value, index) {
                            return name + ‘@‘ + value;
                        });
                    //增加一个自我输入
                    result = result.concat(findedResults);
                }
                response(result);
            }
        });

        //将生日执行日历ui
        $(‘#date‘).datepicker({
            showOtherMonths:true,
            changeYear:true,
            changeMonth:true,
            yearSuffix:‘‘
        });
    });