- 浏览: 149012 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (137)
- JavaScript (23)
- get post (0)
- SSH (4)
- Hibernate (1)
- cmd (2)
- 火狐 IE (1)
- 中英文环境模板下载 (1)
- 日期 (0)
- 其他总结 (5)
- 正则校验 (3)
- Sql Server (0)
- FreeMarker (1)
- 继承 (1)
- SQL (2)
- ORACLE -- SQL Server -- Access 常见Sql语句的区别 (1)
- ORACLE -- SQL Server -- Access 常见Sql语句的区别 (0)
- 解决int和Integer不能互转 (0)
- 原子类 (1)
- Final,finally,finalize的区别 (1)
- Web前端 (12)
- Reader InputStream (1)
- 线程 (1)
- JDBC (1)
- AJAX (3)
- Linux (2)
- 素数 (1)
- 接口-----继承 (1)
- 数据库查询性能优化 (1)
- Spring MVC3 深入了解 (1)
- JS (18)
- log4j简介 (1)
- Java序列化的机制和原理 (0)
- allowTransparency属性 (1)
- 测试类 (1)
- CSS (14)
- JQuery (10)
- 多线程 (1)
- 数据库 (2)
- Spring 注解 (1)
- JSTL标签库 (1)
- HTML (8)
- 界面设计 (4)
- 测试 (4)
- 职业生涯 (1)
- 数据可视化 (1)
- UI设计 (3)
- eclipse怎样生成javadoc (2)
- redis memcache 比较 (1)
- Windows 8系统IE10无法安装Flash Player插件的解决办法 (1)
- IE7 问题 (1)
- 常用JS验证 (1)
- Hadoop,MapReduce学习步骤 (1)
- 开始-运行-命令大全 (1)
- jQuery与ExtJS优缺点比较 (1)
- Oracle (1)
- 文档转换 (1)
- Maven与Ant比较 (1)
最新评论
-
谁说我不是会员:
很给力的文章,通俗易懂
Get请求和Post请求的区别 -
Spirit_eye:
请问一个图片按钮怎么置灰
按钮置灰跟按钮不显示
学习jQuery Validation,于是手写一公共范例,并收藏以便后用
验证操作类formValidatorClass.js
测试页index.html
http://jquery.bassistance.de/validate/demo/themerollered.html
验证操作类formValidatorClass.js
/**//** * @author ming */ $(document).ready(function(){ /**//* 设置默认属性 */ $.validator.setDefaults({ submitHandler: function(form) { form.submit(); } }); // 字符验证 jQuery.validator.addMethod("stringCheck", function(value, element) { return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value); }, "只能包括中文字、英文字母、数字和下划线"); // 中文字两个字节 jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { var length = value.length; for(var i = 0; i < value.length; i++){ if(value.charCodeAt(i) > 127){ length++; } } return this.optional(element) || ( length >= param[0] && length <= param[1] ); }, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)"); // 身份证号码验证 jQuery.validator.addMethod("isIdCardNo", function(value, element) { return this.optional(element) || isIdCardNo(value); }, "请正确输入您的身份证号码"); // 手机号码验证 jQuery.validator.addMethod("isMobile", function(value, element) { var length = value.length; var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/; return this.optional(element) || (length == 11 && mobile.test(value)); }, "请正确填写您的手机号码"); // 电话号码验证 jQuery.validator.addMethod("isTel", function(value, element) { var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-12345678 return this.optional(element) || (tel.test(value)); }, "请正确填写您的电话号码"); // 联系电话(手机/电话皆可)验证 jQuery.validator.addMethod("isPhone", function(value,element) { var length = value.length; var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/; var tel = /^\d{3,4}-?\d{7,9}$/; return this.optional(element) || (tel.test(value) || mobile.test(value)); }, "请正确填写您的联系电话"); // 邮政编码验证 jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "请正确填写您的邮政编码"); //开始验证 $('#submitForm').validate({ /**//* 设置验证规则 */ rules: { username: { required:true, stringCheck:true, byteRangeLength:[3,15] }, email:{ required:true, email:true }, phone:{ required:true, isPhone:true }, address:{ required:true, stringCheck:true, byteRangeLength:[3,100] } }, /**//* 设置错误信息 */ messages: { username: { required: "请填写用户名", stringCheck: "用户名只能包括中文字、英文字母、数字和下划线", byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)" }, email:{ required: "请输入一个Email地址", email: "请输入一个有效的Email地址" }, phone:{ required: "请输入您的联系电话", isPhone: "请输入一个有效的联系电话" }, address:{ required: "请输入您的联系地址", stringCheck: "请正确输入您的联系地址", byteRangeLength: "请详实您的联系地址以便于我们联系您" } }, /**//* 设置验证触发事件 */ focusInvalid: false, onkeyup: false, /**//* 设置错误信息提示DOM */ errorPlacement: function(error, element) { error.appendTo( element.parent()); }, }); });
测试页index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>jQuery验证</title> <script src="lib/jquery/jquery-1.3.2.min.js" ></script> <script type="text/javascript" src="lib/jquery/jquery.validate.js" mce_src="lib/jquery/jquery.validate.js"></script> <script type="text/javascript" src="lib/jquery/messages_cn.js"></script> <script type="text/javascript" src="lib/jquery/formValidatorClass.js"></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> </head> <body> <form class="submitForm" id="submitForm" method="get" action=""> <fieldset> <legend>表单验证</legend> <p> <label for="username">用户名</label> <em>*</em><input id="userName" name="username" size="25" /> </p> <p> <label for="email">E-Mail</label> <em>*</em><input id="email" name="email" size="25" /> </p> <p> <label for="phone">联系电话</label> <em>*</em><input id="phone" name="phone" size="25" value="" /> </p> <p> <label for="address">地址</label> <em>*</em><input id="address" name="address" size="22"> </p> <input class="submit" type="submit" value="提交"/> </p> </fieldset> </form> </body> </html>
http://jquery.bassistance.de/validate/demo/themerollered.html
发表评论
-
LABjs、RequireJS、SeaJS 哪个最好用?为什么?
2014-03-14 11:15 554LABjs、RequireJS、SeaJS 哪 ... -
jQuery Chosen Plugin
2013-10-30 11:33 1980jQuery Chosen Plugin <!-- ... -
jQuery验证控件jquery.validate.js使用说明+中文API
2013-10-09 16:15 553jQuery验证控件jquery.validate.js使用说 ... -
使用jquery的9个误区
2013-08-09 11:24 606使用jquery的9个误区 链接地址 http://ww ... -
jquery中prop()方法和attr()方法的区别
2013-06-28 15:47 613jquery中prop()方法和attr()方法的区别 jq ... -
树插件--zTree
2013-05-08 17:48 705树插件--zTree http://www.ztree.m ... -
Jquery 学习笔记5 图片轮转切换效果练习
2013-05-08 09:30 869Jquery 学习笔记5 图片轮转切换效果练习 http:/ ... -
JQuery教程---隐藏*显示
2012-12-11 15:23 705<html> <head> & ... -
JQuery教程
2012-12-11 11:07 643http://www.w3school.com.cn ...
相关推荐
让jquery validation plugin 支持zepto
jQuery-Validation例,jQuery-Validation例子,子jQuery-Validation例子,asp.net页面制作,可运行。
JQuery validation plugin学习资料
jQuery Validation表单验证插件实例合集,是锋利的JQuery第七章中的一个典型实例,一步步向大家讲解如何使用基于jQuery的表单验证插件jquery.validate.js和jquery.validate.messages_cn.js的使用方法,一共包含了7个...
学习jQuery Validation,于是手写一公共范例,并收藏以便后用,里面附有测试代码,需要的朋友一起来测试。
jQuery Validation 参考手册
jquery-validation-1.9.0是一款优秀的form表单验证插件,此资源主要为某篇博客服务,如有需要还请下载。整个压缩包无法上传,有需要请留言
jqueryvalidation 官方网站内容,本人编译的CHM文件,方便查询学习。
jQuery Validation Plug最新版。解决jQuery1.6不能工作的问题在IE 6,7,8,9
Validation Engine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合。
jQuery 插件使客户端表单验证变得容易,同时仍然提供了大量的自定义选项。如果您要从头开始构建新的东西,或者当您试图将某些东西集成到具有大量现有标记的现有应用程序中时,它都是一个不错的选择。该插件捆绑了一...
jquery.validate Validation .js验证框架 帮助 手册 文档.chm 版本 方面查询 (一)、可选项( options ) 1 (二)插件方法 (jQuery validation) 6 (三、四)选择器及实用工具 (jQuery validation) 7 四、实用工具...
jquery-validation-1.8.0.zip jquery-validation-1.8.0.zip jquery-validation-1.8.0.zip
jquery-validation-1.8.0.rar jquery-validation-1.8.0.rar
轻量的jQuery Validation
jQuery 验证插件 jquery-validation-1.11.1
jQuery Validation Plugin是一款基于jQuery的表单数据校验插件,使用非常简单方便,该插件版本为1.13.0。
文中涉及的代码 博文链接:https://singyuenyip.iteye.com/blog/1861268
jQuery validation 1.6.zip 包括全部类库和一些demo。