Ajax异步验证表单信息(信息校验和判重)，之后提交按钮才可点击

需求是用户在注册信息或更新时异步提交，进行关键信息判重和表单校验

上图是将进行提交的表单，此处仅使用身份证号进行举例。

<div class="input-group">
    <span class="input-group-addon">身份证号</span>
    <input type="text" class="form-control" name="cardId" id="cardId" placeholder="请输入身份证号" maxlength="18" required "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 = "";	//提示信息
	    $.ajax({
	        type: "POST",
	        url: "stuServlet?method=check", //链接指向地址
	        data: "cardId=" + val,  //形成一对key-value，提交对象可以通过request.getParameter("cardId");获得val值
	        success: function(data){    //提交成功后调用的方法
	            if (idcardReg.test(val)){   //判断身份证号是否符合正则表达式规则
	                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");
        response.getWriter().print(StuService.getStudentByCardId(cardId));
        response.getWriter().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
}

后台具体数据库操作不再详细展示

标签：info,判重,身份证号,表单,disabled,Ajax,cardId,msg,response
来源： https://blog.csdn.net/weixin_42473928/article/details/89348846