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

最新推荐文章于 2021-05-26 08:43:06 发布

Jane_Liee

最新推荐文章于 2021-05-26 08:43:06 发布

阅读量2.2w

点赞数 7

分类专栏： java javascript jsp 文章标签：表单 js 登录界面

本文链接：https://blog.csdn.net/Jane_Liee/article/details/77989588

版权

java 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

jsp

4 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

表单源码：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();" />&nbsp;&nbsp;&nbsp;
            </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 = "";
    }
}

效果图

弹窗提示
这里写图片描述
输入框后提示

Jane_Liee

关注

7
点赞
踩
53

收藏

觉得还不错? 一键收藏
1
评论
验证用户名和密码是否为空的两种方式

表单源码：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="
复制链接

扫一扫

专栏目录