表单校验与美化-优快云博客

本文链接：https://blog.youkuaiyun.com/study_doudou/article/details/14090171
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单校验完善</title>
<style type="text/css">
table{
	border:#999 solid 1px;
	width:700px;
	border-collapse:collapse;/*单边框*/
}
table th,table td{
	border:#0C9 solid 1px;
}
table th{
	background-color:#09F;
}
table td{
	background-color:#CFF;
}
#confirm{
	margin-left:122px;
}
.errorInfo{
	display:none;
	color:#F00;
}
.normal{
	border:#999 solid 1px;
}
.focus{
	border:#09F solid 2px;
}
.redError{
	border:#F00 solid 2px;
}
</style>
</head>
<!--
1,表单页面  table格式化表单
2,css美化表单
3,动态效果
	在页面加载时，将所有的输入框加入默认的框线以及定义获取焦点时的框线颜色
4,脚本+dom完成表单的校验功能
	4.1进行内容校验，通过正则表达式完成，并通过框线的颜色给用户提示
    4.2通过分析发现代码的重复性很高，所以把相同的部分进行封装，不同的地方进行抽取
-->
<script type="text/javascript">
//输入框加入框线
function inputColor(input)
{
	input.className = "normal";
	input.onfocus = function()
	{
		this.className = "focus";
	}
}
window.onload = function()
{
	with(document.forms[0])
	{
		inputColor(user);
		inputColor(pwd);
		inputColor(rePwd);
		inputColor(mail);
		
	}
}
//用户名校验，老式校验，代码冗长
/*function checkName(userNode)
{
	var value  = userNode.value;
	var nameReg = /^\w{3,5}$/;
	var userDiv = document.getElementById("userDiv");
	if(nameReg.test(value))
	{
		userNode.className = "normal";
		userDiv.style.display = "none";
		
	}
	else
	{
		userNode.className = "redError";
		userDiv.style.display = "block";
	}
}*/
//校验方法
function check(inputNode,reg,div)
{
	var b = false;
	var value = inputNode.value;
	var div = document.getElementById(div)
	if(reg.test(value))
	{
		inputNode.className = "normal";
		div.style.display = "none";
		b = true;
	}
	else
	{
		inputNode.className = "redError";
		div.style.display = "block";
		return false;
	}
	return b;
}
//用户名校验
function checkName(userNode)
{
	var nameReg = /^\w{3,5}$/;
	return check(userNode,nameReg,"userDiv");
}
//密码校验
function checkPwd(pwdNode)
{
	var pwdReg = /^[0-9a-z]{3,5}$/i;
	return check(pwdNode,pwdReg,"pwdDiv");
}
//确认密码校验
function checkRePwd(rePwd)
{
	var b = false;
	var pwd2 = rePwd.value;
	var pwd1 = document.forms[0].pwd.value;
	//alert(pwd1);
	var rePwdDiv = document.getElementById("rePwdDiv");
	//alert(rePwdDiv.nodeName);
	if(pwd2==pwd1)
	{
		rePwd.className = "normal";
		rePwdDiv.style.display = "none";
		b = true;
	}
	else
	{
		rePwd.className = "redError";
		rePwdDiv.style.display = "block";
	}
	return b;
}
//校验邮箱
function checkMail(mailNode)
{
	//var value = mailNode.value;
	//alert(value);
	var mailReg = /^\w+@\w+(\.\w+)+$/;
	return check(mailNode,mailReg,"mailDiv");
}
//表单第二次校验，加强安全注册
function checkAll(formNode)
{
	with(formNode)
	{
		
		if(checkName(user) && checkPwd(pwd) && checkRePwd(rePwd) && checkMail(mail))
			return true;
		else
			return false;
	}
		
}
</script>
<body>
	<form action="www.baidu.com" method="get" οnsubmit=" return checkAll(this)">
    	<table>
        	<tr>
            	<th>注册表单</th>
            </tr>   
            <tr>
            	<td>
                	<div>用户名</div>
                    <div><input type="text" name="user" οnblur="checkName(this)"/></div>
                    <div class="errorInfo" id="userDiv">用户名错误,请安要求输入</div>
                    <div>用户名必须是3-5位,由数字(0-9),字母(a-z),下划线(_)组成</div>
                </td>
            </tr>
            <tr>
            	<td>
                	<div><span>密码</span> <span id="confirm">确认密码</span></div>
                    <div>
                    	<input type="text" name="pwd" οnblur="checkPwd(this)"/>
                        <input type="text" name="rePwd" οnblur="checkRePwd(this)"/>
                    </div>
                    <div class="errorInfo" id="pwdDiv">密码格式错误,请按规范输入</div>
                    <div class="errorInfo" id="rePwdDiv">两次密码输入的不一致</div>
                    <div>密码必须是3-5位,由数字(0-9),字母(a-z)组成</div>
                </td>
            </tr>
            <tr>
            	<td>
                	<div>邮件地址</div>
                	<div><input type="text" name="mail" οnblur="checkMail(this)"/></div>
                    <div class="errorInfo" id="mailDiv">邮件地址错误,请按要求输入</div>
                </td>
            </tr>
            <tr>
            	<th><input type="submit" value="提交" /></th>
            </tr>
        </table>
    </form>
</body>
</html>
表单校验html+js
