YuFeng

表单校验 validate
$(function(){ $("#registerForm"...
扫描右侧二维码阅读全文
29
2018/08

表单校验 validate

$(function(){
                $("#registerForm").validate({
                    rules:{
                        user:{
                            required:true,
                            minlength:3
                        },
                        userpassword:{
                            required:true,
                            minlength:3
                        },
                        rpassword:{
                            required:true,
                            equalTo:"#userpassword"
                        },
                        userEmail:{
                            required:true,
                            email:true
                        }
                    },
                    messages:{
                        uesr:{
                            required:"字段必填",
                            minlength:"必须大于三个字符"
                        },
                        userpassword:{
                            required:"字段必填",
                            minlength:"必须大于三个字符"
                        },
                        rpassword:{
                            required:"字段必填",
                            equalTo:"密码不一致"
                        },
                        userEmail:{
                            required:"字段必填",
                            email:"必须输入合法邮件地址"
                        }
                    },
                    error: function(label) { //验证成功后的执行的回调函数
                        //label指向上面那个错误提示信息标签label
                        $(label).css("background-color","white")
                        label.text(" ") //清空错误提示消息
                        .addClass("error"); //加上自定义的success类
                    },
                    success: function(label) { //验证成功后的执行的回调函数
                        //label指向上面那个错误提示信息标签label
                        $(label).css("background","");
                        label.text(" ") //清空错误提示消息
                        .addClass("success"); //加上自定义的success类
                    }
                });
            });

相关样式

label.error{
                background:url(../img/unchecked.gif) no-repeat 10px 3px;
                padding-left: 30px;
                font-family:georgia;
                font-size: 15px;
                font-style: normal;
                color: red;
            }
            
            label.success{
                background:url(../img/checked.gif) no-repeat 10px 3px;
                padding-left: 30px;
            }

单选框需要有所注意:

input type="radio" name="sex" id="sex" value="男"/>男
                <input type="radio" name="sex" id="sex" value="女"/>女
                <label for="sex" class="error" style="display: none;"></label>
Last modification:September 2nd, 2018 at 07:23 pm
If you think my article is useful to you, please feel free to appreciate

Comment here is closed