标签：red   context   密码   用户   mamicode   lse   ajax验证   ima   image   

使用ajax验证信息

1. controller

   @RequestMapping("/check")
   public String check(String username, String password) {
       String msg = "";
       if (username != null) {
           if ("admin".equals(username)) {
               msg = "ok";
           } else {
               msg = "用户名错误";
           }
       }
       if (password != null) {
           if ("123456".equals(password)) {
               msg = "ok";
           } else {
               msg = "密码错误";
           }
       }
       return msg;
   }

2. username,password输入框和提示

   <p>
       用户名:<input type="text" id="username" onblur="checkid()">
       <span id="userInfo"></span>
   </p>
   <p>
       密码:<input type="password" id="password" onblur="checkpwd()">
       <span id="pwdInfo"></span>
   </p>

3. checkid和checkpwd

   <script>
       function checkid() {
           $.post({
               url: "${pageContext.request.contextPath}/check",
               data: {'username': $("#username").val()},
               success: function (data) {
                   if (data.toString() === 'ok') {
                       $("#userInfo").css("color", "green");
                   } else {
                       $("#userInfo").css("color", "red");
                   }
                   $("#userInfo").html(data);
               }
           })
       }
   
       function checkpwd() {
           $.post({
               url: "${pageContext.request.contextPath}/check",
               data: {'password': $("#password").val()},
               success: function (data) {
                   if (data.toString() === 'ok') {
                       $("#pwdInfo").css("color", "green");
                   } else {
                       $("#pwdInfo").css("color", "red");
                   }
                   $("#pwdInfo").html(data);
               }
           })
       }
   </script>

4. 页面效果

   

使用ajax验证信息

标签：red   context   密码   用户   mamicode   lse   ajax验证   ima   image   

原文地址：https://www.cnblogs.com/pinked/p/12233579.html