提交

 表单通过失去焦点的onblur触发器触发检查的 js 代码 check()

var check = function(info){
  if (info.name=="username"){
    var username = document.getElementById("exampleInputEmail1").value.trim();
    if (username=="") {
      document.getElementById("usernameInfo").innerHTML = "用户名不能为空";
    }else{
      loadXMLDoc(); //执行Ajax检查
    }
/////分割线////////////////////////////////分割线/////////////////////////////////////////分割线
  }else if (info.name=="password"){
      var pass=document.getElementById("exampleInputPassword1").value.trim();
      if (pass==""){
        document.getElementById("passInfo").innerHTML="密码不能为空";
      }else{
        document.getElementById("passInfo").innerHTML="";
      }
  }else{
    var value1=document.getElementById("exampleInputPassword2").value;
    var value2=document.getElementById("exampleInputPassword1").value;
    if (value1!=value2){
      document.getElementById("repassInfo").innerHTML="前后密码不一致";
    }else{
      document.getElementById("repassInfo").innerHTML="";
    }
  }
}

上面的代码差不多相同,所以只用看分割线上的就差不多了,分割线上面的是先用本地JS检测用户输入是否为空,然后若不为空,则执行Ajax代码,检查账号是否已经被占用,Ajax代码如下:

var loadXMLDoc=function() {
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      var text=xmlhttp.responseText;
      document.getElementById("usernameInfo").innerHTML=text; //设置反馈信息
    }
  }
  var name = document.getElementById("exampleInputEmail1").value;  //获取用户输入
  xmlhttp.open("GET","userController/checkInfo.do?username="+name,true);  //构造请求
  xmlhttp.send();                           //发送
}

最后看看Controller的代码:

  @RequestMapping(value="/checkInfo",produces={"text/html;charset=utf-8;"})  //设置编码
  @ResponseBody                                //设置响应转换为JSON
  public String check(HttpServletRequest requst) {
    String username = requst.getParameter("username");
    System.out.println(username);
    Integer id = userService.check(username);    //检查账号是否已经存在
    if (id!=null) { 9       return "账号已经存在";
    }else {
      return "";
    }
  }

上述内容就是怎么在Spring MVC中利用ajax进行信息验证,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。


名称栏目:怎么在SpringMVC中利用ajax进行信息验证
文章URL:http://wjwzjz.com/article/ispcih.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP