需求是用户在注册信息或更新时异步提交,进行关键信息判重和表单校验
上图是将进行提交的表单,此处仅使用身份证号进行举例。
<div class="input-group">
<span class="input-group-addon">身份证号</span>
<input type="text" class="form-control" name="cardId" id="cardId" placeholder="请输入身份证号" maxlength="18" required onblur="check_cardId(this.value)">
<span class="msg" id="cardId_msg">*必填项</span>
</div>
对于此处是使用onblur()还是oninput(),个人认为应使用onblur(),注重用户体验,在文本框失去焦点时再去检查,同时减轻后台服务器负荷。
注册按钮默认disabled,不可点击:
<input type="submit" class="btn btn-success" value="注册" id="update" name="update" disabled />
js代码如下:
<script>
function check_cardId(val){
var msg = $("#cardId_msg"); //JQuery获取
var idcardReg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/; //身份证号正则表达式
var info = ""; //提示信息
if (idcardReg.test(val)){ //判断身份证号是否符合正则表达式规则
$.ajax({
type: "POST",
url: "stuServlet?method=check", //链接指向地址
data: "cardId=" + val, //形成一对key-value,提交对象可以通过request.getParameter("cardId");获得val值
success: function(data){ //提交成功后调用的方法
if(data === "true"){ //后台返回表示重名
info = "*已存在"; //提示信息
msg.css("color", "red"); //修改样式
msg.html(info); //显示提示信息
$("#update").attr("disabled", true); //按钮disabled
}else if(data === "false"){
info = "*通过";
msg.css("color", "green");
msg.html(info);
$("#update").removeAttr("disabled"); //取消按钮disabled
}
}
});
}else {
msg.css("color", "red");
info = "*身份证号格式不正确";
msg.html(info);
$("#update").attr("disabled", true); //按钮disabled
}
}
</script>
stuServlet代码如下:
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String method = request.getParameter("method");
if ("check".equals(method)){
String cardId = request.getParameter("cardId");
out.print(StuService.getStudentByCardId(cardId));
out.close();
}
}
StuService.getStudentByCardId(cardId)代码如下:
/**
* @description 用于获取身份证号信息进行判重
* @methodName getStudentByCardId
* @author YatXue
* @date 2019/4/17 9:19
* @param cardId 身份证号
* @return boolean
*/
public static boolean getStudentByCardId(String cardId){
OpDB opdb = new OpDB();
String sql = "select * from tb_student where stuCardId = '" + cardId + "'";
ArrayList<Object> list = opdb.opGetObject(sql, null, "student"); //传入sql语句和用户身份
return list != null && list.size() > 0; //返回集合是否为空并且集合大小是否大于0
}
后台具体数据库操作不再详细展示