jQuery Validate

导入 js 库

  1. <script src="./jquery-validation/lib/jquery-1.8.3.js" type="text/javascript"></script>
  2. <script src="./jquery-validation/dist/jquery.validate.min.js" type="text/javascript"></script>
  3. <script src="./jquery-validation/src/localization/message_cn.js" type="text/javascript"></script>　　<!--中文提示-->
  4. <script src="./jquery-validation/dist/jquery.metadata.js" type="text/javascript"></script> <!--将校验规则写到控件中需引入该文件-->

默认校验规则

序号 规则 描述
1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6 dateISO:true 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7 number:true 必须输入合法的数字（负数，小数）。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串（上传文件的后缀）。
12 maxlength:5 输入长度最多是 5 的字符串（汉字算一个字符）。
13 minlength:10 输入长度最小是 10 的字符串（汉字算一个字符）。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10。

默认提示

默认提示为英文，如需要修改，可在 js 代码中加入，推荐做法，将此文件放入 messages_cn.js 中，在页面中引入：

  1. <script src="../js/messages_cn.js" type="text/javascript"></script>
  1. jQuery.extend(jQuery.validator.messages, {
  2.     required: "必选字段",
  3.     remote: "请修正该字段",
  4.     email: "请输入正确格式的电子邮件",
  5.     url: "请输入合法的网址",
  6.     date: "请输入合法的日期",
  7.     dateISO: "请输入合法的日期 (ISO).",
  8.     number: "请输入合法的数字",
  9.     digits: "只能输入整数",
  10.     creditcard: "请输入合法的信用卡号",
  11.     equalTo: "请再次输入相同的值",
  12.     accept: "请输入拥有合法后缀名的字符串",
  13.     maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
  14.     minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
  15.     rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
  16.     range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
  17.     max: jQuery.validator.format("请输入一个最大为{0} 的值"),
  18.     min: jQuery.validator.format("请输入一个最小为{0} 的值")
  19. });

使用方式

1、将校验规则写到控件中

　　默认是这种形式class="required"，使用 class="{}" 的方式，必须引入包：jquery.metadata.js，又通过修改jquery.metadata.js，将class替换成validate,故最终统一为：validate="{required:true}"。

　　在使用 equalTo 关键字时，后面的内容必须加上引号，代码如下所示：validate="{required:true,minlength:5,equalTo:'#password'}"。

  1. <script src="./jquery-validation/lib/jquery-1.8.3.js" type="text/javascript"></script>
  2. <script src="./jquery-validation/dist/jquery.validate.min.js" type="text/javascript"></script>
  3. <script src="./jquery-validation/src/localization/message_cn.js" type="text/javascript"></script>
  4. <script src="./jquery-validation/dist/jquery.metadata.js" type="text/javascript"></script>
    <!--默认是class来定义验证规则的，修改了metadata文件后用validate来定义，防止了class样式难以维护-->
  5. <script>
  6.     $(function(){
  7.         $("#signupForm").validate();
  8.     });
  9. </script>
  10. <body>
  11.  
  12. <form id="signupForm" method="post" action="sub.php">
  13.     <p>
  14.         <label for="firstname">Firstname</label>
  15.         <input id="firstname" name="firstname" validate="{required:true}"/>
  16.     </p>
  17.     <p>
  18.         <label for="email">E-Mail</label>
  19.         <input id="email" name="email" validate="{required:true,email:true}" />
  20.     </p>
  21.     <p>
  22.         <label for="email">Url</label>
  23.         <input id="url" name="url" validate="{required:true,url:true}" />
  24.     </p>
  25.     <p>
  26.         <label for="password">Password</label>
  27.         <input id="password" name="password" type="password" validate="{required:true,minlength:5,maxlength:8}" />
  28.     </p>
  29.     <p>
  30.         <label for="confirm_password">确认密码</label>
  31.         <input id="confirm_password" name="confirm_password" type="password" validate="{required:true,minlength:5,equalTo:'#password'}" />
  32.     </p>
  33.     <p>
  34.         <input class="submit" type="submit" value="Submit"/>
  35.     </p>
  36. </form>
  37. </body>

2、将校验规则写到 js 代码中

　　messages 处，如果某个控件没有 message，将调用默认的信息，

　　required:true 必须有值。
　　required:"#aa:checked" 表达式的值为真，则需要验证。
　　required:function(){} 返回为真，表示需要验证。

  1. <script>
  2. $().ready(function() {
  3.  $("#signupForm").validate({
  4.         rules: {
  5.    firstname: "required",
  6.    email: {
  7.     required: true,
  8.     email: true
  9.    },
  10.    password: {
  11.     required: true,
  12.     minlength: 5
  13.    },
  14.    confirm_password: {
  15.     required: true,
  16.     minlength: 5,
  17.     equalTo: "#password"
  18.    }
  19.   },
  20.         messages: {
  21.    firstname: "请输入姓名",
  22.    email: {
  23.     required: "请输入Email地址",
  24.     email: "请输入正确的email地址"
  25.    },
  26.    password: {
  27.     required: "请输入密码",
  28.     minlength: jQuery.format("密码不能小于{0}个字 符")
  29.    },
  30.    confirm_password: {
  31.     required: "请输入确认密码",
  32.     minlength: "确认密码不能小于5个字符",
  33.     equalTo: "两次输入密码不一致不一致"
  34.    }
  35.   }
  36.     });
  37. });
  38. </script>

常用方法

1、用其他方式替代默认的 submit

  1. $().ready(function() {
  2.  $("#signupForm").validate({
  3.         submitHandler:function(form){
  4.             alert("submitted");
  5.             form.submit();
  6.         }
  7.     });
  8. });

