jquery 验证

70 篇文章 0 订阅
44 篇文章 0 订阅

之前同事写的,扩展了一些,还可以随时添加新的东西。

account.js

/*!
 * Date Set Account
 * Version: 1.0.0
 * Create: By Wang Xiu Fang
 * Date: 02-01-2014 11:07:48 (GMT Time)
 */
var ele = {
	userName: 'userName',
	realName: 'realName',
	pwd: 'password',
	myMobile: 'mobile',
	myEmail: 'email'
};
var authRegExp = {
    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)
    decimal: "^([+-]?)\\d*\\.\\d+$", //浮点数
    decimal1: "^[1-9]\\d*.\\d*|0.\\d*[1-9]\\d*$", //正浮点数
    decimal2: "^-([1-9]\\d*.\\d*|0.\\d*[1-9]\\d*)$", //负浮点数
    decimal3: "^-?([1-9]\\d*.\\d*|0.\\d*[1-9]\\d*|0?.0+|0)$", //浮点数
    decimal4: "^[1-9]\\d*.\\d*|0.\\d*[1-9]\\d*|0?.0+|0$", //非负浮点数(正浮点数 + 0)
    decimal5: "^(-([1-9]\\d*.\\d*|0.\\d*[1-9]\\d*))|0?.0+|0$", //非正浮点数(负浮点数 + 0)
    ascii: "^[\\x00-\\xFF]+$", //仅ACSII字符
    chinese: "^[\\u4e00-\\u9fa5]+$", //仅中文
    color: "^[a-fA-F0-9]{6}$", //颜色
    date: "^\\d{4}(\\-|\\/|\.)\\d{1,2}\\1\\d{1,2}$", //日期
    email: "^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$", //邮件
   	idcard: "^[1-9]([0-9]{14}|[0-9]{17})$",   //身份证
    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地址
    letter: "^[A-Za-z]+$", //字母
    letterL: "^[a-z]+$", //小写字母
    letterU: "^[A-Z]+$", //大写字母
    mobile: "^((13[0-9])|(15[^4,\\D])|(18[0-9]))\\d{8}$", //手机
    password: "^.*[A-Za-z0-9\\w_-]+.*$", //密码
    fullNumber: "^[0-9]+$", //数字
    picture: "(.*)\\.(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga)$", //图片
    qq: "^[1-9]*[1-9][0-9]*$", //QQ号码
    rar: "(.*)\\.(rar|zip|7zip|tgz)$", //压缩文件
    tel: "^[0-9\-()()]{7,18}$", //电话号码的函数(包括验证国内区号,国际区号,分机号)
    url: "^http[s]?:\\/\\/([\\w-]+\\.)+[\\w-]+([\\w-./?%&=]*)?$", //url
    username: "^[A-Za-z0-9_\\-\\u4e00-\\u9fa5]+$", //用户名
    realname: "^[A-Za-z\\u4e00-\\u9fa5]+$", // 真实姓名
    zipcode: "^\\d{6}$", //邮编
    notempty: "^\\S+$" //非空
};

var authRules = {
	isCard: function(str){//身份证
		return new RegExp(authRegExp.idcard).test(str);
	},
	isUserName: function(str){//用户名
		return new RegExp(authRegExp.username).test(str);
	},
	isRealName: function(str){
		return new RegExp(authRegExp.realname).test(str);
	},
	isEmail: function(str){//邮箱
		return new RegExp(authRegExp.email).test(str);
	},
	isMobile: function(str){
		return new RegExp(authRegExp.mobile).test(str);;
	},
	isTel: function(str){
		return new RegExp(authRegExp.tel).test(str);
	},
	isText: function(str){//不能有非法字符
		var auth = /<\/[^>]*>/;
		return auth.test(str);
	},
	isPwd: function(str){
		return new RegExp(authRegExp.password).test(str);
	},
	isDecimal: function(str){//大于等于零,小于等于99999999.99 的数字
		var auth = /^[0-9]+(.[0-9]{1,3})?$/;
		return auth.test(str);
	},
	isPercent: function(str){//两位小数的百分数
		var auth = /^[0-9]+(.[0-9]{1,3})?$/;
		return auth.test(str);
	},
	isInteger: function(str){//正整数
		return new RegExp(authRegExp.integer).test(str);
	},
	isDate: function(str){
		return new RegExp(authRegExp.date).test(str);
	},
	isBankCard: function(str){//银行账号
		var auth = /^\d{19}$/g;
		return auth.test(str);
	}

}

