表单验证代码实例:jquery.validate.js表单验证插件
jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法。使用前请先下载必要的JQuery插件:jquery-1.4.2.min.js和jquery.validate.min.js。
下面演示如何使用jquery.validate.js插件进行表单的验证。
这是HTML表单:
<form id="regFrom" name="regFrom">
<input type="submit" value="测试validion插件"/><p/>
<div>用户名:<input type="text" id="userName" name="userName"/></div><div style="float:left;"></div>
<div>密码:<input type="text" id="password" name="password" minlength="3"/></div><div style="float:left;"></div>
<div>确认密码:<input type="text" id="repassword" name="repassword" minlength="3"/></div><div style="float:left;"></div>
<div>问题:<input type="text" id="question" name="question"/></div><div style="float:left;"></div>
<div>答案:<input type="text" id="answer" name="answer"/></div><div style="float:left;"></div>
<div>真实姓名:<input type="text" id="realName" name="realName"/></div><div style="float:left;"></div>
<div>证件号码:<input type="text" id="cardNumber" name="cardNumber"/></div><div style="float:left;"></div>
<div>手机:<input type="text" id="mobilePhone" name="mobilePhone"/></div><div style="float:left;"></div>
<div>电话:<input type="text" id="phone" name="phone"/></div><div style="float:left;"></div>
<div>E-mail:<input type="text" id="email" name="email"/></div><div style="float:left;"></div>
<div>邮编:<input type="text" id="zipCode" name="zipCode"/></div><div style="float:left;"></div>
<input type="hidden" id="isUserNameExist"/>
</form>
这是我的表单验证代码:
$(document).ready(function() {
$.validator.setDefaults({
submitHandler : function(form) {
form.submit();
}
});
// 中文字两个字节
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]);
}, "<font color='red'>请确保输入的值在3-15个字节之间(一个中文字算2个字节)</font>");
// 用户名是否存在
jQuery.validator.addMethod("isUserNameExist", function(value, element) {
var flag = $.ajax({
type : "POST",
url : "validateServlet",
data : "username=" + value,
async : false,
success : function(msg) {
alert("返回数据: " + msg);
}
}).responseText;
return this.optional(element) || flag == 1;
}, "<font color='red'>该用户不存在</font>");
// 身份证号码验证
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
return this.optional(element) || isIdCardNo(value);
}, "<font color='red'>请正确输入您的身份证号码</font>");
// 字符验证
jQuery.validator.addMethod("userName", function(value, element) {
return this.optional(element)
|| /^[\u0391-\uFFE5\w]+$/.test(value);
}, "<font color='red'>用户名只能包括中文字、英文字母、数字和下划线</font>");
// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
return this.optional(element)
|| (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
.test(value));
}, "<font color='red'>请正确填写您的手机号码</font>");
// 电话号码验证
jQuery.validator.addMethod("isPhone", function(value, element) {
var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
return this.optional(element) || (tel.test(value));
}, "<font color='red'>请正确填写您的电话号码</font>");
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "<font color='red'>请正确填写您的邮政编码</font>");
$(regFrom).validate({
rules : {
userName : {
required : true,
userName : true,
byteRangeLength : [3, 15],
isUserNameExist : true
},
password : {
required : true
},
repassword : {
required : true,
equalTo : "#password"
},
question : {
required : true
},
answer : {
required : true
},
realName : {
required : true
},
cardNumber : {
isIdCardNo : true
},
mobilePhone : {
isMobile : true
},
phone : {
isPhone : true
},
email : {
required : true,
email : true
},
zipCode : {
isZipCode : true
}
},
messages : {
userName : {
required : "<font color='red'>请填写用户名</font>",
byteRangeLength : "<font color='red'>用户名必须在3-15个字符之间(一个中文字算2个字符)</font>",
isUserNameExist : "<font color='red'>该用户不存在</font>"
},
password : {
required : "<font color='red'>请填写密码</font>",
minlength : jQuery
.format("<font color='red'>至少输入{0}个字符.</font>")
},
repassword : {
required : "<font color='red'>请填写确认密码poluoluo</font>",
equalTo : "<font color='red'>两次密码输入不相同</font>",
minlength : jQuery
.format("<font color='red'>至少输入{0}个字符.</font>")
},
question : {
required : "<font color='red'>请填写您的密码提示问题</font>"
},
answer : {
required : "<font color='red'>请填写您的密码提示答案</font>"
},
realName : {
required : "<font color='red'>请填写您的真实姓名</font>"
},
email : {
required : "<font color='red'>请输入一个Email地址</font>",
email : "<font color='red'>请输入一个有效的Email地址</font>"
}
},
errorPlacement : function(error, element) {
error.appendTo(element.parent());
},
success : function(label) {
// set as text for IE
label.html("<font color='green'>OK!</font>");
},
focusInvalid : false,
onkeyup : false
});
// 输入框获得焦点时,样式设置
$('input').focus(function() {
if ($(this).is(":text") || $(this).is(":password"))
$(this).addClass('focus');
if ($(this).hasClass('have_tooltip')) {
$(this).parent().parent().removeClass('field_normal')
.addClass('field_focus');
}
});
// 输入框失去焦点时,样式设置
$('input').blur(function() {
$(this).removeClass('focus');
if ($(this).hasClass('have_tooltip')) {
$(this).parent().parent().removeClass('field_focus')
.addClass('field_normal');
}
});
});
表单验证代码实例:jquery.validate.js表单验证插件的更多相关文章
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- jQuery.validate.js表单验证插件
jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...
- jquery.validate.js使用id验证控件
jquery.validate.js默认的是元素的name. 例如:<input name="username" id="username" size=& ...
- jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- jquery validate.js表单验证的基本用法入门
这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript&quo ...
- 【转】jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- [转]jquery.validate.js表单验证
原文地址:https://www.cnblogs.com/si-shaohua/p/3780321.html 一.用前必备官方网站:http://bassistance.de/jquery-plugi ...
- 转:jquery validate.js表单验证
这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码代码如下: <script type="text/javascript" ...
- jquery.validate.js表单验证 jquery.validate.js的用法
jquery.validate.js这个插件已经用了2年多了,是一个不可多得的表单验证最方便快捷的插件.基于jquery的小插件,基本小白一学就会上手,对于项目表单页面比较多,元素比较多的校验,该插件 ...
随机推荐
- linux文件上传
租了个服务器,要把自己打的war包打上去发布,服务器是linux的(本机是mac).以前都是用wget命令,把需要上传的东西先放到github上面再在服务器上用wget命令下载.最近不知道什么原因,w ...
- linux shell学习笔记
一 变量 声明变量: my_var='ddd'使用变量: ${my_var}设置为只读变量: readonly my_var删除变量: unset my_var 注意只读变量不能被删除 变量类型:( ...
- -Dmaven.multiModuleProjectDirectory system propery is not set问题解决
-Dmaven.multiModuleProjectDirectory system propery is not set问题解决 eclipse中使用maven插件的时候,运行run as mave ...
- avalon2学习教程09循环操作
avalon2的循环指令的用法完全改变了.avalon最早期从knockout那样抄来ms-each,ms-with,分别用于数组循环与对象循环.它们都是针对元素内容进行循环.后来又从angular那 ...
- diocp_tcp_client单元源码与注释
(* * Unit owner: d10.天地弦 * blog: http://www.cnblogs.com/dksoft * homePage: www.diocp.org * * 2015-02 ...
- [转载] 2. JebAPI 之 jeb.api.dex
本文转载自: https://www.zybuluo.com/oro-oro/note/142842 1. jeb.api.dex.Dex 这个类代表正在被JEB处理的DEX文件. 要想更好的了解这个 ...
- 【POJ2949】Word Rings(最大平均值环)
题意:给定N个字符串,如果A串的最后两个字母跟B串的前两个字母相同它们就能连接. 求一个由字符串组成的首尾相连的环,使(字符串总长度/字符串个数)最大. n<=100000 len<=10 ...
- ASP.NET ZERO Core Application 学习笔记
地址:https://www.aspnetzero.com/Documents/Development-Guide-Core 1.恢复数据库 MIGRATOR CONSOLE APPLICATION ...
- jquery学习--属性操作
学习jquery很长一段时间了,知道对属性操作的方式为: $("#xx1").attr("xx2"); //获取属性值 $("#xx1"). ...
- R语言--数据预处理
一.日期时间.字符串的处理 日期 Date: 日期类,年与日 POSIXct: 日期时间类,精确到秒,用数字表示 POSIXlt: 日期时间类,精确到秒,用列表表示 Sys.date(), date( ...