jQuery Validate验证框架详解

最新推荐文章于 2024-05-23 22:33:59 发布

逸少KevinLM

最新推荐文章于 2024-05-23 22:33:59 发布

阅读量823

点赞数

分类专栏： JS 插件

JS 插件专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用jQuery Validate插件进行表单验证的实际案例，包括自定义验证规则、异步验证等，确保用户输入数据的有效性和安全性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入库：

<script type="text/javascript" src="__PUBLIC__/Js/jquery.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/jquery-validate.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/register.js"></script>

表单：

 1 <form action="" method='post' name='regis'>
 5     <p>
 6         <label for="account">登录账号：</label>
 7         <input type="text" name='account' id="account" autocomplete="off" />
 8     </p>
 9     <p>
10         <label for="pwd">登录密码：</label>
11         <input type="password" name='pwd' id="pwd"/>
12     </p>
13     <p>
14         <label for="pwd">确认密码：</label>
15         <input type="password" name='pwded'/>
16     </p>
17     <p>
18         <label for="uname">昵&nbsp;称：</label>
19         <input type="text" name='uname' id="uname" />
20     </p>
21     <p>
22         <label for="verify">验证码：</label>
23         <input type="text" name="verify" id="verify" />
24         <img src="#" alt="验证码图片" class="verify" id="verify-img" title="点击更换" />
25     </p>
26     <p>
27         <input type="submit" value='立即注册' id='regis'/>
28     </p>
29 </form>

  1 $(function () {
  2 
  3     //jQuery Validate表单验证
  4 
  5     /**
  6      * 添加验证方法: ok
  7      * 以字母开头，5-17 位字母、数字、下划线"_"
  8      */
  9     jQuery.validator.addMethod("ok", function(value, element) {
 10         var account = /^[a-zA-Z][\w]{4,16}$/;
 11         return this.optional(element) || (account.test(value));
 12     }, '以字母开头，5-17 位字母、数字、下划线"_"');
 13 
 14     $('form[name="regis"]').validate({
 15 
 16         // 验证规则
 17         rules:{
 18             account:{ //form表单中input[name='account']元素的验证规则
 19                 required: true,                  //必须字段，不能为空
 20                 ok: true,                        //启用自定义验证规则'ok'
 21                 remote: {                        //异步验证
 22                     url: checkAccountUrl,        //后台处理程序
 23                     type: "post",                //数据发送方式
 24                     dataType: "json",            //接受数据格式
 25                     data: {                      //要传递的数据
 26                         account: function() {
 27                             return $("#account").val().trim();
 28                         }
 29                     }
 30                 }
 31             },
 32             pwd:{
 33                 required: true,
 34                 ok: true,
 35             },
 36             pwded:{
 37                 required: true,
 38                 equalTo: '#pwd'
 39             },
 40             uname:{
 41                 required: true,
 42                 rangelength: [2, 10],
 43                 remote: {
 44                     url: checkUnameUrl,
 45                     type: "post",
 46                     dataType: "json",
 47                     data: {
 48                         uname: function () {
 49                             return $("#uname").val().trim();
 50                         }
 51                     }
 52                 }
 53             },
 54             verify:{
 55                 required: true,
 56                 remote: {
 57                     url: checkVerifyUrl,
 58                     type: 'post',
 59                     dataType: 'json',
 60                     data: {
 61                         verify: function () {
 62                             return $('#verify').val().trim();
 63                         }
 64                     }
 65                 }
 66             }
 67         },
 68 
 69         // 提示消息
 70         messages:{
 71             account:{ //form表单中input[name='account']元素的提示信息
 72                 required: '账号不能为空',            // 输入为空时提示
 73                 remote: '账号已存在' // 异步获得json数据为'false'时提示，也就是后台验证失败
 74             },
 75             pwd:{
 76                 required: '密码不能为空',
 77             },
 78             pwded:{
 79                 required: '请确认密码',
 80                 equalTo: '两次密码不一致'
 81             },
 82             uname:{
 83                 required: '请填写您的昵称',
 84                 rangelength: '昵称必须在{0}-{1}个字之间',
 85                 remote: '昵称已存在'
 86             },
 87             verify:{
 88                 required: '请输入验证码',
 89                 remote: '验证码有误'
 90             }
 91         },
 92 
 93         // 错误标签元素
 94         errorElement: 'span',
 95 
 96         // 错误提示位置
 97         errorPlacement: function (error, element) { // error是错误信息的提示元素，element是当前input域
 98             error.appendTo(element.parent()).prev('.success').remove(); //追加提示元素，去掉之前的成功元素
 99         },
100 
101         // 验证通过
102         success: function (span) { // span 是错误的提示元素
103             span.removeClass('error').addClass('success').siblings('.success').remove(); //追加成功样式，去掉错误样式和重复的成功样式
104         }
105     });
106 
107 })

errorElement 的CSS样式：

1 input.error{ /*...*/ }     /* 输入框  的错误样式 */
2 input.valid{ /*...*/ }     /* 输入框  的成功样式 */
3 span.error{ /*...*/ }      /* 提示元素的错误样式 */
4 span.success{ /*...*/ }    /* 提示元素的成功样式 */

转自：http://www.cnblogs.com/linjiqin/p/3431835.html