Ajax异步方式实现登录与验证

前端技术 2023/09/09 AJAX

本文实例讲述了Ajax异步方式实现登录与验证的详细代码,分享给大家供大家参考。具体如下:

登录代码

这个是使用Bootstrap3的组件功能实现的

<div class=\"login_con_R\">
      <h4>登录</h4>
      <FORM id=\"loginFormId\" class=\"form-horizontal\" action=\"login\" method=\"post\">
        <div class=\"form-group input-group\">
          <span class=\"input-group-addon\"><span class=\"glyphicon glyphicon-user\"></span></span>
          <input type=\"text\" class=\"form-control\" placeholder=\"用户名\" name=\"username\" id=\"j_username\" value=\"koala\">
        </div>
        <div class=\"form-group input-group\">
          <span class=\"input-group-addon\"><span class=\"glyphicon glyphicon-lock\"></span></span>
          <input type=\"password\" name=\"password\" id=\"j_password\" class=\"form-control\" placeholder=\"密码\" value=\"888888\"/>
        </div>       
        <div class=\"form-group input-group\" style=\"margin-top: 45px;\">
          <button type=\"button\" class=\"btn btn-primary btn-block\" id=\"loginBtn\">登录</button>
        </div>
      </FORM>
    </div>

异步登录请求的代码

