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 相关文章推荐
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
AngularJs表单验证实例详解
May 30 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 Javascript
JavaScript实现下拉列表
Jan 20 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
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
javascript中的几个运算符
2007/06/29 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
python os模块简单应用示例
2019/05/23 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
python IDLE添加行号显示教程
2020/04/25 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
2014年医药代表工作总结
2014/11/22 职场文书
作弊检讨书范文
2015/05/06 职场文书
投诉信格式范文
2015/07/02 职场文书
详解SQL的窗口函数
2022/04/21 Oracle