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有关的小细节
Apr 02 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
vuex actions异步修改状态的实例详解
Nov 06 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
用缓存实现静态页面的测试
2006/12/06 PHP
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
初识ThinkPHP控制器
2016/04/07 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
jquery.validate分组验证代码
2011/03/17 Javascript
jquery等待效果示例
2014/05/01 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
JQuery球队选择实例
2015/05/18 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
对python 命令的-u参数详解
2018/12/03 Python
python中嵌套函数的实操步骤
2019/02/27 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
linux面试题参考答案(1)
2016/01/22 面试题
导游词之岳阳楼
2019/09/25 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python