利用javascript进行表单验证

最新推荐文章于 2020-05-05 15:21:18 发布

shizhan1881

最新推荐文章于 2020-05-05 15:21:18 发布

阅读量965

点赞数

分类专栏： javascript 文章标签： javascript function login html button action

本文链接：https://blog.csdn.net/linshizhan/article/details/7719671

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

效果：

没有点击登录前的页面：

点击登录，不过用户名和密码为空：

js代码：

function login()
{
		var username = document.getElementById("username").value;
		var password = document.getElementById("password").value;
		var loginForm = document.getElementById("loginForm");
			
			//判断用户名和密码是否为空
			//可以利用trim进行去空格，不过ie不支持，火狐支持，这里就不尝试去空格了
		if(username=="" ||password=="" ){
			document.getElementById("info").innerHTML=
			"<font color='red'>请输入用户名和密码</font>";
			return false;//1.阻止默认行为2.停止事件传播
		}  
	   loginForm.submit();
			
}

window.onload = function()
{
	var btn1 = document.getElementById("btn1");
	btn1.onclick = login;
}

html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>form.html</title>
	 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	 
	 <script type="text/javascript" src="js/form.js">
	 	
	 </script>
  </head>
  
  <body>
   <h2>人人登录</h2>
   <form action="wel.html" method="get" id="loginForm">
   	<table>
   	<tr align="center">
   		<td colspan="2">
   		<div id="info"> </div>
   		</td>
   	</tr>
   	<tr><td>会员名:</td><td><input type="text" name="username" id="username"/></td></tr>
   	<tr>
   		<td>密码：</td>
   		<td><input type="password" name="password" id="password" style="width:156px"/>
   		</td>
   	</tr>
   	<tr align="center"><td colspan="2">
   		<input type="button" value="登录" id="btn1"/></td>
   		</tr>
   	</table>
   </form>
  </body>
</html>