<script>
  $(function(){
    var btnLogin = $(\'#loginBtn\');
    var form = $(\'#loginFormId\');
    $(\'body\').keydown(function(e) {
      if (e.keyCode == 13) {
        dologin();
      }
    });
    btnLogin.on(\'click\',function() {
      dologin();
    });

    var dologin = function() {
      var userNameElement = $(\"#j_username\");
      var passwordElement = $(\"#j_password\");
      var username = userNameElement.val();
      var password = passwordElement.val();
      if (!Validation.notNull($(\'body\'), userNameElement, username, \'用户名不能为空\')) {
        return false;
      }
      if (!Validation.notNull($(\'body\'), passwordElement, password, \'密码不能为空\')) {
        return false;
      }
      btnLogin.attr(\'disabled\', \'disabled\').html(\'正在登录...\');
      var param = form.serialize();
      $.ajax({
        url: contextPath+\"/login.koala\",
        dataType: \"json\",
        data: param,
        type: \"POST\",
        success: function(data){
          if(data.success){
            $(\'.login_con_R\').message({
              type: \'success\',
              content: \'登录成功!\'
            });
            /*这里使用的异步请求,当请求登录成功的时候,重新定位到index界面*/
            window.location.href=contextPath+\"/index.koala\";
          }else{
            btnLogin.removeAttr(\'disabled\').html(\'登录\');
            $(\'.login_con_R\').message({
              type: \'error\',
              content: data.errorMessage
            });
          }
        }
      });
    };
    }); 

  </script>

使用到的验证js代码Validation.js

Validator = {
  Require : {expression:/.+/,errorMsg:\"该字段不能为空\"},
  Email : {expression:/^\\w+([-+.]\\w+)*@\\w+([-.]\\\\w+)*\\.\\w+([-.]\\w+)*$/,errorMsg:\"Email格式不正确\"},
  Mobile:{expression:/^(1[3|5|8]{1}\\d{9})$/,errorMsg:\"手机格式不正确\"},
  TelePhone:{expression:/^(((0\\d{2,3}-)?\\d{7,8}(-\\d{4})?))$/,errorMsg:\"电话号码格式不正确\"},
  IdCard:{expression:/^\\d{15}(\\d{2}[A-Za-z0-9])?$/,errorMsg:\"身份证号码格式不正确\"},
  Number:{expression:/^-?(\\d+|[1-9]\\d*\\.\\d+|0\\.\\d*[1-9]\\d*|0?\\.0+|0)$/,errorMsg:\"仅支持数字\"},
  English:{expression:/^[A-Za-z]+$/,errorMsg:\"仅支持英文字符\"},
  Chinese:{expression:/^[\\u0391-\\uFFE5]+$/,errorMsg:\"仅支持中文字符\"},
  URL:{expression:/^http:\\/\\/[A-Za-z0-9]+\\.[A-Za-z0-9]+[\\/=\\?%\\-&_~`@[\\]\\\':+!]*([^<>\\\"\\\"])*$/,errorMsg:\"URL地址格式不正确\"},
  Regex:{errorMsg:\"格式不正确\"},
  UnSafe : /^(([A-Z]*|[a-z]*|\\d*|[-_\\~!@#\\$%\\^&\\*\\.\\(\\)\\[\\]\\{\\}<>\\?\\\\\\/\\\'\\\"]*)|.{0,5})$|\\s/,
  IsSafe : function(str){return !this.UnSafe.test(str);},
  SafeString : {expression:\"this.IsSafe(value)\",errorMsg:\"仅支持中文字符\"},
  ErrorItem : [document.forms[0]],
  ErrorMessage : [\"以下原因导致提交失败:\\t\\t\\t\\t\"],
  Validate : function(theForm, mode){
    var obj = theForm || event.srcElement;
    var count = obj.elements.length;
    this.ErrorMessage.length = 1;
    this.ErrorItem.length = 1;
    this.ErrorItem[0] = obj;
    for(var i=0;i<count;i++){
      with(obj.elements[i]){
        if(disabled)continue;
        var _dataType = getAttribute(\"dataType\");
        if(typeof(_dataType) == \"object\" || typeof(this[_dataType]) == \"undefined\") continue;
        this.ClearState(obj.elements[i]);
        if(getAttribute(\"require\") == \"false\" && value == \"\") continue;
        var errorMsg = getAttribute(\"errorMsg\")? getAttribute(\"errorMsg\") : this[_dataType].errorMsg;
        errorMsg = errorMsg || \"invalid\";
        var validateExpr = getAttribute(\"validateExpr\");
        validateExpr = validateExpr || this[_dataType].expression;
        switch(_dataType){
          case \"Date\" :
          case \"Repeat\" :
          case \"Range\" :
          case \"Compare\" :
          case \"Custom\" :
          case \"Group\" :
          case \"Limit\" :
          case \"LimitB\" :
          case \"SafeString\" :
            if(!eval(validateExpr)) {
              this.AddError(i, errorMsg);
            }
            break;
          default :
            if(!eval(validateExpr).test(value)){
              this.AddError(i, errorMsg);
            }
            break;
        }
      }
    }
    if(this.ErrorMessage.length > 1){
      var content = this.ErrorMessage[1].replace(/\\d+:/,\" \");
      var $element = $(this.ErrorItem[1]);
      var name = $element.attr(\'name\');
      if(name.indexOf(\'DTO\') != -1){
        name = name.split(\'.\')[1];
      }
      var $targetElement = $element;
      var $tempElement = $targetElement.closest(\'form\').find(\'#\' + name + \'ID\');
      if($tempElement.hasClass(\'select\')){
        $targetElement = $tempElement;
      }
      showErrorMessage($element.closest(\'.modal\'), $targetElement, content);
      return false;
    }
    return true;
  },
  limit : function(len,min, max){
    min = min || 0;
    max = max || Number.MAX_VALUE;
    return min <= len && len <= max;
  },
  LenB : function(str){
    return str.replace(/[^\\x00-\\xff]/g,\"**\").length;
  },
  ClearState : function(elem){
    with(elem){
      if(style.color == \"red\")
        style.color = \"\";
      var ligertipid = getAttribute(\"ligertipid\");
      if(ligertipid && ligertipid != \"\"){
        removeAttribute(\"ligertipid\");
        $(elem).ligerHideTip();
      }
    }
  },
  AddError : function(index, str){
    this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];
    this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + \":\" + str;
  },
  Exec : function(op, reg){
    return new RegExp(reg,\"g\").test(op);
  },
  compare : function(op1,operator,op2){
    switch (operator) {
      case \"NotEqual\":
        return (op1 != op2);
      case \"GreaterThan\":
        return (op1 > op2);
      case \"GreaterThanEqual\":
        return (op1 >= op2);
      case \"LessThan\":
        return (op1 < op2);
      case \"LessThanEqual\":
        return (op1 <= op2);
      default:
        return (op1 == op2);
    }
  },
  MustChecked : function(name, min, max){
    var groups = document.getElementsByName(name);
    var hasChecked = 0;
    min = min || 1;
    max = max || groups.length;
    for(var i=groups.length-1;i>=0;i--)
      if(groups[i].checked) hasChecked++;
    return min <= hasChecked && hasChecked <= max;
  },
  IsDate : function(op, formatString){
    formatString = formatString || \"ymd\";
    var m, year, month, day;
    switch(formatString){
      case \"ymd\" :
        m = op.match(new RegExp(\"^\\\\s*((\\\\d{4})|(\\\\d{2}))([-./])(\\\\d{1,2})\\\\4(\\\\d{1,2})\\\\s*$\"));
        if(m == null ) return false;
        day = m[6];
        month = m[5]--;
        year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));
        break;
      case \"dmy\" :
        m = op.match(new RegExp(\"^\\\\s*(\\\\d{1,2})([-./])(\\\\d{1,2})\\\\2((\\\\d{4})|(\\\\d{2}))\\\\s*$\"));
        if(m == null ) return false;
        day = m[1];
        month = m[3]--;
        year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
        break;
      default :
        break;
    }
    var date = new Date(year, month, day);
    return (typeof(date) == \"object\" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate());
    function GetFullYear(y){return ((y<30 ? \"20\" : \"19\") + y)|0;}
  }
};

var Validation = {
  notNull: function($container, $element, content, errorMessage) {
    if (isNull(content)) {
      showErrorMessage($container, $element, errorMessage);
      return false;
    }
    return true;
  },
  email: function($container, $element, content, errorMessage) {
    var reg = new RegExp(/^(\\w)+(\\.\\w+)*@(\\w)+((\\.\\w{2,3}){1,3})$/);
    if (!reg.test(content)) {
      showErrorMessage($container, $element, errorMessage);
      return false;
    }
    return true;
  },
  serialNmuber: function($container, $element, content, errorMessage) {
    var reg = new RegExp(/^[0-9a-zA-Z_-]*$/);
    if (!reg.test(content)) {
      showErrorMessage($container, $element, errorMessage);
      return false;
    }
    return true;
  },
  number: function($container, $element, content, errorMessage) {
    var reg = new RegExp(/^[0-9]*$/);
    if (!reg.test(content)) {
      showErrorMessage($container, $element, errorMessage);
      return false;
    }
    return true;
  },
  humanName: function($container, $element, content, errorMessage) {
    var reg = new RegExp(/(^[A-Z a-z]*$)|(^[\\u4e00-\\u9fa5]*$)/);
    if (!reg.test(content)) {
      showErrorMessage($container, $element, errorMessage);
      return false;
    }
    return true;
  },
  checkByRegExp: function($container, $element, regExp, content, errorMessage){
    var reg = new RegExp(regExp);
    if (!reg.test(content)) {
      showErrorMessage($container, $element, errorMessage);
      return false;
    }
    return true;
  }
};

/**
 * 检查是否为空
 */
var isNull = function(item){
  if(item == null || item == \"\" || item.replace(/(^\\s*)|(\\s*$)/g, \"\") == \"\" ){
    return true;
  }
  return false;
};

/**
 * 显示提示信息
 */
var showErrorMessage = function($container, $element, content){
  $element.popover({
    content: content,
    trigger: \'manual\',
    container: $container
  }).popover(\'show\').on({
      \'blur\': function(){
        $element.popover(\'destroy\');
        $element.parent().removeClass(\'has-error\');
      },
      \'keydown\': function(){
        $element.popover(\'destroy\');
        $element.parent().removeClass(\'has-error\');
      }
    }).focus().parent().addClass(\'has-error\');
};

希望本文所述对大家学习有所帮助。

本文地址:https://www.stayed.cn/item/24892

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。