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高级程序设计 DOM学习笔记
Sep 10 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
图片旋转、鼠标滚轮缩放、镜像、切换图片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
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
Python argv用法详解
2016/01/08 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
python opencv摄像头的简单应用
2019/06/06 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
单位工作证明格式模板
2014/10/04 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
护士心得体会范文
2016/01/25 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
Python制作春联的示例代码
2022/01/22 Python