表单验证

时间：2017-03-27 00:52:54 阅读：232 评论：0 收藏：0 [点我收藏+]

这是一个简答的表单验证，它包含有正则表达式，来限制用户的输入，如果不符合要求则会提示有误；这个代码也很简单。

	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<style>
	div{
	border: 2px solid;
	width: 430px;
	height: 220px;
	}
	h1{
	text-align: center;
	}
	.err{
	color: red;
	}
	.denglu{
	width: 290px;
	height: 40px;
	}
	p{
	text-align: center;
	}
	</style>
	</head>
	<body>
	<div>
	<form action="#" method="post" id="myform" name="myform" onsubmit="return chkform()">
	<h1>登陆考试</h1>
	<p>
	<span style="letter-spacing: 0.3em;">用户名</span>： <input type="text" name="username"/>
	<span class="err" id="errname"></span>
	</p>
	<p>
	<span style="letter-spacing: 2em;">密</span>码： <input type="password" name="userpwd"/>
	<span class="err" id="errpwd"></span>
	</p>
	<p>
	<input type="submit" value="登陆" class="denglu"/>
	</p>
	</form>
	</div>
	<script>
	var myform = document.myform;
	myform.username.onblur=function(){
	var reg = /^[a-zA-Z]{4,100}$/;
	var err = document.getElementById(‘errname‘);
	if(reg.test(this.value)){
	err.innerHTML=‘√‘;
	}else{
	err.innerHTML=‘×‘;
	}
	};
	myform.userpwd.onblur=function(){
	var reg = /^\w{6,30}$/;
	var err = document.getElementById(‘errpwd‘);
	if(reg.test(this.value)){
	err.innerHTML=‘√‘;
	}else{
	err.innerHTML=‘×‘;
	}
	};

	function chkform(){
	myform.username.onblur();
	myform.userpwd.onblur();
	var spans = document.getElementsByTagName("span");
	for(var i=0; i<spans.length; i++){
	if(spans[i].className==‘err‘ && spans[i].innerHTML.length>0){
	return false;
	}
	}

	return true;
	}
	</script>
	</table>
	</body>
	</html>

原文：http://www.cnblogs.com/host717/p/6624705.html

踩

(0)

评论一句话评论（0）

分享档案

更多>