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 ...
随机推荐
- telnet配置和telnet用法
搭建或配置网络环境时,经常会使用ping命令检查网络是否可达.有些时候Ping命令也不好使,比如因防火墙禁止或访问策略限制等.则可使用telnet测试映射端口或远程访问主机. Telnet协议是TCP ...
- Struts2 05---拦截器
一.Struts2拦截器原理: Struts2拦截器的实现原理相对简单,使用了aop思想和责任链模式,当请求struts2的action时,Struts 2会查找配置文件,并根据其配置实例化相对的拦截 ...
- bootstrap-multiselect 的简单使用，样式修改，动态创建option
1.bootstrap-multiselect 顾名思义基于bootstrap,bootstrap基于jquery,所以第一步,引入文件 bootstrap.css/ juery.js /bootst ...
- webpack模块机制浅析【一】
webpack模块机制浅析[一] 今天看了看webpack打包后的代码,所以就去分析了下代码的运行机制. 下面这段代码是webpack打包后的最基本的形式,可以说是[骨架] (function(roo ...
- eclipse出现错误：he type java.util.Map$Entry cannot be resolved. It is indirectly referenced
eclipse出现错误:he type java.util.Map$Entry cannot be resolved. It is indirectly referenced jre 换成6的就好了选 ...
- Oracle实战笔记（第七天）之PL/SQL进阶
一.控制结构 控制结构包括:判断语句(条件分支语句).循环语句.顺序控制语句三种. 1.条件分支语句 if--then:简单条件判断 --编写一个过程,可以输入一个雇员名,如果该雇员名的工资低于200 ...
- java1.8--Optional类
身为一名Java程序员,大家可能都有这样的经历:调用一个方法得到了返回值却不能直接将返回值作为参数去调用别的方法.我们首先要判断这个返回值是否为null,只有在非空的前提下才能将其作为其他方法的参数. ...
- 为mysql数据库建立索引
前些时候,一位颇高级的程序员居然问我什么叫做索引,令我感到十分的惊奇,我想这绝不会是沧海一粟,因为有成千上万的开发者(可能大部分是使用MySQL的)都没有受过有关数据库的正规培训,尽管他们都为客户做过 ...
- java ecplise配置
运行java项目首先配置java运行时环境:Window->Preferences->Java->Installed JREs 修改为jdk:C:\Program Files\Jav ...
- 用 chrome 调试 node.js 代码
1.全局安装 node-inspector cnpm install -g node-inspector 2.启动node项目入口文件,如 node --inspect index.js 3.控制台 ...