在客户端无法检测注册用户名是否被占用,这需要查询数据库,所以是服务器端负责这块。
实现思路大致描述:
注册表单中添加自动检测用户名是否被占用的功能,其实就是利用 ajax 向服务器发送请求,并带着用户输入的用户名过去,在服务器端可以调用 DAO 的 findUser(String userName)
方法,去数据库查询获取数据,如果可以取到说明已经被占用了,如果无法取到则说明没有被占用。不过 ajax 的功能只是获取到服务器发送回来的 json 字符串而已,这个字符串会自动转换成 js 对象,该对象其中一个属性是布尔类型的,如果是 true 说明没有被占用,false 说明被占用。
注册页面代码如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><script type="text/javascript" src="js/jquery-3.5.1.js"></script><script type="text/javascript">$(function () {$("#validate").bind("click", function () {var accountName = $("#accountName").val();$.ajax({"url": "validate.action?accountName=" + accountName,"type": "GET","dateType": "json","success": function (data) {if (data.ok) {$("#validate_info").text("可以使用").css("color", "green");} else {$("#validate_info").text("已经被占用").css("color", "red");}}});});});</script>
</head>
<body>
<form id="" action="" method=""><table cellSpacing="0" cellPadding="0"width="100%" border="0"><tbody><tr class="header"><td colSpan="3">用户登录</td></tr></tbody><tbody><tr><td width="20%"><b>账户名称 </b></td><td valign="middle" width="20%"><input id="accountName" type="text" name="accountName"/><a href="javascript:void(0);" id="validate">检测账户名称</a></td><td><span id="validate_info"> </span></td></tr><tr><td class="altbg1" width="20%"><b>真实姓名</b></td><td class="altbg2"><input type="text" name="name"/></td><td><span style="color: red"></span></td></tr><tr><td class="altbg1" width="20%"><b>密码 </b></td><td class="altbg2"><input type="password" name="password"/></td><td><span></span></td></tr></tbody></table><br/><center><input class="button" type="reset" value="重置" name="settingsubmit"/><input class="button" type="submit" value="提交" name="settingsubmit"/></center>
</form>
</body>
</html>
struts.xml 的配置:
<!--转发到注册页面--><action name="registerform"><result name="success">/WEB-INF/jsp/registerform.jsp</result></action><!--检测账户名称是否存在--><action name="validate" class="priv.lwx.struts.pms.action.AccountNameValidateAction"><result name="success" type="json"></result></action>
FindUserAction 的代码如下:
package priv.lwx.struts.pms.action;import priv.lwx.struts.pms.dao.UserDAO;/*** description** @author liaowenxiong* @date 2022/2/22 14:38*/public class FindUserAction extends BaseAction {// input,接收客户端传过来的账户名称private String accountName;// output,告诉前端账户名称是否存在private boolean ok;private UserDAO userDAO = new UserDAO();public String execute() {System.out.println(accountName);if (accountName != null) {ok = userDAO.findUser(accountName);}return "success";}public String getAccountName() {return accountName;}public void setAccountName(String accountName) {this.accountName = accountName;}public boolean isOk() {return ok;}public void setOk(boolean ok) {this.ok = ok;}
}
扩展:
客户端验证即表单 JS 验证只是用来检测用户输入的数据是否符合一定的规范。不过大家要知道,JS 表单检测的代码是可以被用户修改掉的,也就是说用户可以避过表单验证去访问服务器中的应用,因此在服务器端也要进行同样的检测才行。如果是在 Struts2 的应用中,Action 组件接收到参数后在调用 DAO 前就要对参数的格式进行必要的检测了。