JQuery Validator使用实例 .

最新推荐文章于 2023-02-15 18:20:16 发布
huangxw000
最新推荐文章于 2023-02-15 18:20:16 发布
阅读量404
点赞数
分类专栏： JS 文章标签： jquery input function email stylesheet 手机
JS 专栏收录该内容
10 篇文章 0 订阅
订阅专栏
 <!DOCTYPE html PUBLIC "-//W//DTD HTML Transitional//EN" "http://www.worg/TR/htmlloose.dtd">  
    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF->  
    <title>JQuery Validator Demo</title>  
      
    <link rel="stylesheet" href="css/screen.css" type="text/css" />  
    <script type="text/javascript" src="js/jquery-min.js"></script>  
    <script type="text/javascript" src="js/jquery.validate.js"></script>  
    <script type="text/javascript">  
        $(document).ready(  
                function() {  
                    // 手机号码验证     
                    jQuery.validator.addMethod("isMobile",  
                            function(value, element) {  
                                var length = value.length;  
                                return this.optional(element)  
                                        || (length == && /^([{\d{)$/  
                                                .test(value));  
                            }, "请正确填写手机号码");  
      
                    // 数字验证     
                    jQuery.validator.addMethod("isNumber",  
                            function(value, element) {  
                                var length = value.length;  
                                return this.optional(element)  
                                        || (/^[?[$/.test(value));  
                            }, "请正确填写年龄");  
      
                    $("#myForm").validate({  
                        rules : {  
                            username : {  
                                required : true,  
                                minlength :   
                                remote : "test"  
                            },  
                            password : {  
                                required : true,  
                                remote : "test"  
                            },  
                            rePassword : {  
                                required : true,  
                                equalTo : "#password"  
                            },  
                            sex : "required",  
                            age : {  
                                required : true,  
                                isNumber : true  
                            },  
                            phone : {  
                                required : true,  
                                isMobile : true  
                            },  
                            email : {  
                                required : true  
                            }  
                        },  
                        messages : {  
                            username : {  
                                required : "请输入用户名",  
                                minlength : jQuery.format("用户名长度必须大于{."),  
                                remote : jQuery.format("用户名{已存在")  
                            },  
                            password : {  
                                required : "请输入密码",  
                                remote : "已存在"  
                            },  
                            rePassword : {  
                                required : "请再次输入密码",  
                                equalTo : "两次密码不一致"  
                            },  
                            sex : "请选择性别",  
                            age : {  
                                required : "请输入年龄"  
                            },  
                            phone : {  
                                required : "请输入手机号码"  
                            },  
                            email : {  
                                required : "请输入电子邮箱"  
                            }  
                        },  
                        errorPlacement : function(error, element) {  
                            if (element.is(":radio"))  
                                error.appendTo(element.next().next());  
                            else if (element.is(":checkbox"))  
                                error.appendTo(element.next());  
                            else  
                                error.appendTo(element.next());  
                        },  
                        submitHandler: function() {  
                            alert("submitted!");  
                        },  
                        success: function(label) {  
                            label.html(" ").addClass("checked");  
                        }  
                    });  
                });  
    </script>  
      
    <style type="text/css">  
    #myForm label.error {  
        background: url("images/unchecked.gif") no-repeat x x;  
        padding-left: x;  
        padding-bottom: x;  
        font-weight: bold;  
        color: #EA  
    }  
      
    #myForm label.checked {  
        background: url("images/checked.gif") no-repeat x x;  
    }  
    </style>  
    </head>  
    <body>  
        <form action="" id="myForm" style="padding: x x;">  
            <fieldset>  
                <legend>请输入以下用户信息</legend>  
                <p>  
                    <label for="username">用户名</label> <input id="username"  
                        name="username" type="text" /><label />  
                </p>  
                <p>  
                    <label for="password">密码</label> <input id="password"  
                        name="password" type="password" /><label />  
                </p>  
                <p>  
                    <label for="rePassword">重复密码</label> <input id="rePassword"  
                        name="rePassword" type="password" /><label />  
                </p>  
                <p>  
                    <label for="sex">性别</label> <input name="sex" type="radio" value=">女  
                    <input name="sex" type="radio" value=">男<label />  
                </p>  
                <p>  
                    <label for="age">年龄</label> <input id="age" name="age" type="text" /><label />  
                </p>  
                <p>  
                    <label for="phone">手机</label> <input id="phone" name="phone"  
                        type="text" /><label />  
                </p>  
                <p>  
                    <label for="email">电子邮箱</label> <input id="email" name="email"  
                        type="text" /><label />  
                </p>  
                <p>  
                    <input type="submit" value="提交">  
                </p>  
            </fieldset>  
        </form>  
    </body>  
    </html>