jQuery 的表单验证之单步自动验证

最新推荐文章于 2021-07-27 19:12:16 发布

bestdowt1314

最新推荐文章于 2021-07-27 19:12:16 发布

阅读量1.2k

点赞数

分类专栏： JS+jQuery学习笔记文章标签： jquery email input class div function

本文链接：https://blog.csdn.net/bestdowt1314/article/details/4132127

版权

JS+jQuery学习笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这次实现了，单步的自动难证，主要是运用了它的很多参数。这样基本就可以完成我们所需要的注册的验证了。

下面是我的码，只要按你的要求改一点点，就是完全你所想要的了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>单步自动验证表单</title>
    <style type="text/css">
    .error{color:red;}
    </style>
   <script type="text/javascript" src="misc/js/jquery.min.js"></script>
   <script type="text/javascript" src="misc/js/jquery.form.js"></script>
   <script type="text/javascript" src="misc/js/jquery.validate.js"></script>
   <script type="text/javascript">
    $(function(){
    $("#validataForm").validate({
    rules: {
            firstname: "required",
            lastname: "required",
            username: {
                      required: true,
                      minlength: 8
                      },
            password: {
                      required: true,
                      minlength: 5
                      },
    confirm_password: {
                      required: true,
                      minlength: 5,
                      equalTo: "#password"
                      },
             email: {
                    required: true,
                    email: true
                     },
                   },

                 messages: {
                 firstname: "Please enter your firstname",
                 lastname: "Please enter your lastname",
                 username: {
                 required: "Please enter a username",
                 minlength: "Your username must consist of at least 8 characters"
                 },
                 password: {
                 required: "Please provide a password",
                 minlength: "Your password must be at least 5 characters long"
                 },
                 confirm_password: {
                 required: "Please provide a password",
                 minlength: "Your password must be at least 5 characters long",
                 equalTo: "Please enter the same password as above"
                },
                 email: "Please enter a valid email address"
                 }
    });
    // check if confirm password is still valid after password changed
    $("#password").blur(function(){
    $("#confirm_password").valid();
    });

    });
   </script>
</head>
<body>
<form id="validataForm" action="">
<div>
    <label for="firstname" >firstname</label>
    <input type="text" name="firstname" />
    <label class="error" generated="true" for="firstname"></label>
</div>
   <div>
    <label for="lastname" >lastname</label>
    <input type="text" name="lastname" />
    <label class="error" generated="true" for="lastname"></label>

</div>

   <div>
    <label for="username" >username</label>
    <input type="text" name="username" />
     <label class="error" generated="true" for="username"></label>

</div>
   <div>
    <label for="password" >password</label>
    <input id="password" type="password" name="password" />
    <label class="error" generated="true" for="password"></label>
</div>
   <div>
    <label for="confirm_password" >confirm_password</label>
    <input id="confirm_password" type="password" name="password" />
    <label class="error" generated="true" for="confirm_password"></label>
</div>

    <div>
    <label for="email">email</label>
    <input type="text" name="email" />
    <label class="error" generated="true" for="email"></label>
    </div>
<div><input type="submit" /></div>
</form>
</body>
</html>