登录表单JS静态验证

最新推荐文章于 2023-03-02 10:23:07 发布

boxyuan

最新推荐文章于 2023-03-02 10:23:07 发布

阅读量420

点赞数

分类专栏： JavaScript 文章标签： java js 表单验证

本文链接：https://blog.csdn.net/boxyuan/article/details/78251564

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>My JSP 'login3.jsp' starting page</title>
<script type="text/javascript">
 function checkForm()
{
var name=document.getElementById("username");
var pwd=document.getElementById("pwd");
if(name.value=='')
{
document.getElementById("usernametip").innerHTML="<font color='red'>请输入用户名</font>";
name.focus();
return false;
}
else
{document.getElementById("usernametip").innerHTML="<font color='green'>输入正确</font>";
}
if(pwd.value=='')
{
document.getElementById("pwdtip").innerHTML="<font color='red'>请输入密码</font>";
name.focus();
return false;
}
else
{document.getElementById("pwdtip").innerHTML="<font color='green'>密码正确</font>";
}
return true;
} 
/
/* function usernameblur()
{
var name=document.getElementById("username");
if(name.value=='')
{
$("usernametip").innerHTML="<font color='red'>用户名不能为空</font>";
name.focus();
}
else
{
$("usernametip").innerHTML="<font color='blue'>用户名输入正确</font>";
}
}
function pwdblur()
{
var pwd=$("pwd");
if(pwd.value=='')
{
$("pwdtip").innerHTML="<font color='red'>密码不能为空</font>";
pwd.focus();
}
else
{
$("pwdtip").innerHTML="<font color='blue'>密码输入正确</font>";
}
function $(elId)  
	{
		return document.getElementById(elId);
	}
} */
//
function usernameblur() {
		var name = $("username"); //拿到用户名文本框对象	

		if (name.value == '') {
			//alert("请输入用户名");
			$("usernametip").innerHTML = "<font color='red'>请输入用户名</font>";
			name.focus();
		} else {
			$("usernametip").innerHTML = "<font color='blue'>用户名输入正确</font>";
		}
  
	}
function pwdblur() {
		var pwd = $("pwd"); //拿到密码文本框对象
		if (pwd.value == '') {
			//alert("请输入用户名");
			$("pwdtip").innerHTML = "<font color='red'>请输入密码</font>";
			pwd.focus();
		} else {
			$("pwdtip").innerHTML = "<font color='blue'>密码输入正确</font>";
		}
	}
	function $(elId)  
	{
		return document.getElementById(elId);
	}
</script>
</head>

<body>
	<form name="formLogin" action="loginSubmit.jsp" method="post"
		οnsubmit="return checkForm()">
		<table align="center" width=40% border="1" cellspacing="0"
			cellpadding="5">
			<tr>
				<td>用户名：</td>
				<td><input type="text" name="username" οnblur="usernameblur()"
					id="username"><span id="usernametip">输入字母数字</span>
				</td>
			</tr>
			<tr>
				<td>密码：</td>
				<!-- onblur失去焦点时发生 -->
				<td><input type="password" name="pwd" οnblur="pwdblur()"
					id="pwd"><span id="pwdtip">输入长度必须>=6位</span>
				</td>
			</tr>
			<tr>
				<td><input type="submit" name="submit" value="登录"></td>
				<td><input type="reset" name="reset" value="重置">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

boxyuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
登录表单JS静态验证

My JSP 'login3.jsp' starting page function checkForm(){var name=document.getElementById("username");var pwd=document.getElementById("pwd");if(name.value==''){document.getElementById("usernamet
复制链接

扫一扫