ssm用ajax非同步驗證使用者名稱是否存在
阿新 • • 發佈:2018-11-06
ajax非同步驗證可以使頁面無需重新整理,即可使頁面與伺服器通訊,尤其是註冊頁面,能給使用者非常好的體驗。在此記錄下,方便大家使用,使用框架為(MyBatis+SpringMVC+Spring)。
jsp頁面:
<input type="text" name="name" id="name" placeholder="請輸入使用者名稱" required onchange="validateName()">
<script type="text/javascript"> var xmlHttp; //建立Ajax物件 function createXMLHttpRequest() { if (window.ActiveXObject) { //IE6 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else if (window.XMLHttpRequest) { //W3C瀏覽器和IE7及其以上版本 xmlHttp = new XMLHttpRequest(); } } //驗證使用者名稱 function validateName() { //呼叫建立Ajax方法 createXMLHttpRequest(); //獲取使用者名稱的值 var name = document.getElementById("name"); //將內容傳送給哪個url處理 var url = "${pageContext.request.contextPath }/seller/findBrandByName?name=" + escape(name.value); //建立HTTP請求(請求方式,請求URL,是否非同步) xmlHttp.open("GET", url, true); //狀態改變時 xmlHttp.onreadystatechange = function(){ //如果都ok if(xmlHttp.readyState==4 && xmlHttp.status==200){ // 使用者名稱驗證,以字母開頭,後面內容可以是字母,數字,下劃線,且6~20位 var nameReg = /^[a-zA-Z][\w]{5,19}$/; if (nameReg.test(document.getElementById('name').value) == false) { document.getElementById('nameInfo').innerText = "使用者名稱必須6~20位字母數字下劃線,且只能以字母開頭"; }else{ var color ="red"; var message = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data; var passed = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data; if(passed=="true"){ color ="green"; } document.getElementById("nameInfo").innerHTML = "<span style=color:"+color+">"+message+"</span>"; } } }; xmlHttp.send(null); } //驗證身份證號 function validateID() { //呼叫建立Ajax方法 createXMLHttpRequest(); //獲取使用者名稱的值 var idnumber = document.getElementById("idnumber"); //將內容傳送給哪個url處理 var url = "${pageContext.request.contextPath }/seller/findBrandByID?idnumber=" + escape(idnumber.value); //建立HTTP請求(請求方式,請求URL,是否非同步) xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState==4 && xmlHttp.status==200){ // 身份證驗證 var idnumberReg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/; if (idnumberReg.test(document.getElementById('idnumber').value) == false) { document.getElementById('idnumberInfo').innerText = "身份證號有誤,請輸入正確的身份證號"; }else{ var color ="red"; var message = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data; var passed = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data; if(passed=="true"){ color ="green"; } document.getElementById("idnumberInfo").innerHTML = "<span style=color:"+color+">"+message+"</span>"; } } }; xmlHttp.send(null); } </script>
controller:
/** * 根據使用者名稱查詢 * @throws IOException */ @RequestMapping("/findBrandByName") public void findBrandByName(String name,HttpServletRequest request,HttpServletResponse response) throws IOException { //初始化 String message=""; boolean flag=true; //查詢是否有輸入的使用者名稱 int rel = brandService.selectOnlinNameAndBrandName(name); //如果為1(沒有該使用者名稱)即可用 if(rel==1){ message="使用者名稱可用"; }else{ flag=false; message="使用者名稱已經存在,請使用其他使用者名稱"; } //System.out.println(message); //設定返回資料為utf-8 response.setCharacterEncoding("UTF-8"); PrintWriter out = response.getWriter(); out.println("<response>"); out.println("<passed>" + Boolean.toString(flag) + "</passed>"); out.println("<message>" + message + "</message>"); out.println("</response>"); }