JavaScript表单验证

最新推荐文章于 2025-11-27 15:16:45 发布

最新推荐文章于 2025-11-27 15:16:45 发布 · 128 阅读

文章标签：

#JavaScript #游戏 #CSS #360 #HTML #ViewUI

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用JavaScript进行表单验证的实际案例，包括用户名、密码、性别等字段的验证逻辑，并展示了如何通过事件监听来实现即时反馈。

JavaScript 最常见的用法之一就是验证表单

对于检查用户输入是否存在错误和是否疏漏了必选项，JavaScript 是一种十分便捷的方法

<html>
  <head>
    <title>表单验证</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=GB18030">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
		body,td{
			font-family: 宋体;
			font-size: 12px;
			padding-left: 5px;
		}
    	td div{
    		color: red;
    		font-size: 12px;
    	}
    	.inputtext{
    		width: 140px;
    		height: 20px;
    		border-style: solid;
    		border-color: gray;
    		border-width: 1px;
    	}
    </style>
<script type="text/javascript">
	window.onload = function(){
		//用户名：
		document.eventForm.username.onblur = function(){
		  var username = document.eventForm.username.value;
		  if(username==""){
		    document.getElementById("username_error").innerHTML = "用户名不能为空";
		  }else{
			document.getElementById("username_error").innerHTML= "";
		  }
		}
		document.eventForm.username.onfocus = function(){
		  document.getElementById("username_error").innerHTML = "请输入用户名，如：finally123_m";
		}
		//密码
		document.eventForm.password.onblur = function(){
		  var password = document.eventForm.password.value;
			if(password==""){
			  document.getElementById("password_error").innerHTML = "密码不能为空";
		    else if(password.length<6){
			  document.getElementById("password_error").innerHTML = "密码必须是6位字符以上";
			}else{
				document.getElementById("password_error").innerHTML= "";
			}
		}
		document.eventForm.password.onfocus = function(){
		document.getElementById("password_error").innerHTML = "请输入密码，如：123abc";
	  }
	  //重复密码
	  document.eventForm.password2.onblur = function(){
		var password = document.eventForm.password.value;
		var password2 = document.eventForm.password2.value;
		if(password != password2){
			document.getElementById("password2_error").innerHTML = "密码不一致";
		}else{
			document.getElementById("password2_error").innerHTML= "";
		}
	  }
	  document.eventForm.password2.onfocus = function(){
		document.getElementById("password2_error").innerHTML = "请再次输入密码";
	  }
	  //籍贯
	  document.eventForm.province.onchange  = function(){
		var province = document.eventForm.province.value;
		if(province=="0"){
			document.getElementById("province_error").innerHTML = "请选择你的籍贯";
		}else{
			document.getElementById("province_error").innerHTML= "";
		}
	  }
//简介：当文本域获取焦点时，清空默认值
	  document.eventForm.desc.onfocus = function(){
		document.eventForm.desc.innerHTML = "";
	  }
}
		
	//提交事件表单验证
	function func_onsubmit(){
	  var username = document.eventForm.username.value;
		if(username==""){
			document.getElementById("username_error").innerHTML = "用户名不能为空";
			  return false;
			}
			var password = document.eventForm.password.value;
			if(password==""){
				document.getElementById("password_error").innerHTML = "密码不能为空";
				return false;
			}
			var password2 = document.eventForm.password2.value;
			if(password2!=password){
				document.getElementById("password2_error").innerHTML = "密码不一致";
				return false;
			}			
			
			//获取单选按钮被选中的值（性别）
			var sex = document.eventForm.sex;
			//alert(sex.length);
			for(var i=0;i<sex.length;i++){
				if(sex[i].checked){
					sex = sex[i].value;
					break;
				}
			}
			
			//获取下拉列表框被被中的值
			var province = document.eventForm.province.value;
			if(province=="0"){
			  document.getElementById("province_error").innerHTML = "请选择你的籍贯";
				return false;
			}
			
			//获取复选框被选中的值
			var likes = document.eventForm.likes;
			var _likes = "";
			for(var i=0;i<likes.length;i++){
				if(likes[i].checked){
					_likes = _likes + likes[i].value + ",";
				}
			}
			
			//获取文本域的值
			var desc = document.eventForm.desc.value;
			alert("用户名是："+username+"\n密码是："+password+"\n性别是："+sex+"\n籍贯是："+province + "\n爱好是："+_likes+"\n自我简介："+desc)
			return true;
		}
	</script>
  </head>
  
  <body>
    <form action="" name="eventForm" onsubmit="return func_onsubmit()">
      <table align="center" width="600" bgcolor="gray" cellpadding="0" cellspacing="1" border="0">
    		<tr  bgcolor="white">
    			<th colspan="3" height="60" align="center" valign="middle">用户注册</th>
    		</tr>
    		<tr bgcolor="white">
    		  <td width="80">*用户名</td>
    		  <td width="160"><input class="inputtext" type="text" name="username"></td>
    			<td width="360"><div id="username_error"><div></td>
    		</tr>
    		<tr bgcolor="white">
    			<td>*密码</td>
    			<td><input class="inputtext" type="password" name="password"></td>
    			<td><div id="password_error"><div></td>
    		</tr>
   			<tr bgcolor="white">
    			<td>*重复密码</td>
    			<td><input class="inputtext" type="password" name="password2"></td>
    			<td><div id="password2_error"><div></td>
    		</tr>
    		<tr bgcolor="white">
    			<td>*性别</td>
    			<td>
    				<input type="radio" name="sex"  value="男" checked="checked">男
    				<input type="radio" name="sex"  value="女">女
    			</td>
    			<td><div id="sex_error"><div></td>
    		</tr>
    		<tr bgcolor="white">
    			<td>*籍贯</td>
    			<td>
    				<select name="province" class="inputtext">
    					<option value="0">请选择...</option>
    					<option value="北京市">北京市</option>
    					<option value="上海市">上海市</option>
    					<option value="天津市">天津市</option>
    					<option value="重庆市">重庆市</option>
    				</select>
    			</td>
    			<td><div id="province_error"><div></td>
    		</tr>
   			<tr bgcolor="white">
    			<td>爱好</td>
    			<td>
    				<input type="checkbox" name="likes" value="运动">运动
    				<input type="checkbox" name="likes" value="上网">上网<br>
    				<input type="checkbox" name="likes" value="玩游戏">玩游戏
    				<input type="checkbox" name="likes" value="阅读">阅读
    			</td>
    			<td><div id="likes_error"><div></td>
    		</tr>
    		<tr bgcolor="white">
    			<td>自我简介</td>
    			<td colspan="2">
    				<textarea class="inputtext" style="width:auto;height:auto" rows="10" cols="60" name="desc">请输入你的个人信息介绍...</textarea>
    			</td>
    		</tr>    		
    		<tr bgcolor="white">
    			<td colspan="3" align="center">
    				<input type="submit" value="注册" >
    				<input type="reset" value="重置">
    			</td>
    		</tr>
    	</table>    	
    </form>
  </body>
</html>