jquery.valid 注册验证

最新推荐文章于 2021-07-15 23:45:37 发布

cherry_hit_tom

最新推荐文章于 2021-07-15 23:45:37 发布

阅读量9.2k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/tsuliuchao/article/details/8494307

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title></title>
  <script type="text/javascript" src="lib/jquery.js"></script>
  <script type="text/javascript" src="lib/jquery.validate.js"></script>
  <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
  <script type="text/javascript">
        $.validator.setDefaults({
            debug: true,
            success: "valid",
            submitHandler: function() { alert("success!"); }
        });
        //下面是验证类的扩展方法
        jQuery.validator.addMethod("checkName",function(value,element,param){
        // 正则不能写错。
            var pattern = /^[a-zA-Z][a-zA-Z0-9_]+$/;
            if(value != ''){
                if(!pattern.test(value))
                {
                    return false;
                }
            }
            return true;
        },"5～20个字母或数字,首位以字母开头");
        
        $(document).ready(function() {
            // validate signup form on keyup and submit
            $("#commentForm").validate({
                rules: {
                    uname: {
                        //required: true,
                        checkName:true,
                        minlength: 4
                    },
                    txtPwd: {
                        required: true,
                        minlength: 6,
                        maxlength: 6
                    },
                    txtPwd2: {
                        required: true,
                        minlength: 6,
                        maxlength: 6,
                        equalTo: "#txtPwd"
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    topic: {
                        required: "#newsletter:checked",
                        minlength: 2
                    },
                    agree: "required"
                },
                messages: {
                    uname: {
                        required: "用户名不能为空",
                        minlength: "用户名长度不能小于5个字符"
                    },
                    txtPwd: {
                        required: "请填写您的密码！",
                        minlength: "密码必须是六位字符！",
                        maxlength: "密码必须是六位字符！"
                    },
                    txtPwd2: {
                        required: "请填写确认密码！",
                        minlength: "确认密码必须是六位字符！",
                        maxlength: "确认密码必须是六位字符！",
                        equalTo: "两次密码不一致"
                    },
                    email: "请输入正确的email地址",
                    agree: "Please accept our policy"
                }
            });
        });
        
    </script>
    <style type="text/css">
        #commentForm { width: 500px; }
        #commentForm label { width: 250px; }
        #commentForm label.error, #commentForm input.submit { margin-left: 253px; }
        #signupForm { width: 670px; }
        #signupForm label.error {
            margin-left: 10px;
            width: auto;
            display: inline;
        }
        #newsletter_topics label.error {
            display: none;
            margin-left: 103px;
        }
    </style>
 </head>

 <body>
    <form class="cmxform" id="commentForm" method="get" action="">
        <fieldset>
            <legend>Please provide your name, email address (won't be published) and a comment</legend>
            <p>
                <label for="unname">用户名</label>
                <input id="uname" name="uname" minlength="5" type="text" required />
            </p>
            <p>
                <label for="cpassword">密码 (required)</label>
                <input id="txtPwd" name="txtPwd" type="text" />
            </p>
            <p>
                <label for="cconfirm_password">重复密码</label>
                <input id="txtPwd2" name="txtPwd2" type="text" />
            </p>
            <p>
                <label for="cemail">邮箱</label>
                <input id="cemail" type="email" name="email" required />
            </p>
            <p>
                <label for="curl">URL地址</label>
                <input id="curl" type="url" name="url" />
            </p>
            <p>
                <label for="ccomment">你的评论</label>
                <textarea id="ccomment" name="comment" required></textarea>
            </p>
            <p>
                <input class="submit" type="submit" value="Submit"/>
            </p>
        </fieldset>
    </form>
</body>
</html>

jquery 验证类，基本上复合中国国情了，还有需要的就自己添加吧，这里没有加入成功或者失败的回调，不过不难，相信各位一定都会，随便转，哈哈

cherry_hit_tom

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jquery.valid 注册验证

$.validator.setDefaults({ debug: true, success: "valid", submitHandler: function() { alert("success!"); } }); //下面是验证类的扩展方法 jQuery.validator
复制链接

扫一扫