JQuery 验证框架
设计完美,可扩展性好,以后就用他了.
/**//**
* @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());
}, }); }); test.html [xhtml] view plain copy
<!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>
<mce:script src="lib/jquery/jquery-1.3.2.min.js" mce_src="lib/jquery/jquery-1.3.2.min.js" ></mce:script>
<mce:script type="text/javascript" src="lib/jquery/jquery.validate.js" mce_src="lib/jquery/jquery.validate.js"></mce:script>
<mce:script type="text/javascript" src="lib/jquery/messages_cn.js" mce_src="lib/jquery/messages_cn.js"></mce:script>
<mce:script type="text/javascript" src="lib/jquery/formValidatorClass.js" mce_src="lib/jquery/formValidatorClass.js"></mce:script>
<mce: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;
} --></mce:style><style type="text/css" mce_bogus="1"> * {}{
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>
JQuery验证框架
JQuery 验证框架的更多相关文章
- jQuery验证框架 .
目录视图 摘要视图 订阅 “程序人生”中国软件开发者职业生涯调查 CSDN社区“三八节”特别活动 开发者职业生涯调查之未来 jQuery验证框架 分类: JQuery 2 ...
- 你应该了解的jquery 验证框架
Jquery validate 验证 具体查看附件中demo 主要是几种使用形式: 1.写在js中: $("#signupForm").validate({ rules: { fi ...
- jquery 验证框架的问题 remote的
1.dataType 类型:String 预期服务器返回的数据类型.如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML.在 1 ...
- jQuery UI框架
jQuery UI框架 1.oschina开源社区-jQuery教程 2.jQuery PrimeUI(推荐) 3.弹出框.警告框.提示框.拖动支持.位置固定.选项卡切换 4.Bootstrap框架( ...
- jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
- 用JQuery Validate框架，在IE8下验证报错问题解决
网站后台用了JQuery Validate框架,版本是jQuery Validation Plugin 1.8.1 因为用的时间比较久了,一直没有更新新版本. 最近公司信息录入员有调整,没有IE11浏 ...
- 【转】jquery validate验证框架与kindeditor使用需二次提交的问题
原文:http://blog.csdn.net/wlsyn/article/details/11536399在使用jquery的验证框架对kindeditor富文本编辑器进行验证的过程中,发现提 交时 ...
- 【转】jQuery Validate验证框架详解
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...
- 关于引入多个jquery冲突的问题（附一个很好用的validate前端验证框架及使用方法）
废话不多说,进入正题: 如果一个jsp中想要使用两个不同版本的jquery怎么办呢?客官往下看: <script src="${ctxStatic}/jquery/jquery-1.8 ...
随机推荐
- 网站搭建中，怎么区分ASP和PHP
1:空间支持上 ASP:程序要求比较低,空间只要支持ASP+access即可运行 PHP:配置要求比较高,空间需要支持PHP及数据库,而且程序和数据库是单独的,一般的 unix空间都是这种配置. 2: ...
- yourphp常用标签
方法/步骤 1 引入页面: 首页链接:{$site_url} 英文首页{$site_url}/en 面包屑导航: {:L(catpos)} {:L(home_font)} > 幻灯 ...
- 2018/1/28 每日一学 单源最短路的SPFA算法以及其他三大最短路算法比较总结
刚刚AC的pj普及组第四题就是一种单源最短路. 我们知道当一个图存在负权边时像Dijkstra等算法便无法实现: 而Bellman-Ford算法的复杂度又过高O(V*E),SPFA算法便派上用场了. ...
- [bx]和loop指令
body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...
- 我看过得最易懂的一段AOP的解释
http://blog.csdn.net/zhangliangzi/article/details/51648032 面向切面编程(AOP是Aspect Oriented Program的首字母缩写) ...
- python_如何为元组中每个元素命名
学生信息系统: (名字,年龄,性别,邮箱地址) 为了减少存储开支,每个学生的信息都以一个元组形式存放 如: ('tom', 18,'male','tom@qq.com' ) ('jom', 18,'m ...
- Ubuntu 11.10 Server下搭建Maven私服
安装Nexus服务的文档可以参考官方站点:http://www.sonatype.com/books/nexus-book/reference/install-sect-install.html ...
- Python-常用第三方库
python常用框架及第三方库(转载) 一.Web框架 1.Django: 开源web开发框架,它鼓励快速开发,并遵循MVC设计,比较庞大,开发周期短.Django的文档最完善.市场占有率最高.招聘职 ...
- sublime卡顿
sublime突然卡顿,输入字符要一两秒后才显示出来, 解决方法:首选项--插件控制--禁用插件 Git Gutter
- SSH反向连接及Autossh
参考文章 http://www.freeoa.net/osuport/netmanage/autossh-useage-refer_2831.html 接触Linux恐怕对SSH再熟悉不过了,还有sc ...