一、下载依赖包

网盘下载：https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224

二、 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面。

三、需要改写触发校验的方式。

  1.  $("#commentForm").validate({meta: "validate"});

四、详细代码如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  <title>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中</title>
  6.  <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  7.  <script src="lib/jquery.validate.js" type="text/javascript"></script>
  8. <script src="lib/jquery.metadata.js" type="text/javascript"></script>
  9. <style type="text/css">
  10. * { font-family: Verdana; font-size: 96%; }
  11. label { width: 10em; float: left; }
  12. label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
  13. p { clear: both; }
  14. .submit { margin-left: 12em; }
  15. em { font-weight: bold; padding-right: 1em; vertical-align: top; }
  16. </style>
  17.   <script type="text/javascript">
  18.   $(document).ready(function(){
  19.  
  20.       $("#commentForm").validate({meta: "validate"});
  21.  
  22.   });
  23.   </script>
  24.  
  25. </head>
  26. <body>
  27.  
  28.  <form class="cmxform" id="commentForm" method="get" action="">
  29.  <fieldset>
  30.    <legend>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中</legend>
  31.    <p>
  32.      <label for="cusername">姓名</label>
  33.      <em>*</em><input id="cusername" name="username" size="25"  class="{validate:{required:true, minlength:2}}" />
  34.    </p>
  35.    <p>
  36.      <label for="cemail">电子邮件</label>
  37.      <em>*</em><input id="cemail" name="email" size="25"   class="{validate:{required:true, email:true}}"  />
  38.    </p>
  39.    <p>
  40.      <label for="curl">网址</label>
  41.      <em>  </em><input id="curl" name="url" size="25"  value=""   class="{validate:{url:true}}" />
  42.    </p>
  43.    <p>
  44.      <label for="ccomment">你的评论</label>
  45.      <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="{validate:{required:true}}" ></textarea>
  46.    </p>
  47.    <p>
  48.      <input class="submit" type="submit" value="提交"/>
  49.    </p>
  50.  </fieldset>
  51.  </form>
  52. </body>
  53. </html>

默认校验规则：

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

默认提示：

  1. messages: {
  2.     required: "This field is required.",
  3.     remote: "Please fix this field.",
  4.     email: "Please enter a valid email address.",
  5.     url: "Please enter a valid URL.",
  6.     date: "Please enter a valid date.",
  7.     dateISO: "Please enter a valid date (ISO).",
  8.     dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
  9.     number: "Please enter a valid number.",
  10.     numberDE: "Bitte geben Sie eine Nummer ein.",
  11.     digits: "Please enter only digits",
  12.     creditcard: "Please enter a valid credit card number.",
  13.     equalTo: "Please enter the same value again.",
  14.     accept: "Please enter a value with a valid extension.",
  15.     maxlength: $.validator.format("Please enter no more than {0} characters."),
  16.     minlength: $.validator.format("Please enter at least {0} characters."),
  17.     rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
  18.     range: $.validator.format("Please enter a value between {0} and {1}."),
  19.     max: $.validator.format("Please enter a value less than or equal to {0}."),
  20.     min: $.validator.format("Please enter a value greater than or equal to {0}.")
  21. },

五、效果图如下：

六、注意：

使用 class="{}" 的方式，必须引入包：jquery.metadata.js。

可以使用如下的方法，修改提示内容：

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

在使用 equalTo 关键字时，后面的内容必须加上引号，代码如下所示：

class="{required:true,minlength:5,equalTo:'#password'}"

七、直接在class属性里面定义错误信息的提示。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中（2）</title>
  6.  <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  7.  <script src="lib/jquery.validate.js" type="text/javascript"></script>
  8. <script src="lib/jquery.metadata.js" type="text/javascript"></script>
  9. <style type="text/css">
  10. * { font-family: Verdana; font-size: 96%; }
  11. label { width: 10em; float: left; }
  12. label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
  13. p { clear: both; }
  14. .submit { margin-left: 12em; }
  15. em { font-weight: bold; padding-right: 1em; vertical-align: top; }
  16. </style>
  17.  
  18.   <script type="text/javascript">
  19.   $(document).ready(function(){
  20.  
  21.       $("#commentForm").validate({meta: "validate"});
  22.  
  23.   });
  24.   </script>
  25.  
  26. </head>
  27. <body>
  28.  
  29.  <form class="cmxform" id="commentForm" method="get" action="">
  30.  <fieldset>
  31.    <legend>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中（2）</legend>
  32.    <p>
  33.      <label for="cusername">姓名</label>
  34.      <em>*</em><input id="cusername" name="username" size="25"  class="{validate:{required:true, minlength:2, messages:{required:'请输入姓名', minlength:'请至少输入两个字符'}}}" />
  35.    </p>
  36.    <p>
  37.      <label for="cemail">电子邮件</label>
  38.      <em>*</em><input id="cemail" name="email" size="25"   class="{validate:{required:true, email:true, messages:{required:'请输入电子邮件', email:'请检查电子邮件的格式'}}}"  />
  39.    </p>
  40.    <p>
  41.      <label for="curl">网址</label>
  42.      <em>  </em><input id="curl" name="url" size="25"  value=""   class="{validate:{url:true, messages:{url:'请检查网址的格式'}}}" />
  43.    </p>
  44.    <p>
  45.      <label for="ccomment">你的评论</label>
  46.      <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="{validate:{required:true, messages:{required:'请输入您的评论'}}}" ></textarea>
  47.    </p>
  48.    <p>
  49.      <input class="submit" type="submit" value="提交"/>
  50.    </p>
  51.  </fieldset>
  52.  </form>
  53. </body>
  54. </html>

