IFE-2016-SP_task30_verify_input_multi

by baishusama

HTML

<fieldset>
	<legend>用户信息填写</legend>
	<div class="wrapper">
		<label for="name">用户名</label>
		<input type="text" id="name" />
		<span class="info">必填项。长度为 4 ~ 16 个字符。</span>
	</div>
	<div class="wrapper">
		<label for="pwd">密码</label>
		<input type="password" id="pwd">
		<span class="info">必填项。长度为 4 ~ 16 个字符，必须包含数字和字母。</span>
	</div>
	<div class="wrapper">
		<label for="repeatPwd">密码确认</label>
		<input type="password" id="repeatPwd">
		<span class="info">必填项。必须和上方密码一致。</span>
	</div>
	<div class="wrapper">
		<label for="email">邮箱</label>
		<input type="text" id="email">
		<span class="info">必填项。需为 [email protected] 格式。</span>
	</div>
	<div class="wrapper">
		<label for="mobile">手机</label>
		<input type="number" id="mobile">
		<span class="info">必填项。</span>
	</div>
	<input type="button" id="verify" value="提交" />
</fieldset>

CSS

body {
	margin: 0;
}

fieldset {
	margin: 20px 10px;
	border-radius: 6px;
}

.wrapper {
	overflow: hidden;
	padding: 5px;
}

.wrapper label {
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 2%;
	width: 20%;
	text-align: right;
	line-height: 22px;
}

.wrapper input {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float: right;
	border: 1px solid #555;
	border-radius: 3px;
	padding: 0 6px;
	width: 80%;
	line-height: 20px;
	outline: none;
}

.wrapper .info {
	display: none;
	float: right;
	padding: 3px 0;
	width: 80%;
	color: #ddd;
	font-size: 12px;
}

.wrapper input:focus + .info {
	display: block;
}

.wrapper .invalid {
	border-color: red;
}

.wrapper .valid {
	border-color: yellowgreen;
}

.wrapper .invalid + .info {
	display: block;
	color: red;
}

.wrapper .valid + .info {
	display: block;
	color: yellowgreen;
}

#verify {
	float: right;
	margin-right: 5px;
	border: 1px solid steelblue;
	border-radius: 3px;
	padding: 0 6px;
	width: 10%;
	background-color: steelblue;
	color: #fff;
	line-height: 20px;
	outline: none;
}

JavaScript

/*--------------------
    通用函数
--------------------*/

// 解决 IE 和非 IE 浏览器在事件绑定方面的兼容性
function addEventHandler(elem, event, handler) {
    if (elem.addEventListener) {
        elem.addEventListener(event, handler, false);
    } else if (elem.attachEvent) {
        elem.attachEvent("on" + event, handler);
    } else {
        elem["on" + event] = handler;
    }
}

// 用于偷懒的 $ 方法
function $(selector) {
    var elem = null;
    if (selector.indexOf('#') === 0) {
        elem = document.getElementById(selector.slice(1));
    } else if (selector.indexOf('.') === 0) {
        elem = document.getElementsByClassName(selector.slice(1));
    }
    return elem;
}

// 用于添加类名
function addClassName(elem, newClassName) {
    if (elem.className.split(/\s/).indexOf(newClassName) === -1) {
        elem.className += (' ' + newClassName);
        return true;
    }
    return false;
}
// 用于删除类名
function removeClassName(elem, oldClassName) {
    var names = elem.className.split(/\s/);
    var index = names.indexOf(oldClassName);
    if (index !== -1) {
        names.splice(index, 1);
        elem.className = names.join(' ');
        return true;
    }
    return false;
}

/*--------------------
    DOM
--------------------*/

var verifyBtn = $("#verify");
var nameDOM = $("#name");
var pwdDOM = $("#pwd");
var repeatPwdDOM = $("#repeatPwd");
var emailDOM = $("#email");
var mobileDOM = $("#mobile");
// var infoDOM = nameDOM.nextElementSibling;


/*--------------------
    提示信息
--------------------*/

var invalidCases = {
    "isEmpty": "不能为空！",
    "containWhiteSpace": "不能包含空格！",
    "invalidChar": "只能由数字、字母、特殊符号组成！",
    "invalidLength": "长度要在 4 ~ 16 个字符内！",
    "unconsistentWithPwd": "需要和第一次输入的密码一致！",
    "invalideEmail": "格式非法！需为 [email protected] 格式。",
    "invalideMobileNumber": "号码非法！需为 11 位数字。"
};

var validCases = {
    "用户名": "用户名格式正确",
    "密码": "密码可用",
    "密码确认": "两次密码输入一致",
    "邮箱": "邮箱格式正确",
    "手机": "手机格式正确"
};

/* 寄生组合式继承 */
function inheritPrototype(subType, superType) {
 ...