使用 ajax 方式

  1. $("#signupForm").validate({
  2.  submitHandler: function(form)
  3.    {
  4.       $(form).ajaxSubmit();
  5.    }
  6.  })

2、异步验证

使用 ajax 方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用 data 选项。

  1. remote: "check-email.php"
  1. remote: {
  2.     url: "check-email.php",     //后台处理程序
  3.     type: "post",               //数据发送方式
  4.     dataType: "json",           //接受数据格式
  5.     data: {                     //要传递的数据
  6.         username: function() {
  7.             return $("#username").val();
  8.         }
  9.     }
  10. }

远程地址只能输出 "true" 或 "false"，不能有其他输出。

3、添加自定义校验

  1. addMethod：name, method, message
  1. // 邮政编码验证
  2. jQuery.validator.addMethod("isZipCode", function(value, element) {
  3.     var tel = /^[0-9]{6}$/;
  4.     return this.optional(element) || (tel.test(value));
  5. }, "请正确填写您的邮政编码");

注意：要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建议一般写在 additional-methods.js 文件中。

注意：在 messages_cn.js 文件中添加：isZipCode: "只能包括中文字、英文字母、数字和下划线"。调用前要添加对 additional-methods.js 文件的引用。

4、radio 和 checkbox、select 的验证

radio 的 required 表示必须选中一个。

  1. <input  type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
  2. <input  type="radio" id="gender_female" value="f" name="gender"/>

checkbox 的 required 表示必须选中。

  1. <input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />

checkbox 的 minlength 表示必须选中的最小个数，maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。

  1. <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
  2. <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
  3. <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />

select 的 required 表示选中的 value 不能为空。

  1. <select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
  2.     <option value=""></option>
  3.     <option value="1">Buga</option>
  4.     <option value="2">Baga</option>
  5.     <option value="3">Oi</option>
  6. </select>

select 的 minlength 表示选中的最小个数（可多选的 select），maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。

  1. <select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
  2.     <option value="b">Banana</option>
  3.     <option value="a">Apple</option>
  4.     <option value="p">Peach</option>
  5.     <option value="t">Turtle</option>
  6. </select>

jQuery Validate使用说明的更多相关文章

  1. 表单验证——jquery validate使用说明【另一个教程】

    [参考:http://www.tuicool.com/articles/y6fyme] jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证 ...

  2. 表单验证——jquery validate使用说明

    //validate 选项*********************************************************** $("form").validat ...

  3. [转]jQuery Validate使用说明

    本文转自:http://www.cnblogs.com/gimin/p/4757064.html jQuery Validate 导入 js 库 <script src="./jque ...

  4. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  5. jQuery验证控件jquery.validate.js使用说明

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  6. jQuery验证控件jquery.validate.js使用说明+中文API

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 学习 ...

  7. jquery.validate.js使用说明——后台添加用户邮箱功能：非空、不能重复、格式正确

    重点内容为:  jQuery验证控件jquery.validate.js使用说明+中文API[http://www.tuicool.com/articles/iABvI3] 简单教程可以参考[jQue ...

  8. (转)jQuery验证控件jquery.validate.js使用说明+中文API

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  9. jquery.validate校验文件使用说明

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库<script src="../js/ ...

随机推荐

  1. 在GridView控件FooterTemplate内添加记录 Ver3

    重构此篇<在GridView控件FooterTemplate内添加记录 Ver2> http://www.cnblogs.com/insus/p/3270644.html 这有些缺陷,怎样 ...

  2. snmp snmp4j的使用

    snmp4j的使用 一.什么是snmp及snmp4j? snmp是 Simple Network Management Protocol (简单网络管理协议)的简写. SNMP4J是一个用Java来实 ...

  3. Metasploit 读书笔记-神器Meterpreter

    一、基本命令 截屏 screenshot 2.获取系统平台信息 sysinfo 3.进程信息 ps 4.获取键盘记录 查看进程信息ps--migrate将会话迁移至explorer.exe进程空间中- ...

  4. CF1096G Lucky Tickets 快速幂套FFT

    \(\color{#0066ff}{ 题目描述 }\) 一个\(n\)位数,每位可以是给出的\(k\)个数码中的一个数,可以有前导\(0\),输出前\(n/2\)位之和与后\(n/2\)位之和相等的方 ...

  5. object都有string

    object都有tostringString item=spinner.getSelectedItem().toString();String item01=String.valueOf(spinne ...

  6. CSS(九)元素隐藏和利弊

    隐藏元素.无法点击,这之间有什么关系呢? 可以配合我写的 html 食用:https://github.com/dirstart/ScriptOJ/blob/master/OJ_CSS/4.css%E ...

  7. Navicat安装教程、建表教程

    1.安装教程: 转自:https://www.jianshu.com/p/5f693b4c9468 2.使用教程(建表操作): https://jingyan.baidu.com/article/e6 ...

  8. ssh免密登录linux服务器

    Ssh免密登录 sshd服务 sshd简介: SSH 密钥为登录 Linux 服务器提供了更好且安全的机制.运行 ssh-keygen 后,将会生成公私密钥对.你可以将公钥放置到任意服务器,从持有私钥 ...

  9. Python的主要应用领域及应用场景

    参考链接:https://www.cnblogs.com/kaid/p/9016673.html 正文: Python简介 Python(英国发音:/ˈpaɪθən/美国发音:/ˈpaɪθɑːn/), ...

  10. Codeforces 527C Glass Carving （最长连续0变形+线段树）

    Leonid wants to become a glass carver (the person who creates beautiful artworks by cutting the glas ...