jQuery Validate表单验证插件 添加class属性形式的校验


Posted in Javascript onJanuary 18, 2016

本文实例介绍了jQuery Validate 表单验证插件,添加class属性形式的校验,分享给大家供大家参考,具体内容如下

效果如下:

jQuery Validate表单验证插件 添加class属性形式的校验

一、jQuery表单验证插件,添加class属性形式的校验

<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表单验证大全》 ,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 #Javascript
理解JavaScript中Promise的使用
Jan 18 #Javascript
你不知道的高性能JAVASCRIPT
Jan 18 #Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 #Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 #Javascript
jquery validate表单验证的基本用法入门
Jan 18 #Javascript
jQuery添加删除DOM元素方法详解
Jan 18 #Javascript
You might like
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
JS重要知识点小结
2011/11/06 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
Vue实现todo应用的示例
2021/02/20 Vue.js
python改变日志(logging)存放位置的示例
2014/03/27 Python
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
文员个人的求职信范文
2013/09/26 职场文书
小学开学典礼主持词
2014/03/19 职场文书
应聘会计求职信
2014/06/11 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
单位婚育证明范本
2014/11/21 职场文书
南极大冒险观后感
2015/06/05 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
党员干部学习心得体会
2016/01/23 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS