Jq表单校验异步ajax校验用户是否存在

比眉伴天荒 2022-02-01 08:47 246阅读 0赞

<%@ page language="java" contentType="text/html; charset=UTF-8"
             pageEncoding="UTF-8" %>
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>昭阳导航注册</title>
      
      <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
      
      <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
      
      <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
      
      <link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">
      
      <link rel="stylesheet" href="/dist/css/AdminLTE.min.css">
      
      <link rel="stylesheet" href="/plugins/iCheck/square/blue.css">
    
      
      
      
    
      
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
    </head>
    <body class="hold-transition register-page">
    <div class="register-box">
      <div class="register-logo">
        <a href="#"><b></b>昭阳导航</a>
      </div>
    
      <div class="register-box-body" style="border-radius:20px">
        <p class="login-box-msg">欢迎注册</p>
    
        <form action="/user/register" method="post" id = "registerForm">
          <div class="form-group has-feedback">
            <input type="text" class="form-control"  id="checkName" name = "username" placeholder="请输入用户名">
            <span class="glyphicon glyphicon-user form-control-feedback"></span>
          </div>
          <div class="form-group has-feedback">
            <input type="email" class="form-control" id="userEml" name = "usereml" placeholder="输入登陆邮箱">
            <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
          </div>
          <div class="form-group has-feedback">
            <input type="password" class="form-control" id="userpwd" name = "userpwd" placeholder="输入密码">
            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
          </div>
    
        </form>
        <div class="row">
    
          
          <div class="col-xs-4 pull-left">
            <button type="submit" class="btn btn-primary btn-block btn-flat">登陆</button>
          </div>
          <div class="col-xs-4 pull-right">
            <button  class="btn btn-primary btn-block btn-flat" onclick="submitForm()">注册</button>
          </div>
          
        </div>
    
    
      </div>
      
    </div>
    
    
    
    <script src="${pageContext.request.contextPath }/bower_components/jquery/dist/jquery.min.js"></script>
    
    <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    
    <%--<script src="/plugins/iCheck/icheck.min.js"></script>--%>
    <script src="${pageContext.request.contextPath }/plugins/layer/layer.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    
    <script>
      // $(function () {
      //   $('input').iCheck({
      //     checkboxClass: 'icheckbox_square-blue',
      //     radioClass: 'iradio_square-blue',
      //     increaseArea: '20%' /* optional */
      //   });
      // });
    
      function validateForm()
      {
          // checkEmlAjax(userEml);
      }
    
    
      function checkEmailFormat(){
          var userEml = $("#userEml").val();
          var obj = document.getElementById("userEml"); //要验证的对象
          // var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
          // var reg = new RegExp("^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*\\.[a-zA-Z0-9]{2,6}$"); //正则表达式
    
          var reg = new RegExp("^[A-Za-z\\d]+([-_.][A-Za-z\\d]+)*@([A-Za-z\\d]+[-.])+[A-Za-z\\d]{2,4}$"); //正则表达式
    
          if(obj.value === ""){ //输入不能为空
              layer.tips('邮箱不能为空', '#userEml',{
                  tipsMore: true
              });
              return false;
          }else if(!reg.test(obj.value)){ //正则验证不通过，格式不对
              layer.tips('邮箱格式不正确', '#userEml',{
                  tipsMore: true
              });
              return false;
          }else{
              // alert(checkEmlAjax(userEml));
             checkEmlAjax(userEml);
              // if(!checkEmlAjax(userEml)){
              //   return false;
              // }
              // return true;
             //
             //  alert("2");
          }
    
    
      }
    
      function checkEmlAjax(userEml){
          // var userEml = document.getElementById("userEml"); //要验证的对象
          // var flag = false;//声明一个变量
          $.ajax({
                  url : '/user/chechEmailExist',
                  type : 'post',
                  async: false,//使用同步的方式,true为异步方式
                  data : {
                      'userEml':userEml
                  },//这里使用json对象
                  dataType : "json",
                  contentType: 'application/x-www-form-urlencoded; charset=UTF-8',//防止乱码
                  success : function(data){
                      if(data.success == true){
                         layer.tips('邮箱可用', '#userEml',{
                               tipsMore: true,
                               tips: [4, '#78BA32']
                           });
                          is= true;
                          // alert(is);
                      }else{
                          // layer.msg('邮箱已存在', {icon: 2});
                           layer.tips('邮箱已存在', '#userEml',{
                               tipsMore: true,
                               tips: [2, '#ff120a']
                           });
                          // console.log("邮箱已存在");
                          is= false;
                      }
                  },
                  error:function(){
                      layer.msg('error:请求失败', {icon: 2});
                      return 1;
                  },
    
              }
          );
      }
      function checkStrong() {
          var sValue = $("#userpwd").val();
          var modes = 0;
          //正则表达式验证符合要求的
          if (sValue.length < 1) return modes;
          if (/\d/.test(sValue)) modes++; //数字
          if (/[a-z]/.test(sValue)) modes++; //小写
          if (/[A-Z]/.test(sValue)) modes++; //大写
          if (/\W/.test(sValue)) modes++; //特殊字符
    
          //逻辑处理
          switch (modes) {
              case 1:
                  layer.tips('密码强度极低', '#userpwd',{
                      tipsMore: true,
                      tips: [2, '#ff120a']
                  });
                  return 1;
                  break;
              case 2:
                  layer.tips('密码强度还行', '#userpwd',{
                      tipsMore: true
                  });
                  return 2;
    
              case 3:
              case 4:
                  return sValue.length < 12 ? 3 : 4
                  break;
          }
      }
    
      function checkNameFormat(){
          var obj = document.getElementById("checkName"); //要验证的对象
          if(obj.value === ""){ //输入不能为空
              layer.tips('用户名不能为空', '#checkName',{
                  tipsMore: true
              });
              // layer.msg('用户名不能为空!', {icon: 2});
              return false;
          }else{
              return true;
          }
      }
    
    
      function submitForm(){
          // var userEml = document.getElementById("userEml"); //要验证的对象
          var nameIsTrue = checkNameFormat();
          var emailIsTrue =  checkEmailFormat();
          var isPassword = checkStrong();
          // if (nameIsTrue){
          //     alert("true");
          // }
    
          // alert(isPassword);
          if (isPassword == 0){
              layer.tips('密码为空', '#userpwd',{
                  tipsMore: true
              });
          }
    
          // alert(is+""+nameIsTrue);
    
          // alert(nameIsTrue);
          if (nameIsTrue ){
              if (is){
    
                  if (checkStrong()!=0){
                      if (isPassword != 0){
                          layer.tips('密码为空', '#userpwd',{
                              tipsMore: true
                          });
                      }
                      $("#registerForm").submit();
                      layer.load();
                  }
                  // alert("密码为空");
    
                  checkStrong()
              }
    
    
          }
    
      }
    
      $(function () {
    
          $("#checkName").blur(function () {
              var nameTrue =  checkNameFormat();
              if (nameTrue == true){
                  // layer.msg('即将验证'+userEml+'是否可用', {icon: 1});
              }
          }).keyup(function(){
              //triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点
              $(this).triggerHandler("blur");
          }).focus(function(){
              $(this).triggerHandler("blur");
          });
    
    
          $("#userpwd").blur(function () {
    
              checkStrong();
              // checkEmlAjax();
              // checkEmailFormat();
              /*if (emailTrue == true){
                    // layer.msg('即将验证'+userEml+'是否可用', {icon: 1});
                   checkEmlAjax(userEml);
              }*/
    
              // var userEml = document.getElementById("userEml"); //要验证的对象
    
          }).keyup(function(){
              //triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点
              $(this).triggerHandler("blur");
          }).focus(function(){
              $(this).triggerHandler("blur");
          });
    
    
    
          $("#userEml").blur(function () {
              checkEmailFormat();
              // checkEmlAjax();
              // checkEmailFormat();
              /*if (emailTrue == true){
                    // layer.msg('即将验证'+userEml+'是否可用', {icon: 1});
                   checkEmlAjax(userEml);
              }*/
    
              // var userEml = document.getElementById("userEml"); //要验证的对象
    
          }).keyup(function(){
              //triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点
              $(this).triggerHandler("blur");
          }).focus(function(){
              $(this).triggerHandler("blur");
          });
      });
      window.is=false;
    </script>
    </body>
    </html>

package com.yaosiyuan.controller;
    
    import com.alibaba.fastjson.JSON;
    import com.alibaba.fastjson.JSONObject;
    import com.yaosiyuan.model.User;
    import com.yaosiyuan.service.IUserService;
    import org.apache.shiro.SecurityUtils;
    import org.apache.shiro.authc.UsernamePasswordToken;
    import org.apache.shiro.subject.Subject;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.ModelAttribute;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.servlet.ModelAndView;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.HashMap;
    
    /**
     * @ClassName UserController
     * @Description TODO
     * @Author yaosiyuan
     * @Date 2019/4/22 15:45
     * @Version 1.0
     **/
    @Controller
    @RequestMapping("/user")
    public class UserController {
    
        @Autowired
        private IUserService userService = null;
    
    
        /**
         * @Author YaoSiyuan
         * @Description //TODO
         * @Date 0:14 2019/5/8
         * @Param [request, model, modelAndView, catId, groupName]
         * @return java.lang.String
         **/
        @RequestMapping(value = "/chechEmailExist", method = RequestMethod.POST)
        public String del(HttpServletRequest request, HttpServletResponse response, Model model, ModelAndView modelAndView, String userEml) throws IOException {
            request.setCharacterEncoding("UTF-8");//防止乱码
    
            HashMap<String, Object> map = new HashMap<>();
            User userByEmail = userService.findUserByEmail(userEml);
    
            if (userByEmail == null){
                //删除成功
                map.put("success",true);
                map.put("msg","可用");
            }else {
                map.put("success",false);
                map.put("msg","不可用");
            }
            response.setContentType("text/html;charset=utf-8");
    
            JSONObject jsonObject = JSON.parseObject(JSON.toJSONString(map));
            PrintWriter out = response.getWriter();
            //返回信息
            out.print(jsonObject);
            out.flush();
            out.close();
    
            return "redirect:/";
        }
    
    
    
        @RequestMapping(value = "/login", method = RequestMethod.POST)
        public String test(HttpServletRequest request, Model model, @ModelAttribute User user) {
    
            String userpwd = user.getUserpwd();
            String usereml = user.getUsereml();
            String error = null;
            if (usereml != null && userpwd != null) {
                //初始化
                Subject subject = SecurityUtils.getSubject();
                UsernamePasswordToken token = new UsernamePasswordToken(usereml, userpwd);
                try {
                    //登录，即身份校验，由通过Spring注入的UserRealm会自动校验输入的用户名和密码在数据库中是否有对应的值
                    subject.login(token);
                    String logUserEmail = token.getUsername();
    //                model.addAttribute("logUserEmail",logUserEmail);
    
                    request.getSession().setAttribute("logUserEmail", logUserEmail);
    //                model.addAttribute("logUserEmail",session.getAttribute("logUserEmail"));
    //                redirectAttributes.addAttribute("logUserEmail",logUserEmail);
                    return "redirect:/";
                } catch (Exception e) {
                    e.printStackTrace();
                    error = "未知错误，错误信息：" + e.getMessage();
                }
            } else {
                error = "请输入用户名和密码";
            }
            //登录失败，跳转到login页面，这里不做登录成功的处理，由
            model.addAttribute("error", error);
            return "redirect:/user";
        }
    
    
        @RequestMapping(method = RequestMethod.GET)
        public String login(HttpServletRequest request, Model model) {
            return "admin/login";
        }
    
        @RequestMapping(value = "/logout", method = RequestMethod.GET)
        public String logout(HttpServletRequest request, Model model) {
            return "/";
        }
    
        @RequestMapping(value = "/register", method = RequestMethod.GET)
        public String register(HttpServletRequest request, Model model) {
            return "/admin/register";
        }
    
        @RequestMapping(value = "/register", method = RequestMethod.POST)
        public String postRegister(HttpServletRequest request, Model model, @ModelAttribute User user) {
            User newuser = new User();
            String username = user.getUsername();
            String usereml = user.getUsereml();
            String userpwd = user.getUserpwd();
            newuser.setUserpwd(user.getUserpwd());
            userService.saveUser(user);
            request.getSession().setAttribute("user", user);
            return "redirect:/user";
        }
    
    
    
        @RequestMapping(value = "/alter", method = RequestMethod.GET)
        public String admin(HttpServletRequest request, Model model) {
            return "/admin/alter";
        }
    }