广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >怎么用Ajax异步方式实现登录与验证
  • 539

0
分享到

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

2024-04-02 19:04:59 539人浏览 薄情痞子
摘要

这篇文章主要介绍“怎么用ajax异步方式实现登录与验证”，在日常操作中，相信很多人在怎么用Ajax异步方式实现登录与验证问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用A

这篇文章主要介绍“怎么用ajax异步方式实现登录与验证”，在日常操作中，相信很多人在怎么用Ajax异步方式实现登录与验证问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用Ajax异步方式实现登录与验证”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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

登录代码

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

<div class="login_con_R">
      <h5>登录</h5>
      <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" >
          <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: '登录成功！'
            });
            
            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');
};

到此，关于“怎么用Ajax异步方式实现登录与验证”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 怎么用Ajax异步方式实现登录与验证

本文链接: https://www.lsjlt.com/news/76963.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 怎么用Ajax异步方式实现登录与验证
    这篇文章主要介绍“怎么用Ajax异步方式实现登录与验证”，在日常操作中，相信很多人在怎么用Ajax异步方式实现登录与验证问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用A...
    99+
    2022-10-19
  • Ajax中怎么实现异步传输与验证
    本篇文章为大家展示了Ajax中怎么实现异步传输与验证，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。代码如下:<script type="text/j...
    99+
    2022-10-19
  • 怎么用php+AJax+json实现登录验证
    随着WEB2.0和AJAX的发展，越来越多的站点采用了AJAX技术进行部分页面的异步加载。而PHP作为一种流行的Web开发语言，结合AJAX可以实现一些很酷的效果。本文将会介绍如何使用AJAX和JSON实现基本的登录验证功能。首先我们需要准...
    99+
    2023-05-14
    php ajax json
  • 怎么用vue实现登录注册及token验证
    本篇内容主要讲解“怎么用vue实现登录注册及token验证”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用vue实现登录注册及token验证”吧!1. 利用router.beforeEach...
    99+
    2023-07-04
  • 怎么使用jQuery,Angular实现登录界面验证码
    小编给大家分享一下怎么使用jQuery,Angular实现登录界面验证码，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！最终实现的...
    99+
    2022-10-19
  • springboot中怎么利用shiro实现多验证登录功能
    springboot中怎么利用shiro实现多验证登录功能，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。 首先新建一个shiroConfig shiro的配置类...
    99+
    2023-06-20
  • 使用golang怎么实现一个登录验证码功能
    这篇文章将为大家详细讲解有关使用golang怎么实现一个登录验证码功能，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。golang适合做什么golang可以做服务器端开发，但golang很适合...
    99+
    2023-06-06
  • 怎么使用javascript和jquery分别实现用户登录验证
    这篇文章主要介绍“怎么使用javascript和jquery分别实现用户登录验证”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么使用javascript和jquery分别实现用户登录验证”文章能帮...
    99+
    2023-07-04
  • 怎么使用AJAX实现页面登陆以及注册用户名验证
    这篇文章主要介绍了怎么使用AJAX实现页面登陆以及注册用户名验证，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。AJAX即“Asynchronous Javascript An...
    99+
    2023-06-08
  • 怎么在java中使用JDBC实现一个验证登录功能
    怎么在java中使用JDBC实现一个验证登录功能？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。java基本数据类型有哪些Java的基本数据类型分为：1、整数类型，用来表示整...
    99+
    2023-06-14
  • 如何在SpringBoot中使用Shiro怎么实现一个邮件验证码登录功能
    如何在SpringBoot中使用Shiro怎么实现一个邮件验证码登录功能？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。导入依赖（pom.xml）  &...
    99+
    2023-06-06
  • Java怎么实现开发网站注册、登录时经常需要用到短信验证码功能
    这篇文章主要讲解了“Java怎么实现开发网站注册、登录时经常需要用到短信验证码功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Java怎么实现开发网站注册、登录时经常需要用到短信验证码功能...
    99+
    2023-06-02
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作