客户端的验证插件validator

最新推荐文章于 2024-05-25 23:16:50 发布

weixin_34054931

最新推荐文章于 2024-05-25 23:16:50 发布

阅读量85

点赞数

原文链接：http://www.cnblogs.com/hfxm/p/5666922.html

版权

简单，智能，令人愉悦的表单验证~~~

官方文档：http://www.niceue.com/validator/

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="js/validator/jquery.validator.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/validator/jquery.validator.min.js"></script>
    <script src="js/validator/local/zh-CN.js"></script>
    <script>
        $(function(){
            $('#userform').validator({
                rules: {
                    telnumber: [/^\d{11}$/],
                    adminame:function(){
                        return $("#username").val()=="admin"||"请输入正确的用户名"
                    }
                },
                fields: {
                    username:{
                        rule:"required;adminame",
                        msg: {
                            required: "请填写用户名！"
                        }
                    },
                    usertel:{
                        rule:"required;telnumber",
                        msg: {
                            required: "请填写手机号码！",
                            telnumber:"请输入11位数字的手机号码"
                        },
                        tip:"密码由6-20位数字、字母或下划线组成！",
                        ok: "输入正确"
                    }
                },
                valid: function(form){
                    //表单验证通过，提交表单到服务器
                    alert("验证通过");
                    $.ajax({
                        url: "result.php",
                        data: $(form).serialize(),
                        success: function(d){
                            //do something
                        }
                    });
                }
            })
        })
    </script>
</head>
<body>
 <form name="userform" id="userform">
     用户名：<input type="text" name="username" id="username" placeholder="请输入用户名"/> <span class="msg-box" for="loginName"></span><br><br>
     手机号：<input type="tel" name="usertel" placeholder="请输入手机号"/><br><br>
     <button type="submit">提交</button>
 </form>
</body>
</html>