Home > Web Front-end > JS Tutorial > body text

Share jquery plug-in--form validation

零下一度
Release: 2017-06-19 10:50:55
Original
1131 people have browsed it
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();
		}
	};
})();
Copy after login
regAction.init({'regform':'regform','username':'email','errorTrips':'erroInfo','userpwd':'pwd','confirmpwd':'re-pwd','accept':'chkaccpet','checkcode':'checkcode','loginAuto':'login-auto','btnAction':'jAction'});//初始化
Copy after login

The above is the detailed content of Share jquery plug-in--form validation. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template