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

来源：互联网发布：类似trackid的软件编辑：程序博客网时间：2024/05/21 09:58

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

效果图

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

阅读全文

0 0