您的位置：首页 > Web前端 > JavaScript

[JS 最简单简洁的插件] 表单验证

2013-08-11 18:19 459 查看 

<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<style>
body {
font-size:14px;
}
input{
outline:none;
}
</style>
</head>
<script src='http://code.jquery.com/jquery.js'></script>
<script>
(function($){
$.fn.check = function(){
// 正则汇总(可以自己补充!)
var exp = {
integer:"^-?[1-9]\\d*$",					//整数
integer1:"^[1-9]\\d*$",					//正整数
integer2:"^-[1-9]\\d*$",					//负整数
number:"^([+-]?)\\d*\\.?\\d+$",			//数字
number1:"^[1-9]\\d*|0$",					//正数（正整数 + 0）
number2:"^-[1-9]\\d*|0$",					//负数（负整数 + 0）
decmal:"^([+-]?)\\d*\\.\\d+$",			//浮点数
decmal1:"^[1-9]\\d*.\\d*|0.\\d*[1-9]\\d*$",　　	//正浮点数
decmal2:"^-([1-9]\\d*.\\d*|0.\\d*[1-9]\\d*)$",　 //负浮点数
email:"^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$", //邮箱
color:"^[a-fA-F0-9]{6}$",				//颜色
url:"^http[s]?:\\/\\/([\\w-]+\\.)+[\\w-]+([\\w-./?%&=]*)?$",	//url
chinese:"^[\\u4E00-\\u9FA5\\uF900-\\uFA2D]+$",					//仅中文
ascii:"^[\\x00-\\xFF]+$",				//仅ACSII字符
zipcode:"^\\d{6}$",						//邮编
ip4:"^(25[0-5]|2[0-4]\\d|[0-1]\\d{2}|[1-9]?\\d)\\.(25[0-5]|2[0-4]\\d|[0-1]\\d{2}|[1-9]?\\d)\\.(25[0-5]|2[0-4]\\d|[0-1]\\d{2}|[1-9]?\\d)\\.(25[0-5]|2[0-4]\\d|[0-1]\\d{2}|[1-9]?\\d)$",	//ip地址
http: "^http(s?):\/\/(?:[A-za-z0-9-]+\.)+[A-za-z]{2,4}(?:[\/\?#][\/=\?%\-&~`@[\]\':+!\.#\w]*)?$",
required:"^\\S+$",						//非空
picture:"(.*)\\.(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga)$",	//图片
rar:"(.*)\\.(rar|zip|7zip|tgz)$",								//压缩文件
qq:"^[1-9]*[1-9][0-9]*$",				//QQ号码
tel:"^(([0\\+]\\d{2,3}-)?(0\\d{2,3})-)?(\\d{7,8})(-(\\d{3,}))?$",	//电话号码的函数(包括验证国内区号,国际区号,分机号)
letter:"^[A-Za-z]+$",					//字母
letter1:"^[A-Z]+$",					//大写字母
letter2:"^[a-z]+$",					//小写字母
mobile: "(^13\\d{9}$)|(^1[58][0-35-9]\\d{8}$)",  // 手机号
currency: "^\\d+(\.\\d+)?$",                // 货币
username: "^[a-zA-Z]{1}[0-9a-zA-Z\_]+$",        // 用户名
};
// 判断数组是否为true
var isTrue = function(arr){
var result = true;
for(var k in arr){
if(!arr[k]){
result = false;
break;
}
}
return result;
}
// 正则验证函数
var myTest = function(datatype,input){
if( undefined != exp[datatype] ){
var r = new RegExp(exp[datatype]);
if( r.test(input) ) return true;
else                return false;
}
}
// 表单元素的默认样式
var setStyle = function(ele){
$(ele).css({
'border' : '1px solid #7F9DB9',
'background-color': 'white',
'padding': '2px 0px'
});
}

// ------------------------ 事件 ------------------------

var className   = 'mxx_check';                  // 要验证的表单元素的 class name
var attrCheck   = 'data-check';                 // 属性名: 要验证的表单元素的数据类型
var attrErr     = 'mxx_error';                  // 属性名: 不合法的表单元素的属性名
var bgColor     = {yes:'#FFF',no:'#FFFFD0'};    // 背景颜色
var borderColor = {yes:'#7F9DB9',no:'#FF8000'}; // 边框颜色

var form        = this;                         // 表单
var mxx_check   = $(form).find('.'+className);  // 表单元素

// 绑定事件 onblur: form元素
$(mxx_check).each(function(index,domEle){

setStyle(domEle);

$(this).blur(function(){
var ele = this;
var checks = $(ele).attr(attrCheck);
if(checks.indexOf(',')){
checks = checks.split(',');
}

var id = $(ele).attr('id');
var msg = [];
var result = true;

// 循环检测
for(var i=0; i<checks.length; i++){
var rs = myTest(checks[i],$(ele).val());
if(!rs){
$(ele).css({'background':bgColor['no'],'border-color':borderColor['no']});
msg[id] = false;
}else{
$(ele).css({'background':bgColor['yes'],'border-color':borderColor['yes']});
msg[id] = true;
}
}

// 当前表单元素的数据是否合法
result = isTrue(msg);
if(!result && $(ele).attr(attrErr)==undefined){ // 不合法且未设置错误标记
$(ele).attr(attrErr,1);
}
if(result){ // 合法则去除错误标记
$(ele).removeAttr(attrErr);
}
});
});
// 绑定事件 onsubmit: form
$(form).submit(function(){
// 对所有要求验证的表单元素 focus 然后 blur, 也就是强制验证了一遍
for(var n=0; n < $(mxx_check).length; n++){
$(mxx_check).eq(n).focus().blur();
}

var msg = []; // 所有表单元素的检测结果
var result = true; // 此表单是否正确提交

// 检查每个表单元素是否存在错误
$(mxx_check).each(function(i,e){
msg[i] = true;
if( $(e).attr(attrErr) == 1 ){
msg[i] = false;
}
});
// console.log(msg);

// 决定表单是否提交
result = isTrue(msg);
if(!result)
return false;

});

// ------------------------ 事件 ------------------------

}//
})(jQuery);

// 调用验证插件
$(function(){
$('#form1').check();
});
/* 要验证的表单必须有这三个属性:
id='*' --> form和input都要有
class='mxx_check' --> 用于绑定事件
data-check='email,zipcode' --> 多个验证规则用逗号隔开
*/
</script>

<body>

<form action='' method='get' id='form1'>
Email: <input type='text' name='a' id='a' value=''placeholder='邮箱' class='mxx_check' data-check='email' />
<br />
整 数: <input type='text' name='b' id='b' value='' placeholder='整数' /> <!--不验证-->
<br />
邮 编: <input type='text' name='c' id='c' value='' placeholder='邮编' class='mxx_check' data-check='zipcode' />
<br />
<input type='submit' value='提交' />
</form>

</body>
</html>


建议不和HTML5的表单验证的相关属性混用, 比如一个form中, 只用一种验证方式, 要么是HTML5的 required / pattern , 要么是本插件!!


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航