表单验证

最新推荐文章于 2024-08-02 00:06:19 发布

最新推荐文章于 2024-08-02 00:06:19 发布 · 160 阅读

文章标签：

#JavaScript #XHTML #CSS #JSP #HTML #ViewUI

Javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的表单验证实现方案，使用HTML和JavaScript完成前端验证流程。包括对用户名、密码、年龄及邮箱的非空检查及格式校验。

<!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>
</head>
<style type="text/css">
	body{
		color:#006;
		font-size:12px;
		}
	form input{
		height:15px;
		width:150px;
		}
	form p span{
		font-size:12px;
		color:#F60;
		margin-left:10px;
		display:none;
		border:#F30 solid 2px;
		padding:2px;
		
		}
</style>
<script type="text/javascript">
	
	function checkForm(){
		
		var name = document.getElementById("name").value;
		var pwd = document.getElementById("pwd").value;
		var age = document.getElementById("age").value;
		var mail = document.getElementById("mail").value;
		var flag = true;
		
		if(name.length <= 0 ){
			document.getElementById("nameError").innerHTML = "用户名不能为空";
			document.getElementById("nameError").style.display = "inline";
			document.getElementById("name").focus();
			flag = false;
			}
		if(pwd.length <= 0 ){
			document.getElementById("pwdError").innerHTML = "密码不能为空";
			document.getElementById("pwdError").style.display = "inline";
			document.getElementById("pwd").focus();
			flag = false;
			}
		if(age.length <= 0 ){
			document.getElementById("ageError").innerHTML = "年龄不能为空";
			document.getElementById("ageError").style.display = "inline";
			document.getElementById("age").focus();
			flag = false;
			}else{
				
				if(isNaN(age)){
					document.getElementById("ageError").innerHTML = "年龄不能为数字";
					document.getElementById("ageError").style.display = "inline";
					flag = false;
					}
				}
		if(mail.length <= 0 ){
			document.getElementById("mailError").innerHTML = "邮箱不能为空";
			document.getElementById("mailError").style.display = "inline";
			document.getElementById("mail").focus();
			flag = false;
			}else{
					
				var atIndex = mail.indexOf('@');
				var doIndex = mail.indexOf('.');
				
				if (atIndex<1||doIndex-atIndex<2){
					document.getElementById("mailError").innerHTML = "邮箱格式不正确";
					document.getElementById("mailError").style.display = "inline";
					flag = false;
					}
				
				}
		if(flag){
			document.forms[0].submit();
			}
		}
	
	function onFocus(){
		
		document.getElementById("name").focus();
		}
	
	function selectAll(e){
		
		e.select();
		}
		
	function hideError(id){
		
		document.getElementById(id).style.display = "none";
		
		}
</script>
<body onload="onFocus()">
<form  action="index.jsp" method="post">
	<p>
   		 用户名：<input type="text" value="" id="name" onkeydown="hideError('nameError')" onmouseover="selectAll(this)"/>
    	<span id="nameError"></span>
    </p>
    <p>
   		 密&nbsp;&nbsp;码：<input type="password" value="" id="pwd" onkeydown="hideError('pwdError')" onmouseover="selectAll(this)"/>
         <span id="pwdError"></span>
    </p>
    <p>
    	年&nbsp;&nbsp;龄：<input type="text" value="" id="age" onkeydown="hideError('ageError')" onmouseover="selectAll(this)"/>
        <span id="ageError"></span>
    </p>
    <p>
   		 邮&nbsp;&nbsp;箱：<input type="text" value="" id="mail" onkeydown="hideError('mailError')" onmouseover="selectAll(this)"/>
         <span id="mailError"></span>
    </p>
    
    <p><img src="login.gif" width="72" height="31" style="cursor:pointer;" onclick="checkForm()"/></p>
    </form>
</body>
</html>