javascript 无弹出式表单验证

最新推荐文章于 2020-08-15 18:58:32 发布

AngelCathy

最新推荐文章于 2020-08-15 18:58:32 发布

阅读量226

点赞数 1

分类专栏： javascript 文章标签： JavaScript IDEA 浏览器 ViewUI

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏


<html>
	<head>
		<title>javascript实现的表单验证的动态效果</title>
	</head>	
	<script language="javascript">
		function formValidate(){

			/*验证用户名不能为空，如果为空，则显示用户名不能为空*/
			if(document.getElementById("userName").value==""){
				//alert("用户名不能为空");
				document.getElementById("userNameErr").innerHTML="<font color='red'>用户名不能为空啊</font>";				
				document.f1.userName.focus();
				return false;
			}else{
				document.getElementById("userNameErr").innerHTML="";
				return true;
			}
		}

		function passwordValidate(){
			/*验证用户密码不能为空，如果为空怎显示用户密码不能为空*/
			if(document.getElementById("paw").value==""){				
				document.getElementById("passwordErr").innerHTML="<font color='red'>密码不能空</font>";
				document.f1.paw.focus();
				return false;
			}else{
				document.getElementById("passwordErr").innerHTML="";
				document.f1.paw.focus();
				return true;
			}
		}
	</script>	
	<body>
	<div align="center">
		用户信息<br/><br/><br/>
		<form name="f1">
			<table border="1">
				<tr>
					<td>用户姓名：</td>
					<td >
						<input type="text" name="userName" id="userName" onblur="formValidate()"/>
						<%--通过javascript将错误信息追加到该行的后面 注意这里的span也可以换成div，唯一不同的是显示的效果--%>
						<span id="userNameErr"></span>
					</td>

				</tr>
				<tr>
					<td>用户密码：</td>
					<td>
						<input type="password" name="paw" id="paw" onblur="passwordValidate()" />
						<%--通过javascript将错误信息追加到该行的后面 --%>
						<span id="passwordErr"></span>
					</td>

				</tr>
				<tr>
					<td align="center" colspan="2">
						<input type="submit" name="tijiao" value="提 交"/>
						<input type="reset" name="chongshe" value="重 设"/>
					</td>
				</tr>
			</table>
		</form>
	</div>		
</body>
</html>