欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

分享jquery插件--表单验证

程序员文章站 2022-06-03 15:37:40
...
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插件--表单验证的详细内容,更多请关注其它相关文章!