Dom编程（表单的校验）

最新推荐文章于 2020-05-18 10:12:02 发布

Lola的笔记

最新推荐文章于 2020-05-18 10:12:02 发布

阅读量406

点赞数 1

本文链接：https://blog.csdn.net/melinda23096/article/details/38927991

版权

html+css+javascript 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

表单的校验：

<!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:1px solid #CCC;
	width:50%;
}
th{
	background-color:#9CF;
}
.name{
	display:inline-block;
	width:80px;
}
.warn{
	color:red;
	display:none;
}
.mes{
	color:#999;
	font-size:14px;
	margin-left:90px;
	margin-top:5px;
}
input{
	margin-right:15px;
}


.focus{
	border:2px ridge #C7DEF3;
}
.normal{
	border:1px inherit #DBDBDB;
}
.error{
	border:2px solid red;
}
</style>

<script type="text/javascript">
//改变焦点选框颜色，因为浏览器自带，所以注释掉。
/*function colorInput(input){
	input.className = "normal";
	input.onfocus = function(){
		this.className = "focus";	
	}
}
window.onload = function(){
	with(document.forms[0]){
		colorInput(user);
		colorInput(psw);
		colorInput(repsw);
		colorInput(mail);
	}
}
*/
//抽取出来的方法：
function check(input,reg,warnID){
	var b = false;
	var warn = document.getElementById(warnID);
	if(reg.test(input.value)){
		input.className = "normal";
		warn.style.display = "none";
		b = true;
	}else{
		input.className = "error";
		warn.style.display = "inline-block";
	}
	return b;
}

//原始方法
/*function checkUser(userNode){
	var value = userNode.value;
	var reg = /^\w{3,5}$/;
	var warn = document.getElementById("userWarn");
	if(reg.test(value)){
		userNode.className = "normal";
		warn.style.display = "none";
	}else{
		userNode.className = "error";
		warn.style.display = "inline-block";
	}
}*/
function checkUser(input){
	var reg = /^\w{3,5}$/;
	return check(input,reg,"userWarnID");
}

function checkPsw(input){
	var reg = /^[a-zA-Z0-9]{3,5}$/;
	return check(input,reg,"pswWarnID");
}

function checkRepsw(input){
	var b = false;
	var psw = document.getElementsByName("psw")[0].value;
	var repsw = input.value;
	var warn = document.getElementById("repswWarnID");
	if(repsw==psw){
		input.className = "normal";
		warn.style.display = "none";
		b = true;
	}else{
		input.className = "error";
		warn.style.display = "inline-block";
	}
	return b;
}

function checkMail(input){
	var reg = /^\w+@\w+(\.\w+)+$/;
	return check(input,reg,"mailWarnID");
}

function checkForm(formNode){
	with(formNode){
		if(checkUser(user) && checkPsw(psw) && checkRepsw(repsw) && checkMail(mail)){
			event.returnValue = true;
		}else{
			event.returnValue = false;
		}	
	}
}
</script>
</head>

<body>
<form οnsubmit="checkForm(this)">
<table cellspacing="0" cellpadding="20px">
<tr>
    <th>
    	用户注册
    </th>
</tr>

<tr>
    <td>
    	 <span class="name">用户名</span>
        <input type="text" name="user" οnblur="checkUser(this)" />
        <span class="warn" id="userWarnID">用户名错误，请按要求填写</span>
        <div class="mes">3-5个字符(字母a-zA-Z，数字0-9，下划线_)</div>
    </td>
</tr>

<tr>
    <td>
    	 <span class="name">密码</span>
    	 <input type="password" name="psw" οnblur="checkPsw(this)" />
        <span class="warn" id="pswWarnID">密码错误，请按要求填写</span>
        <div class="mes">3-5个字符(字母a-zA-Z，数字0-9)</div>
    </td>
</tr>

<tr>
    <td>
    	 <span class="name">确认密码</span>
        <input type="password" name="repsw" οnblur="checkRepsw(this)" />
        <span class="warn" id="repswWarnID">两次密码不一致</span>
        <div class="mes">请重复密码</div>
    </td>
</tr>

<tr>
    <td>
    	 <span class="name">邮箱</span>
        <input type="email" name="mail" οnblur="checkMail(this)" />
        <span class="warn" id="mailWarnID">邮箱错误，请填写正确的邮箱</span>
    </td>
</tr>

<tr>
    <th>
    	 <input type="submit" value="提交数据"/>
    </th>
</tr>
</table>
</form>
</body>
</html>