对Form表单的输入框值做前端校验，若为空则阻止表单提交，否则表单提交给后台Servlet处理

最新推荐文章于 2023-08-04 15:44:44 发布

super佩

最新推荐文章于 2023-08-04 15:44:44 发布

阅读量2.1k

点赞数 1

本文链接：https://blog.csdn.net/qq_36035549/article/details/109493791

版权

原理：阻止表单提交是通过form的onSubmit方法，返回false控制的。即<form οnsubmit=“reutrn false”></form>

实现：

Step 1：将form的onSubmit方法设置为return 函数(this)

Step 2：在function login(formvalue)函数中设置一个变量：isSubmit = true

若用户名或密码为空，则使isSubmit = false

Step 3：对isSubmit进行判断，若isSubmit = false，则return false; 阻止表单提交；否则表单正常提交。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Login Page</title>
   <style>
   .error{
   color : red;
   }
   </style>
</head>
<body>
   <form method="post" action="LoginServlet" onSubmit="return login(this)">
       <div class="item">
       <label>usename:</label>
       <input name="username" type="text"/>
       <span id="username-error" class="error"></span>
       </div>
       <div class="item">
       <label>password:</label>
       <input name="password" type="password"/>
       <span id="password-error" class="error"></span>
       </div>
       <div>
       <input type="submit" value="Login" />
       </div>
   </form>
   <script>
   // 现在前端做数据合法性校验，若不通过，则阻止表单提交；否则，表单正常提交
       function login(formvalue){
           var username = formvalue.username.value;
           var password = formvalue.password.value;

           var uError = document.getElementById("username-error");
           var pError = document.getElementById("password-error");

           var isSubmit = true

           if("" == username){
               isSubmit = false;
               uError.innerHTML = "用户名不能为空！"
           }
           if("" == password){
               isSubmit = false;
               pError.innerHTML = "密码不能为空！"
           }

           if(!isSubmit){
               // 阻止表单提交
               return false;
           }
       }
   </script>
</body>
</html>

super佩

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
对Form表单的输入框值做前端校验，若为空则阻止表单提交，否则表单提交给后台Servlet处理

原理：阻止表单提交是通过form的onSubmit方法，返回false控制的。即<form οnsubmit=“reutrn false”></form>实现：Step 1：将form的onSubmit方法设置为return 函数(this) <form method="post" action="LoginServlet" onSubmit="return login(this)">Step 2：在function login(formva...
复制链接

扫一扫