记录封装一些常用函数与表单验证

兼容addEventListener函数

function addEventListeners(ele, event, fn) {
	if (ele.addEventListener) {
		ele.addEventListener(event, fn, false);
	} else {
		ele.attachEvent('on' + event, fn.bind(ele));
	}
}

表单

var RegList = {
	regChinese: /^[\u0391-\uFFE5]+$/, // 验证是否为中文
	regEmail: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, // 邮箱正则表达式
	regZipCode: /^[1-9][0-9]{5}$/, // 邮政编码,开头不能为0,共6位
	regTelNum: /^((0\d{2,3})-)(\d{7,8})(-(\d{2,}))?$/, // 座机号码正则表达式 区号-电话号码-分机号
	regMobileNum: /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/, // 11位手机号码正则表达式
	regCreditCode: /^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g, // 统一社会信用代码
	// regPwd: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[1-9])(?=.*[\W]).{6,16}$/, // 密码长度6~16位,必须有一位小写字母,一位大写字母,一位数字,一位特殊字符
	regPwd: /^(?=.*[a-zA-Z])(?=.*[1-9])(?=.*[\W]).{6,16}$/, // 密码长度6~16位,必须有一位字母,一位数字,一位特殊字符
}

var VerifyFactory = {
	isNull: function(str) { // 验证是否为空
		return str != '';
	},
	fullName: function(str) { // 姓名
		return RegList.regChinese.test(str);
	},
	email: function(str) { // 邮箱
		return RegList.regEmail.test(str);
	},
	zipCode: function(str) { //邮编
		return RegList.regZipCode.test(str);
	},
	telNumber: function(str) { // 座机号码
		return RegList.regTelNum.test(str);
	},
	mobileNumber: function(str) { // 手机号码
		return RegList.regMobileNum.test(str);
	},
	creditCode: function(str) { // 统一社会信用代码
		return RegList.regCreditCode.test(str);
	},
	password: function(str) { // 密码
		return RegList.regPwd.test(str);
	},
	confirmPwd: function(str1, str2) { // 确认密码
		return str1 === str2;
	},
};


function FormCheck(checklist, submit) {
	this.checklist = checklist.checkList;
	this.submit = submit.submit;
	this.addEvent();
}
FormCheck.prototype.addEvent = function() {
	this.checklist.forEach(function (item) {
		var el = item.el;
		if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') {
			addEventListeners(el, 'focus', function() {
				item.successCallback(this);
			});
			addEventListeners(el.nextElementSibling, 'click', function() {
				el.focus();
			});
			addEventListeners(el, 'blur', function() {
				if (this.value === '') {
					item.errorCallback(this);
				} else {
					if (item.pwdEl) {
						var pwdEl = item.pwdEl;
						if (VerifyFactory[item.regType](pwdEl.value, this.value)) { // 判断正确
							item.successCallback(this);
						} else {
							item.errorCallback(this);
						}
					} else {
						if (VerifyFactory[item.regType](this.value)) { // 判断正确
							item.successCallback(this);
						} else {
							item.errorCallback(this);
						}
					}
				}
			})
		}
	});
	
	var submits = this.submit;
	var btn = document.querySelector(submits.btn);
	addEventListeners(btn, 'click', function() {
		submits.callback();
	});
}

// 实例化调用
new FormCheck({
	checkList: [{
		regType: 'isNull', // 验证是否为空
		el: document.querySelector('#js_username'),
		errorCallback: function(el) {
			checkTips(el, 'tipsErr', '*用户名不能为空');
		},
		successCallback: function(el) {
			checkTips(el, 'tips', '');
		}
	}, {
		regType: 'email', // 验证邮箱
		el: document.querySelector('#js_password'),
		errorCallback: function(el) {
			el.value === '' ? checkTips(el, 'tipsErr', '*密码不能为空') : checkTips(el, 'tipsErr', '*输入密码格式不正确');
		},
		successCallback: function(el) {
			checkTips(el, 'tips', '');
		}
	}]
}, {
	submit: {
		btn: '#js_login',
		callback: function() {

		}
	}
})