首页 > web前端 > js教程 > 分享jquery插件--表单验证

分享jquery插件--表单验证

零下一度
发布: 2017-06-19 10:50:55
原创
1160 人浏览过
var regAction = (function () {
	var defaultOpts = {
		'regform' : 'regfrom',
		'username' : 'username',
		'userpwd' : 'userpwd',
		'confirmpwd' : 'confirmpwd',
		'checkcode' : 'checkcode',
		'accept' : 'accept',
		'errorTrips' : 'errorTrips',
		'channel' : 'channel',
		'loginAuto' : 'loginAuto',
		'btnAction' : 'btnAction'

	},
	isreg = 1;
	//去掉空格
	function trim(str) {
		return str.replace(//s+$|^/s+/g, '');
	}

	//检测email
	function isEmail(email) {
		return /^[/w/-/.]+@[/w/-/.]+(/./w+)+$/i.test(email)
	}

	//检测用户名
	function checkUserName(callback) {
		var optsObj = defaultOpts;
		var nameObj = optsObj.username;
		var errorTripsObj = optsObj.errorTrips;
		var value = trim(nameObj.val());
		nameObj.val(value);

		if (!isEmail(value)) {
			errorTripsObj.html('请输入正确的邮箱地址').css('visibility', 'visible');
			nameObj.focus();
			if (callback) {
				callback(false);
			}
		} else {
			$.ajax({
				url : '/index.php?ac=account&op=checkuser',
				dataType : 'json',
				type : 'post',
				data : {
					username : value
				},
				success : function (res) {
					if (res) {
						switch (res.string) {
						case '1':
							//errorTripsObj.html('该邮箱已经被注册').css('visibility', 'visible');
							optsObj.checkcode.hide();
							$("#jChkcode").hide();
							$("#jPrivacy").hide();
							$("#jRemeberBox").show();
							$("#repwd-box").hide();
							$("#jhd").text("登录快盘");
							$("#jcnt").text("随时随地查看文件");
							optsObj.btnAction.val("立即登录");
							isreg = 2;
							//nameObj.focus();
							if (callback) {
								//callback(false);
								callback(true);
							}
							nameObj.change(function () {
								optsObj.checkcode.show();
								$("#jChkcode").show();
								$("#jPrivacy").show();
								$("#jRemeberBox").hide();
								$("#repwd-box").show();
								$("#jhd").text("注册快盘");
								$("#jcnt").text("只需5秒,立即拥有15GB空间");
								optsObj.btnAction.val("立即注册");
								isreg = 1;
							});
							break;
						case '2':
						default:
							errorTripsObj.css('visibility', 'hidden');
							if (callback) {
								callback(true);
							}
						}
					} else {
						if (callback) {
							callback(true);
						}
					}
				}
			})
		}

	}
	//检测密码
	function checkPwd(callback) {
		var optsObj = defaultOpts;
		var userPwd = optsObj.userpwd;
		var username = optsObj.username;
		var confirmPwd = optsObj.confirmpwd;
		var errorTripsObj = optsObj.errorTrips;
		var loginAuto = optsObj.loginAuto;
		var len = trim(userPwd.val()).length;
		if (0 == len) {
			errorTripsObj.html('请填写登录密码').css('visibility', 'visible');
			userPwd.focus();
			return false;
		} else {
			if (len < 6 || len > 32) {
				errorTripsObj.html('密码应在6-32位字符内').css('visibility', 'visible');
				userPwd.focus();
				return false;
			} else {
				errorTripsObj.css('visibility', 'hidden');
				if (isreg === 1) {
					var reLen = trim(confirmPwd.val()).length;
					if (0 == reLen) {
						errorTripsObj.html('请填写重复登录密码').css('visibility', 'visible');
						confirmPwd.focus();
						return false;
					} else {
						if (userPwd.val() != confirmPwd.val()) {
							errorTripsObj.html('两次密码输入不一致').css('visibility', 'visible');
							confirmPwd.focus();
							return false;	
						} else {
							return true;
						}
					}
				} else {
					if (loginAuto.attr("checked") === "checked") {
						loginAuto.val("1");
					} else {
						loginAuto.val("0");
					}
					$.ajax({
						url : '/index.php?ac=account&op=login',
						type : 'post',
						dataType : 'json',
						data : {
							'username' : username.val(),
							'userpwd' : userPwd.val(),
							'rememberme' : loginAuto.val(),
							'isajax' : 'yes'
						},
						success : function (res) {
							if (res.state == 0) {
								errorTripsObj.html('用户名密码不匹配').css('visibility', 'visible');
								userPwd.focus();

								return false;
							} else {
								if(callback) {
									location.href = "/home.htm" ;
								}
							}
						}
					});
				}
			}
		}
	}

	//检测是否接受协议
	function checkAccpet() {
		var optsObj = defaultOpts;
		var acceptObj = optsObj.accept;
		var errorTripsObj = optsObj.errorTrips;
		if (acceptObj.attr('checked')) {
			return true;
		} else {
			errorTripsObj.html('请阅读并接受用户协议').css('visibility', 'visible');
			acceptObj.focus();
			return false;
		}
	}

	//验证码检测
	function checkCode() {
		var optsObj = defaultOpts;
		var checkcodeObj = optsObj.checkcode;
		var errorTripsObj = optsObj.errorTrips;
		if (checkcodeObj.length == 1 && "" == checkcodeObj.val()) {
			errorTripsObj.html('请输入验证码').css('visibility', 'visible');
			checkcodeObj.focus();
			return false;
		} else {
			return true;
		}
	}

	//注册表单提交
	function regFormSubmit(e, data) {
		checkUserName(function (f) {
			var result, checkPwdResult;
			if (isreg === 1) {
				defaultOpts.regform.attr("action", "/index.php?ac=account&op=registerhanlder");
				result = f && checkPwd() && checkAccpet() && checkCode();
				if (result) {
					defaultOpts.regform.unbind('submit').submit();
				}
			} else {
				checkPwd( f );
			}

		});
		if (!data) {
			return false;
		}
	}

	function bindEvent() {
		var optsObj = defaultOpts;
		optsObj.regform.submit($.proxy(regFormSubmit, this));
		optsObj.username.change(function () {
			checkUserName();
		})
		optsObj.userpwd.change($.proxy(checkPwd, this));
		if (isreg === 1) {
			optsObj.confirmpwd.change($.proxy(checkPwd, this));
		}
	}

	return {
		init : function (opts) {
			$.each(opts, function (i, n) {
				opts[i] = $("#" + n);
			});
			defaultOpts = $.extend(defaultOpts, opts);
			bindEvent();
		},
		checkEmailVlaue : function () {
			checkUserName();
		}
	};
})();
登录后复制
regAction.init({'regform':'regform','username':'email','errorTrips':'erroInfo','userpwd':'pwd','confirmpwd':'re-pwd','accept':'chkaccpet','checkcode':'checkcode','loginAuto':'login-auto','btnAction':'jAction'});//初始化
登录后复制

以上是分享jquery插件--表单验证的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板