当用户在输入框键入的用户名和密码为空时，在输入框右边提示进行提示，并阻止提交

最新推荐文章于 2025-05-21 16:10:52 发布

原创最新推荐文章于 2025-05-21 16:10:52 发布 · 3.3k 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

java

javaWeb

本文介绍了一种方法，当用户在输入框中键入的用户名和密码为空时，会在输入框右侧显示提示信息并阻止表单提交。主要步骤包括：绑定onblur事件检查输入，设置隐藏提示信息，限制表单提交，以及通过调整元素的visibility属性来控制错误提示的显示和隐藏。

1.为input输入框绑定onblur失去焦点事件，当失去焦点，调用检查函数

姓名:<input type="text" name="name" id="name" onblur="check()">

2.设置隐藏提示信息

<span class="waring" id="nameCheck">用户名为空</span>

<style>
      .waring{
        color: red;
        visibility: hidden;
        /*visibility: visible;*/
      }
    </style>

3.form设置提交限制

<form action="/my/Servlet" method="post" onsubmit="return check()">

4.通过相应函数调整visibility的属性值，从而控制错误提示的显隐

 function check(){
      if ($("#name").val().trim()==""){
        $("#nameCheck").css("visibility","visible")
        a=false;
      }else {
        $("#nameCheck").css("visibility","hidden")
        a=true
      }

      if ($("#passWord").val().trim()==""){
        $("#passWordCheck").css("visibility","visible")
        b=false
      }else {
        $("#passWordCheck").css("visibility","hidden")
        b=true
      }

      if ($("#phoneNumber").val().trim()==""){
        $("#phoneNumberCheck").css("visibility","visible")
        c=false
      }else {
        $("#phoneNumberCheck").css("visibility","hidden")
        c=true
      }

      if (a==false||b==false||c==false){
        return false
      }else {
        return true
      }
    }

完整代码:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>注册</title>
    <style>
      .waring{
        color: red;
        visibility: hidden;
        /*visibility: visible;*/
      }
    </style>
    <script src="jquery-3.3.1.min.js"></script>
  </head>
  <body>
  <form action="/my/Servlet" method="post" onsubmit="return check()">
    姓名:<input type="text" name="name" id="name" onblur="check()"> <span class="waring" id="nameCheck">用户名为空</span><br>
    密码:<input type="text" name="passWord" id="passWord" onblur="check()"> <span class="waring" id="passWordCheck">密码为空</span><br>
    电话:<input type="text" name="phoneNumber" id="phoneNumber" onblur="check()"> <span class="waring" id="phoneNumberCheck">电话为空</span><br>
    <button>提交</button>
  </form>
  </body>
  <script>
    function check(){
      if ($("#name").val().trim()==""){
        $("#nameCheck").css("visibility","visible")
        a=false;
      }else {
        $("#nameCheck").css("visibility","hidden")
        a=true
      }

      if ($("#passWord").val().trim()==""){
        $("#passWordCheck").css("visibility","visible")
        b=false
      }else {
        $("#passWordCheck").css("visibility","hidden")
        b=true
      }

      if ($("#phoneNumber").val().trim()==""){
        $("#phoneNumberCheck").css("visibility","visible")
        c=false
      }else {
        $("#phoneNumberCheck").css("visibility","hidden")
        c=true
      }

      if (a==false||b==false||c==false){
        return false
      }else {
        return true
      }
    }
  </script>
</html>