看着网上关于表单验证写的太凌乱 业余时间写了一个表单插件 供大家鉴赏与指教吧
<!DOCTYPE html>
<html>
<head>
<title>验证表单插件</title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding:0;color:#000;}
.content{width:700px;height:400px;margin:-200px 0 0 -350px;position:absolute;top:50%;left:50%;background:#ccc;padding-top:20px;}
p{line-height:22px;overflow:hidden;padding:5px;}
span,input{display:inline-block;vertical-align:top;}
span{text-align:right;width:150px;}
input{margin:0 10px;padding:2px;border:solid 1px #000;}
input.focus{
border:solid 1px red;
}
input.current{border:solid 1px green;}
.error{text-align:left;color:red;width:350px;display:none;}
h2{text-align: center;margin-bottom:15px;}
.btn{background:blue;color:white;border:0;display:inline-block;width:60px;height:25px;line-height:25px;text-align:center;text-decoration:none;margin-left:10px;}
</style>
<script type="text/javascript" src="jquery-1.9.js"></script>
<script src="validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".content").validate({
'cID':'oBtn',
'PassI':'password',
'PassII':'confirmpassword'
});
//参数为 提交按钮 ID为oBtn PassII PassI 分别为 密码的属性值(可选)
})
</script>
</head>
<body>
<div class="content">
<h2>表单验证</h2>
<p><span>用户名：</span><input type="text" name="userName" reg="\w+"><span class="error">用户名只能是字母、数字和下划线</span></p>
<p><span>密码：</span><input type="password" name="password" reg="[a-zA-Z]+"><span class="error">密码只能是字母</span></p>
<p><span>再一次输入密码：</span><input type="password" name="confirmpassword" reg="[a-zA-Z]+" algin="验证两次密码是否一致"><span class="error">密码只能是字母,与之前输入的密码相同</span></p>
<p><span>邮箱：</span><input type="text" name="email" reg="\w+@[a-zA-Z0-9]+(\.[a-z]{2,6}){1,3}"><span class="error">输入邮箱不合法</span></p>
<p><span>QQ：</span><input type="text" name="qq" reg="[1-9]\d{4,12}"><span class="error">QQ号只能是数字</span></p>
<p><span>年龄：</span><input type="text" name="age" reg="([1-9][2-9])|(100)"><span class="error">年龄只能是数字，并且大于12岁，小于100岁</span></p>
<p><span>电话：</span><input type="text" name="tell" reg="0[1-9]\d{1,2}-[1-9]\d{6,7}"><span class="error">区号-数字</span></p>
<p><span>身份证：</span><input type="text" name="IDcard" reg="\d{15}$)|(^\d{17}([0-9]|X)"><span class="error">身份证号码为15位或者18位</span></p>
<p><span></span><a id="oBtn" class="btn" href="javascript:;">验证</a></p>
</div>
</body>
</html>
/**
* 表单验证插件
* @authors 侠客行(554094147@qq.com)
* @date 2013-06-13 14:21:26
* @version $Id$
*/
;(function($){
$.fn.extend({
validate:function(options){
var defaults={
'PassI':'',
'PassII':''
};//默认是空
var opts = $.extend({},defaults,options);
var _input = this.find('input');//取所有的input
_input.each(function(){
var _reg = $(this).attr('reg');
var _this = $(this);
if(_reg){
(function(_reg){
_this.focus(function(){
_this.addClass("focus");
});
_this.blur(function(){
checkPass(_this,_reg)
})
})(_reg)
}
})
function fnCheck(_input){
if(opts.PassI){
if(_input.attr('name')==opts.PassII)
{
var oPass1=document.getElementsByName(opts.PassI)[0];
if(_input.val()==oPass1.value)
{
return true;
}
else
{
return false;
}
}
}
return true;
}
function checkPass(OText,_reg){
var re = new RegExp('^('+_reg+')$');
var oNext = OText.next();
if(re.test(OText.val())){
if(fnCheck){
if(fnCheck(OText)){
OText.addClass('current');
oNext.hide();
return true;
}
else{
OText.addClass("focus");
oNext.css('display','inline-block');
return false;
}
}
else{
OText.addClass('current');
oNext.hide();
return true;
}
}
else{
OText.addClass("focus");
oNext.css('display','inline-block');
return false;
}
}
$('#'+opts.cID).click(function(){
var error=false; //假设没有填错
_input.each(function(){
var _reg = $(this).attr('reg');
if(_reg){
if(!checkPass(_input,_reg)){
error=true;
}
}
})
if(error){
return false //验证失败
}
})
}
})
})(jQuery)