JavaScript表单验证

最新推荐文章于 2023-03-16 10:17:29 发布

iteye_3898

最新推荐文章于 2023-03-16 10:17:29 发布

阅读量86

点赞数

分类专栏： JavaScript 文章标签： JavaScript 游戏 CSS 360 HTML ViewUI

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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" οnsubmit="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>

iteye_3898

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript表单验证

JavaScript 最常见的用法之一就是验证表单对于检查用户输入是否存在错误和是否疏漏了必选项，JavaScript 是一种十分便捷的方法 &lt;html&gt; &lt;head&gt; &lt;title&gt;表单验证&lt;/title&gt; &lt;meta http-equiv="keywords" content="keyword1,k...
复制链接

扫一扫

专栏目录