1.为了方便校验,登录表单中按钮要写成这样,不然会默认是submit
<div align="center"> <form action="loginServlet" method="post" id="loginForm"> 姓名:<input name="uname" type="text"><br> 密码:<input name="upwd" type="password"><br> <%--要写明为button类型,不然默认submit,一按就会提交表单,不能进行效验--%> <button type="button">登录</button> <button type="button">注册</button> </form> </div>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>登录页面</title> </head> <body> <div align="center"> <form action="loginServlet" method="post" id="loginForm"> 姓名:<input name="uname" type="text" id="uname"><br> 密码:<input name="upwd" type="password" id="upwd"><br> <%--要写明为button类型,不然默认submit,一按就会提交表单,不能进行效验--%> <span id="msg" style="font-size: 12px;color: red"></span><br> <button type="button" id="loginBtn">登录</button> <button type="button">注册</button> </form> <%-- 用户登录JS校验 登录表单验证: 1.给登录按钮绑定点击事件 2.获取用户的姓名和密码 3.判断姓名是否为空 如果为空,提示用户(span标签),并且return 4.判断密码是否为空 5.提交表单 --%> </div> </body> <%--引入Jquery的js文件--%> <script type="text/javascript" src="js/jquery-3.6.1.js"></script> <script type="text/javascript"> <%-- 给登录按钮绑定点击事件:通过id选择器进行绑定 --%> $("#loginBtn").click(function (){ // 获取用户姓名和密码的值 var uname=$("#uname").val(); var upwd=$("#upwd").val(); if(isEmpty(uname)){ //通过id选择器找到span,然后给span赋值,提醒用户 $("#msg").html("用户姓名不可以为空"); return; } if(isEmpty(upwd)){ $("#msg").html("用户密码不能为空"); return; } // 如果都符合要求了,则进行提交表单的操作 // 通过id选择器找到表单 $("#loginForm").submit(); }); //判断字符串是否为空 function isEmpty(str){ if(str==null||str.trim()==""){ return true; } return false; } </script> </html>
2.注意点:
1)想要知道是否加入了js,可以在浏览器进行调试:
在页面:右键->检查->源代码/Sources
找到相应的jsp文件进行断点,调试。
标签:return,登录,用户,upwd,uname,实例,为空 From: https://www.cnblogs.com/hmy22466/p/16812089.html