jquery插件验证表单

最新推荐文章于 2024-10-21 09:17:12 发布

侠客行

最新推荐文章于 2024-10-21 09:17:12 发布

阅读量876

点赞数

分类专栏： web 前端开发

本文链接：https://blog.csdn.net/aspwzmuma/article/details/9087639

版权

web 前端开发专栏收录该内容

71 篇文章 0 订阅

订阅专栏

看着网上关于表单验证写的太凌乱业余时间写了一个表单插件供大家鉴赏与指教吧

<!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)