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 live( type, fn ) 委派事件实现
Oct 11 Javascript
JqGrid web打印实现代码
May 31 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
vue源码nextTick使用及原理解析
Aug 13 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汉字转换拼音的类
2013/06/18 PHP
header导出Excel应用示例
2014/01/24 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
分享3个php获取日历的函数
2015/09/25 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
php格式文件打开的四种方法
2018/02/24 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
python实现端口转发器的方法
2015/03/13 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
python通过http下载文件的方法详解
2019/07/26 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
python生成并处理uuid的实现方式
2020/03/03 Python
python实现飞船大战
2020/04/24 Python
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
室内设计自我鉴定
2013/10/15 职场文书
水务局局长岗位职责
2013/11/28 职场文书
医院检讨书范文
2014/02/01 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
小班秋游活动方案
2014/02/22 职场文书
指导教师评语
2014/04/26 职场文书
预防煤气中毒方案
2014/06/16 职场文书
车间安全生产管理制度
2015/08/06 职场文书
Python Numpy库的超详细教程
2022/04/06 Python
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技