function pwdStrength(obj){//密码强度
	var a = -1;
	if(obj.match(/[a-z]/ig)){
		a++;
	}
	if(obj.match(/[0-9]/ig)){
		a++;
	}
	if(obj.match(/(.[^a-z0-9])/ig)){
		a++;
	}
	if(obj.length<6 && a>0){
		a--;
	}
	$('.passw').removeClass('passd');
	if (a > -1) {
		$('#passw2_1').addClass('passd');
	}
	if (a > 0) {
		$('#passw2_2').addClass('passd');
	}
	if (a > 1) {
		$('#passw2_3').addClass('passd');
	}
}

function checkEle(options){
	this.obj = options.obj;
	this.id = options.id;
	this.class = options.class;
	this.name = options.name;
	this.cn_name = options.cn_name;   //名称
	this.minLen = options.minLen;
	this.maxLen = options.maxLen;
	this.eqval = options.eqval;   //相等
	this.url = options.url;
	this.ajax = options.ajax;
	//是否为空
	this.isNull = function(){return this.obj.val() !='';};
	//下拉菜单是否选择
	this.isSelect = function(){return this.obj.children('option:selected').val() != 0};
	//二次输入是否相等
	this.isEqual = function(){return this.obj.val() == this.eqval;};
	//是否有效   符合正则要求
	this.isValid = function(){
		if(this.class == ele.userName){
		   return authRules.isUserName(this.obj.val())
		};
		if(this.class == ele.realName){
			return authRules.isRealName(this.obj.val())
		};
		if(this.class == ele.pwd){
			return authRules.isPwd(this.obj.val());
		};
		if(this.class == ele.myMobile){
			return authRules.isMobile(this.obj.val());
		};
		if(this.class == ele.myEmail){
			return authRules.isEmail(this.obj.val());
		};
		
		return true;
	};
	

	
	//进行长度验证
	this.isLength = function(){var len = this.obj.val().length;	if(this.minLen>len || this.maxLen<len){return false;}return true;};
	//是否已存在
	this.isUsed = function(){var data = new Array();data['url'] = this.url;	data['val'] = this.obj.val();this.sendPhp(data);};
	//进行ajax验证
	this.sendPhp = function(arr){
		$.post(arr['url'],{name:this.name,val:arr['val']},function(data){
			if(data.res == 3){
				showMsg('该'+cn_name+'输入错误');
			}
			if(data.res == 0){
				showMsg('该'+cn_name+'已被使用');
			}
			if(data.res == 1){
				showMsg('该'+cn_name+'不存在');
			}
		},'json')
	};	
	
	
	
	//弹出提示消息
	this.showMsg = function(msg){$('<div class="warn_msg"><div class="sj_bod"><div class="sj_bg"></div></div><div class="tip"><em class="span"></em>'+msg+'</div></div>').appendTo(this.obj.parent());};
	if(this.isNull() == false){this.showMsg(this.cn_name+'不能为空');return false;};
	if(this.isSelect()== false){this.showMsg('请选择'+this.cn_name);return false;};
	if(this.eqval != undefined){if(this.isEqual() == false){this.showMsg(this.cn_name+'输入有误');return false;}};
	if(this.maxLen !=undefined){if(this.isLength() == false){this.showMsg('请输入'+this.minLen+'到'+this.maxLen+'位的'+this.cn_name);return false;}};
	if(this.isValid() == false  ){this.showMsg(this.cn_name+'格式不正确');return false;}
	if(this.ajax == true){this.isUsed()}

	return true;
	
	
}


function Phonereg(options){
	this.url = options.url;
	this.msgObj = options.msgObj;
	this.num = options.num;
	this.sendNum = function(){$.post(this.url,{pnum:this.num})};
	this.sendNum();
}

function setTimer(time,obj){
	var cnt = $(obj).text();
	var n = time;

	$(obj).html('发送中');
	$(obj).attr("disabled","disabled");
	var timer = setInterval(function(){
		
		$(obj).html(n+'秒后可再次'+cnt);
		n--;
		if(n<1){
		
			$(obj).html(cnt);
			$(obj).removeAttr("disabled");
			clearInterval(timer);
		}
	},1000);
}

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="account.js"></script>
</head>

