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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Jane_Liee/article/details/77989588

表单源码: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 = "";
    }
}

效果图


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

展开阅读全文

没有更多推荐了,返回首页