一、下载依赖包

网盘下载：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. mysql一个事务中有DDL语句的binlog情况

      在autocommit=1的情况下,开启一个事务,如果里面有DDL语句,那么事务开始到DDL语句之间的DML语句都会被提交.再开启新的事务.可以从binlog中看出   session语句: 09 ...

  2. SpringMVC基础——一个简单的例子

    一.导入 jar 包 二.配置 web.xml 文件 <servlet> <servlet-name>dispatcherServlet</servlet-name> ...

  3. 【转】MSMQ 微软消息队列 简单 示例

    MSMQ它的实现原理是:消息的发送者把自己想要发送的信息放入一个容器中(我们称之为Message),然后把它保存至一个系统公用空间的消息队列(Message Queue)中:本地或者是异地的消息接收程 ...

  4. ToDoList：一款非常优秀的任务管理软件 —— 工具类

    ToDoList是一款非常优秀的任务管理软件,用户可以方便地组织和安排计划.这是一个开源的项目,很多细节都考虑到了,推荐大家使用~ ToDoList 帮你把要做的事情列出来,一项一项,类似思维导图. ...

  5. CRC16校验码生成

    /// <summary> /// 计算CRC-16 /// </summary> /// <param name="data"></pa ...

  6. [PE结构分析] 9.导出表 IMAGE_EXPORT_DIRECTORY

    typedef struct _IMAGE_EXPORT_DIRECTORY { DWORD Characteristics; // 未使用,总为0 DWORD TimeDateStamp; // 文 ...

  7. .NET（Core）应用程序模型及未来

  8. 奇怪的float

    我在项目的实践中遇到了这样的一个问题 <div class="main"> <p>aaaa</p> <p>bbbb</p> ...

  9. javascript函数中的三个技巧【一】

    在学习javascript中,函数是非常重要的,现在我来谈谈对函数的理解以及在工作和用法中的一些技巧 技巧一. [作用域安全的构造函数] 构造函数其实就是一个使用new操作调用的函数 function ...

  10. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...