js表单验证

没有写完善,但可供借鉴
<script type="text/javascript">
			/***
			 * 整合来写
			 * 事件绑定
			 * $('选择器').on('focus',function(){
			 * 	样式改变,提示清空,总判断值恢复
			 * });
			 * 写一个总判断值obj数组,必填选初始为false,选填项初始为true
			 * $('选择器').on('focusout',function(){
			 * 	获取属性
			 * 检查值,ajax
			 * 判断总值,设定提交
			 * 
			 * });
			 */
			var requireVal = ['username', 'phone', 'vertification', 'password', 'repassword', 'email'];
			var existVal= ['username', 'phone', 'email'];
			var checkRegVal = function(obj) {
				//这个valReg因为repassword的原因必须写在这个checkval里面呀
				var valReg = {
					username: "^(?![0-9]+$)[0-9A-Za-z]{3,10}$", //用户名正则,由6-10位纯字母或字母与数字组成(?![a-zA-Z]+$)
					phone: "^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+[0-9]{8})$",
					email: "^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-z])+",
					vertification: "^[0-9A-Za-z]{4,5}$", //验证码正则
					password: "^[a-zA-Z0-9_]{6,16}$", //密码正则
					repassword: "^" + $("input[name='password']").val() + "$", //验证密码
				}
				var myReg = new RegExp(valReg[obj.attr("name")]);
				if (!myReg.test(obj.val()) || myReg == "/^$/") //不匹配的情况
				{
					return false;
				} else {
					return true;
				}
			}
			var checkExistVal = function(obj) {
				var reVal = false;
				$.ajax({
					type: "post",
					url: "{:U('getVal')}", //把表单数据发送到ajax.jsp
					dataType: "json", //返回数据类型
					data: {
						"key": obj.attr('name'),
						"val": obj.val()
					},
					async: false,//注意此处哦~~~
					error: function(request) {
						obj.parent().nextAll('.msg').html("系统出错,刷新重试");
					},
					success: function(data) {
						reVal = data.status;
					}
				});
				return reVal;
			}
			$('input.form-control').on('change', function() {
				$(this).parent().removeClass('has-error');
				$(this).parent().removeClass('has-success');
				$(this).parent().nextAll('.msg').html("");
			});
			$("input.form-control").on('focusout', function() {
				targetName = $(this).attr("name");
				$this = $(this);
				if (checkRegVal($(this))) {
					if (targetName == 'phone') {
						$('#getverBtn').removeClass('disabled');
					}
					if (jQuery.inArray(targetName, existVal) > -1){
						if (checkExistVal($this) == 100) {
							$(this).parent().addClass('has-success');
						}else{
							$(this).parent().addClass('has-error');
						}
					} else {
						$(this).parent().addClass('has-success');
					}
				} else {
					if (targetName == 'phone') {
						$('#getverBtn').addClass('disabled');
					}
					$(this).parent().addClass('has-error');
					if (jQuery.inArray(targetName, requireVal) > -1) {
						//						$(this).focus();//只要没有输入正确就不让你离开
					}
				}
			});
			$('#getverBtn').bind('click', function() {
				$('#getverBtn').addClass('disabled');
				//ajax传送
				$.ajax({
					type: "POST",
					url: "{:U('getPhoneVer')}", 
					dataType: "json", //返回数据类型
					data: {
						"phone": $('#phone').val()
					},
					async: true,
					error: function(request) {
						$('#getverBtn').html("系统出错,刷新重试");
					},
					success: function(data) {
						if (data.status == "105122") {
							$(this).parent().nextAll('.msg').html("今日发送次数超限");
						} else {
							exDate = new Date();
							var m = exDate.getTime() + 60 * 1000;
							$.cookie('starting', m, {
								expires: 60 / 864e+2
							});
							showTime();
						}
					}
				});
			});
			/**
			 * 倒计时功能
			 */
			var showTime = function() {
				starting = $.cookie('starting') ? $.cookie('starting') : 0;
				if (starting > 0) {
					var o = new Date();
					var r = parseInt((starting - o.getTime()) / 1000 + 1);
					$('#getverBtn').html('请等待' + r + '秒');
					setTimeout(function() {
						showTime();
					}, 1000);
				} else {
					$('#getverBtn').removeClass('disabled');
					$('#getverBtn').html('重新获取');
				}
			}
		</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值