八、效果如下：

jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示的更多相关文章

  1. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  2. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  3. jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址

     一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...

  4. jquery validate表单验证插件的基本使用方法及功能拓展

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.    1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...

  5. jQuery Validate 表单验证插件----自定义一个验证方法

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

  6. jQuery Validate 表单验证插件----自定义校验结果样式

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

  7. jQuery Validate 表单验证插件----通过name属性来关联字段来验证，改变默认的提示信息，将校验规则写到 js 代码中

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...

  8. jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验

    一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...

  9. jquery validate 表单验证插件 代码

    /* 表单验证 */ var signupFormValidator = $("#signupForm").validate({ /* 自定义验证规则 */ rules : { o ...

随机推荐

  1. Qt Style Sheet实践（二）：组合框QComboBox的定制

    导读 组合框是一个重要且应用广泛的组件,一般由两个子组件组成:文本下拉单部分和按钮部分.在许多既需要用户选择.又需要用户手动输入的应用场景下,组合框能够很好的满足我们的需求.如我们经常使用的聊天软件Q ...

  2. ADO.NET学习系列（四）---窗体版的登录小程序

    1.需求分析:做一个登录的小程序,基于Winform的窗体小程序.基本要求:登录成功:弹框显示登录成功,登录失败就弹框显示失败. 扩展功能:登录次数超过3次,就”锁定“用户,提示登录错误次数过多,不能 ...

  3. P6 EPPM Installation and Configuration Guide 16 R1 April 2016

    P6 EPPM Installation and Configuration Guide 16 R1         April 2016 Contents About Installing and ...

  4. 怎样实现Web控件文本框Reset的功能

    在ASP.NET开发过程序,在数据插入之后,文本框TextBox控件需要Reset.如果只有一两个文件框也许没有什么问题,如果网页上有很多文本框,你就会有点问题了.再加上某一情形,一些文本框是有默认值 ...

  5. Winform开发框架之统计图表的实现

    在前面的一些随笔中,介绍了不少我的Winform框架的特性,上篇随笔<Winform开发框架之通用高级查询模块>对其中的通用高级模块进了一个整理说明,本篇继续介绍Winform开发框架重要 ...

  6. Equeue初识

    详细解说: http://www.cnblogs.com/netfocus/p/3595410.html 简单代码用法: Producer 端代码用法实例 和 Customer 端代码用法示例: ht ...

  7. win7局域网里输入正确密码也访问不了其他的机器

    1.本地安全策略-本地策略-安全选项-网络安全:LAN管理器身份验证级别,默认是“没有定义”,更改为“发送LM和NTLM响应! Windows 7系统自带的是一个统安全管理工具--本地安全策略,它可以 ...

  8. ActiveReports 报表控件官方中文入门教程 (1)-安装、激活以及产品资源

    本系列文章主要是面向初次接触 ActiveReports 产品的用户,可以帮助您在三天之内轻松的掌握ActiveReports控件的基本使用方法,包括安装.激活.创建报表.绑定数据源以及发布等内容.本 ...

  9. [moka同学笔记]YII2中发送邮件示例(转载)

    原文:http://yiilib.com/topic/675/Yii2%E4%B8%AD%E5%8F%91%E9%80%81%E9%82%AE%E4%BB%B6%E7%A4%BA%E4%BE%8B { ...

  10. saltstack学习笔记1 --安装

    salt官网:http://docs.saltstack.cn/zh_CN/latest/ 安装教程: - http://docs.saltstack.cn/zh_CN/latest/topics/i ...