您的位置：首页 > 其它

验证用户名和密码是否为空的两种方式

2017-09-15 11:15 337 查看

表单源码：index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>登录界面</title>
</head>
<style type="text/css">
table { margin: 0 auto; margin-top: 130px; }
.title { text-align: center; font-size: 20px; }
.left { text-align: right; }
.center { text-align: center; padding-top: 5px; padding-bottom: 5px; }
</style>
<body style="background-color: B2D8E8">
<form id="loginForm" method="post">
<table border="0" cellspacing="20">
<tr>
<td colspan="2" class="title"><span>Login Test Page</span></td>
</tr>
<!-- 第一部分代码 -->
<tr class="center">
<td colspan="2"><input type="submit" id="loginButton"
value="登录" onclick="javascript:check();" />   
</tr>
</table>
</form>
<script type="text/javascript">
<!-- 第二部分代码 -->
</script>
</html>

其他地方都是相同的，只有第一部分和第二部分不一样，这两个部分是对应的。

1. 第一种：较简便的弹窗式

只要id和getElementById()里的id对应就好了

<– 第一部分代码 –>

<tr>
<td class="left">username:</td>
<td>
<input type="text" id="username" placeholder="请输入用户名" />
</td>
</tr>
<tr>
<td class="left">password:</td>
<td>
<input type="text" id="password" placeholder="请输入密码" />
</td>
</tr>

<– 第二部分代码 –>

//客户端校验
function checkform() {
$user_name = document.getElementById("username").value;
$user_pwd = document.getElementById("password").value;
if ($user_name == '') {
alert("用户名不能为空");
return false;
}

if ($user_pwd == '') {
alert("密码不能为空");
return false;
}

return true;
}

2. 第二种：输入框后提示

<– 第一部分代码 –>

<tr>
<td class="left">username:</td>
<td>
<input type="text" id="username"
onblur="checkUserName(this.value);" placeholder="请输入用户名"/>
</td>
<td>
<span id="checkUserNameResult" style="color: red "></span>
</td>
</tr>
<tr>
<td class="left">password:</td>
<td>
<input type="text" id="password"
onblur="checkPassword(this.value);" placeholder="请输入密码" />
</td>
<td>
<span id="checkPasswordResult" style="color: red "></span>
</td>
</tr>

<– 第二部分代码 –>

function checkUserName(obj) {
var username = obj;
if (username.trim().length == 0) {
var checkUserNameResult = document.getElementById("checkUserNameResult");
checkUserNameResult.innerHTML = "用户名不能为空";
obj.focus();
}
else {
checkUserNameResult.innerHTML = "";
}
}
function checkPassword(obj) {
var password = obj;
var checkPasswordResult = document.getElementById("checkPasswordResult");
if (password.trim().length == 0) {
checkPasswordResult.innerHTML = "密码不能为空";
obj.focus();
} else {
checkPasswordResult.innerHTML = "";
}
}

效果图

弹窗提示

输入框后提示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航