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

一、下载插件包。

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

二、jQuery表单验证插件----添加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表单验证插件----添加class属性形式的校验</title><script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script><script src="lib/jquery.validate.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();});</script></head>
<body><form class="cmxform" id="commentForm" method="get" action=""><fieldset><legend>jQuery表单验证插件----添加class属性形式的校验</legend><p><label for="cusername">姓名</label><em>*</em><input id="cusername" name="username" size="25" class="required" minlength="2" /></p><p><label for="cemail">电子邮件</label><em>*</em><input id="cemail" name="email" size="25"  class="required email" /></p><p><label for="curl">网址</label><em>  </em><input id="curl" name="url" size="25"  class="url" value="" /></p><p><label for="ccomment">你的评论</label><em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></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}.")
},

jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验相关推荐

html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
jquery validate表单验证插件
1 表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
jQuery Validate 表单验证插件
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑 ...
基于jQuery的表单验证插件：jValidate
网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...
JQuery.validationEngine表单验证插件
一.说明 JQuery.validationEngine表单验证控件功能强大,自带了样式显示模式: 1.字符类型:非空验证.最大长度.最小长度.相等判断.数字和空格.数字和英文字母 2.数字类型:数字 ...
基于jQuery的表单验证插件Validation Engine
Validation Engine是一款基于Jquery的js表单验证插件.相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合. 附件提供了该插件,解压密码为:im48 ...
jQuery validate表单验证demo
Query Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 官方文档 http://jqueryvalidation. ...

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

jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验相关推荐

最新文章

热门文章