一、下载依赖包

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

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

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

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

四、详细代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中</title>

 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

 <script src="lib/jquery.validate.js" type="text/javascript"></script>

<script src="lib/jquery.metadata.js" type="text/javascript"></script>

<style type="text/css">

* { font-family: Verdana; font-size: 96%; }

label { width: 10em; float: left; }

label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }

p { clear: both; }

.submit { margin-left: 12em; }

em { font-weight: bold; padding-right: 1em; vertical-align: top; }

</style>

  <script type="text/javascript">

  $(document).ready(function(){

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

  });

  </script>

</head>

<body>

 <form class="cmxform" id="commentForm" method="get" action="">

 <fieldset>

   <legend>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中</legend>

   <p>

     <label for="cusername">姓名</label>

     <em>*</em><input id="cusername" name="username" size="25"  class="{validate:{required:true, minlength:2}}" />

   </p>

   <p>

     <label for="cemail">电子邮件</label>

     <em>*</em><input id="cemail" name="email" size="25"   class="{validate:{required:true, email:true}}"  />

   </p>

   <p>

     <label for="curl">网址</label>

     <em>  </em><input id="curl" name="url" size="25"  value=""   class="{validate:{url:true}}" />

   </p>

   <p>

     <label for="ccomment">你的评论</label>

     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="{validate:{required:true}}" ></textarea>

   </p>

   <p>

     <input class="submit" type="submit" value="提交"/>

   </p>

 </fieldset>

 </form>

</body>

</html>

默认校验规则：

(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

默认提示：

messages: {

    required: "This field is required.",

    remote: "Please fix this field.",

    email: "Please enter a valid email address.",

    url: "Please enter a valid URL.",

    date: "Please enter a valid date.",

    dateISO: "Please enter a valid date (ISO).",

    dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",

    number: "Please enter a valid number.",

    numberDE: "Bitte geben Sie eine Nummer ein.",

    digits: "Please enter only digits",

    creditcard: "Please enter a valid credit card number.",

    equalTo: "Please enter the same value again.",

    accept: "Please enter a value with a valid extension.",

    maxlength: $.validator.format("Please enter no more than {0} characters."),

    minlength: $.validator.format("Please enter at least {0} characters."),

    rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),

    range: $.validator.format("Please enter a value between {0} and {1}."),

    max: $.validator.format("Please enter a value less than or equal to {0}."),

    min: $.validator.format("Please enter a value greater than or equal to {0}.")

},

五、效果图如下：

六、注意：

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

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中（2）</title>

 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

 <script src="lib/jquery.validate.js" type="text/javascript"></script>

<script src="lib/jquery.metadata.js" type="text/javascript"></script>

<style type="text/css">

* { font-family: Verdana; font-size: 96%; }

label { width: 10em; float: left; }

label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }

p { clear: both; }

.submit { margin-left: 12em; }

em { font-weight: bold; padding-right: 1em; vertical-align: top; }

</style>

  <script type="text/javascript">

  $(document).ready(function(){

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

  });

  </script>

</head>

<body>

 <form class="cmxform" id="commentForm" method="get" action="">

 <fieldset>

   <legend>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中（2）</legend>

   <p>

     <label for="cusername">姓名</label>

     <em>*</em><input id="cusername" name="username" size="25"  class="{validate:{required:true, minlength:2, messages:{required:'请输入姓名', minlength:'请至少输入两个字符'}}}" />

   </p>

   <p>

     <label for="cemail">电子邮件</label>

     <em>*</em><input id="cemail" name="email" size="25"   class="{validate:{required:true, email:true, messages:{required:'请输入电子邮件', email:'请检查电子邮件的格式'}}}"  />

   </p>

   <p>

     <label for="curl">网址</label>

     <em>  </em><input id="curl" name="url" size="25"  value=""   class="{validate:{url:true, messages:{url:'请检查网址的格式'}}}" />

   </p>

   <p>

     <label for="ccomment">你的评论</label>

     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="{validate:{required:true, messages:{required:'请输入您的评论'}}}" ></textarea>

   </p>

   <p>

     <input class="submit" type="submit" value="提交"/>

   </p>

 </fieldset>

 </form>

</body>

</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. IE11之F12 Developer Tools--DOM Explorer

    使用DOM Explorer工具查看网页的DOM状态.检查HTML结构和CSS样式,并测试更改以解决显示问题.这可以在元素位置错误或行为异常时帮助你诊断问题,然后解决问题. DOM Explorer图 ...

  2. [Bootstrap]7天深入Bootstrap(1)入门准备

    由于申请了一个域名,一个云主机,开始弄个人网站. 发现Bootstrap非常方便,和重要,故开始学习与分享关于Bootstrap的技术. 推个广告 个人网站:http://www.neverc.cn ...

  3. 重新想象 Windows 8 Store Apps (45) - 多线程之异步编程: IAsyncAction, IAsyncOperation, IAsyncActionWithProgress, IAsyncOperationWithProgress

    [源码下载] 重新想象 Windows 8 Store Apps (45) - 多线程之异步编程: IAsyncAction, IAsyncOperation, IAsyncActionWithPro ...

  4. 重新想象 Windows 8 Store Apps (60) - 通信: 获取网络信息, 序列化和反序列化

    [源码下载] 重新想象 Windows 8 Store Apps (60) - 通信: 获取网络信息, 序列化和反序列化 作者:webabcd 介绍重新想象 Windows 8 Store Apps ...

  5. 世界上不存在什么RedBSD,SuseBSD或者ArchBSD，Turb...

    世界上不存在什么RedBSD,SuseBSD或者ArchBSD,TurboBSD之类的东西.

  6. php学习笔记：利用gd库生成图片，并实现随机验证码

    说明:一些基本的代码我都进行了注释,这里实现的验证码位数.需要用的字符串都可以再设置.有我的注释,大家应该很容易能看得懂. 基本思路: 1.用mt_rand()随机生成数字确定需要获取的字符串,对字符 ...

  7. 多准则决策模型-TOPSIS评价方法-源码

    ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 ...

  8. Java中处理异常throw和throws

    1.首先我们来了解什么是异常呢? 异常阻止当前方法或作用域继续执行的问题. 2.处理异常 说到处理异常,我们当然会想到 try catch finally 在java中我们会对异常的处理有更高的认识 ...

  9. html alert 的三种方式

    html alert 一共有三种方式. 第一种是最简单的直接在js的函数里alert("要输出的内容"); 这种直接就是一个弹出框,显示要输出的内容. 第二种是带选择的弹出框,弹出 ...

  10. [性能] Bean拷贝工具类性能比较

    Bean拷贝工具类性能比较 引言 几年前做过一个项目,接入新的api接口.为了和api实现解耦,决定将api返回的实体类在本地也建一个.这样做有两个好处 可以在api变更字段的时候保持应用稳定性 可以 ...