<body>
<form class="form2" id="form2" name="form2" action="/user/reg" method="post">
<ul>
     <li><em>用户名:</em><input type="text" class="input" value="" name="phusername" id="phusername"></li>

    <li><em>设置密码:</em><input type="password" class="input" οnkeyup="pwdStrength(this.value);"  name="phpwd" id="phpwd">
    <div style="height: 36px; width:300px; float:left;margin-left:20px; display:none" id="passw2">
            <div class="passw" id="passw2_1"><span class="pw"></span><span class="pt">弱</span></div>
            <div class="passw" id="passw2_2"><span class="pw"></span><span class="pt">中</span></div>
            <div class="passw" id="passw2_3"><span class="pw"></span><span class="pt">强</span></div>
    </div>
    </li>
    <li><em>确认密码:</em><input type="password" class="input" value="" name="phpwd2" id="phpwd2"></li>
    <li class="phnum"><em>手机号:</em><input class="input" type="text" name="phone" id="phone">
        <div class="getphcode_btnbox"><span class="leftbg"></span><button type="button" id="getphonecode">获取激活码</button><span class="rightbg"></span></div>
        <span class="codemsg">*24小时内最多获取三次验证码</span>
    </li>
    <li class="phcode"><em>激活码:</em><input class="input" type="text" name="phcode" id="phcode">
        <span class="codemsg">*请输入手机上获得的验证码</span>
    </li>
    
    <li><em> </em><input type="submit" name="submit" value="立即注册" class="regbtn submit">
    <div class="anotherlg">
        <label><input type="checkbox" value="1" name="1" checked="checked"> <a href="javascript:void(0);" οnclick="showItems()">我已经阅读并同意使用条款及隐私条款 </a></label>
    </div>
</li>
</ul>
</form>

<script type="text/javascript">
$(function(){
	$('#getphonecode').click(function(){
		checkEle({obj:$('#phone'),cn_name:'手机号码'});
		if($('#phone').parent().find('.warn_msg').length == 0){
			var options = {num : $('#phone').val(), msgObj : $('.codemsg'), url :'/user/smsMsg'};
			Phonereg(options);
			setTimer(60,'#getphonecode');
		}
	});
	$('#phone').blur(function(){
		var options = {obj:$(this),ajax:true,name:'phone',cn_name:"手机号码",url:"/user/checkReg"};
		checkEle(options);
	});
	$('#email').blur(function(){
		var options = {obj:$(this),ajax:true,name:'email',cn_name:"邮箱",url:"/user/checkReg"};
		checkEle(options);
	});
	
	$('#username, #phusername').blur(function(){
		var options = {obj:$(this),ajax:true,name:'username',cn_name:"用户名",url:"/user/checkReg",minLen:2,maxLen:20};
		checkEle(options);
	});
	$('#pwd, #phpwd').blur(function(){
		var options = {obj:$(this),cn_name:"密码",minLen:6,maxLen:16};
		checkEle(options);
	});
	$('#pwd2').blur(function(){
		var options = {obj:$(this),cn_name:"确认密码",eqval:$('#pwd').val()};
		checkEle(options);
	});
	$('#phpwd2').blur(function(){
		var options = {obj:$(this),cn_name:"确认密码",eqval:$('#phpwd').val()};
		checkEle(options);
	});
	$('#phcode').blur(function(){
		var options = {obj:$(this),cn_name:"激活码"};
		checkEle(options);
	});
	$('#code').blur(function(){

		var options = {obj:$(this),cn_name:"验证码"};
		checkEle(options);
	});
	$('.submit').click(function(event){
		if($('.warn_msg').length != 0){event.preventDefault();}
	});
});


//获取焦点
$('input,select').focus(function(){
	$(this).parent().find('.warn_msg').remove();
});	



var showItems = function(){
	var win = window.open('','','width=800,height=500,resizable=no,scrollbars=1');
	var text = $('.itembox').html();
	win.document.open("text/html","replace");
	win.document.writeln('<link type="text/css" href="/style/default/user.css" rel="stylesheet"/>');
	win.document.write(text);
	win.document.close();
};
</script>

<div class="itemwrap" style="display:none">
<div class="itembox">
    <div class="itemcnt">
        <h1>XX网站使用条款</h1>
        <h1>XX网站使用条款</h1>
        <h1>XX网站使用条款</h1>
        <h1>XX网站使用条款</h1>
    </div>
  </div>
</div>
</body>
</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值