西北乱跑娃 --- html登录案例js验证

最新推荐文章于 2024-06-16 01:19:55 发布

西北乱跑娃

最新推荐文章于 2024-06-16 01:19:55 发布

阅读量909

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/human_soul/article/details/104733366

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在你测试代码之前请自行准备好jquery.min文件

效果展示

在这里插入图片描述

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input{
            border: solid wheat 2px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
<div style="margin-left: 300px; margin-top: 170px">
    手机号码：<input type="text" name="" class="phone"></br></br>
    邮&emsp;&emsp;箱：<input type="text" name="mail" class="mail"></br></br>
    <input type="checkbox" name="rememberme" value="0"><span style="font-size: 10px">记住我</span></label></br></br>
    <button class="push" style="width: 250px; height: 30px; background-color: limegreen">提交</button>
</div>

</body>
<script src="jquery.min.js"></script>
<script src="login.js"></script>
<script src="message.js"></script>
</html>

login.js

// 登录验证
$(function(){
    var $phone = $('.phone');
    var $mail = $('.mail');
    var $submit = $('.push');
    var isPhoneReady = false;
    var isMailReady = false;

    // 验证手机号码
    $phone.blur(fnCheckPhone);
    function fnCheckPhone() {
        let phone = $phone.val();
        if (phone==='') {
            message.showError('手机号不能为空')
            isPhoneReady = false;
            return;
        }
        if(!(/^1[3-9]\d{9}$/).test(phone)){
            message.showError('手机号码不符合规范！')
            isPhoneReady = false;
        }else {
            message.showSuccess('手机号码可以正常使用！')
            isPhoneReady = true;
        }
    }

    // 验证邮箱
    $mail.blur(fnCheckMail);
    function fnCheckMail() {
        let mail = $mail.val();
        if (mail === '') {
            message.showError('邮箱地址不能为空！');
            isMailReady = false;
            return;
        }
        if (!(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/).test(mail)) {
            message.showError('邮箱地址不符合规范！')
            isMailReady = false;
        } else {
            message.showSuccess('您的邮箱可以正常使用！');
            isMailReady = true;
        }
    }

    // 登录验证
    $submit.click(fnSubmit);
    function fnSubmit () {
        if (isPhoneReady===false || isMailReady===false) {
            message.showError('请重新检查账户或密码')
        }else {
            message.showSuccess('登录中')
            // $.ajax({
            //     url: '/register',
            //     type: 'POST',
            //     dataType: 'json',
            //     data : {
            //       'school_num': $school_num.val(),
            //       'password': $password.val(),
            //       'repeat_password': $repeat_password.val(),
            //     },
            //     success: function (res) {
            //         if (res.data==0){
            //             message.showError('账户已存在')
            //             isSchoolReady = true;
            //             isPasswordReady = true;
            //         }else if(res.data==1){
            //             message.showSuccess('注册成功')
            //             location.href ="/login"
            //         }else {
            //             message.showError('密码不一致')
            //             isSchoolReady = true;
            //             isPasswordReady = true;
            //         }
            //     },
            //     error: function (xhr, msg) {
            //         message.showError('服务器超时，请重试！')
            //     }
            // });
        }
    }
});

message.js

注意：message文件不需要改动，是绑定系统的提示插件，直接使用即可。

"use strict";

// 消息提示框
function Message() {
  // 判断是否加载
  this.isAppended = false;
  // 提示框的宽度
  this.wrapperWidth = 400;
  // 提示框的高度
  this.wrapperHeight = 48;
  // 提示框初始化样式
  this.initStyle();
  // 提示框初始化元素
  this.initElement();
  // 提示框监听关闭按钮
  this.listenCloseEvent();
}

// 初始化样式
Message.prototype.initStyle = function () {
  // 错误消息文字和背景样式
  this.errorStyle = {
    "wrapper": {
      "background": "#f8d7da",
      "color": "#dc3545"
    },
    "close": {
      "color": "#993d3d"
    }
  };
  // 成功消息文字和背景样式
  this.successStyle = {
    "wrapper": {
      "background": "#d4edda",
      "color": "#28a745"
    },
    "close": {
      "color": "#468847"
    }
  };
  // 描述信息文字和背景样式
  this.infoStyle = {
    "wrapper": {
      "background": "#d1ecf1",
      "color": "#17a2b8"
    },
    "close": {
      "color": "#5bc0de"
    }
  };
};

// 初始化元素
Message.prototype.initElement = function () {
  // 设置提示框元素
  this.wrapper = $("<div></div>");
  // 设置提示框整体样式
  this.wrapper.css({
    'padding': '10px',
    'font-size': '14px',
    'width': this.wrapperWidth,
    'position': 'fixed',
    'z-index': 99999,
    'left': 'calc(50% - ' + this.wrapperWidth / 2 + 'px)',
    'top': -this.wrapperHeight,
    'height': this.wrapperHeight,
    'box-sizing': 'border-box',
    'border': '1px solid #ddd',
    'border-radius': '5px',
    'line-height': 'calc(' + this.wrapperHeight / 2 + 'px)',
    'font-weight': 600
  });
  // 生成关闭按钮
  this.closeBtn = $("<span>×</span>");
  // 关闭按钮的样式
  this.closeBtn.css({
    'float': 'right',
    'cursor': 'pointer',
    'font-size': '24px',
    'font-weight': 500
  });
  // 提示文字的元素生成
  this.messageSpan = $("<span class='py-message'></span>");
  // 将提示文字的元素和关闭按钮添加到提示框中
  this.wrapper.append(this.messageSpan);
  this.wrapper.append(this.closeBtn);
};

// 关闭按钮的事件
Message.prototype.listenCloseEvent = function () {
  var _this = this;

  // 点击关闭
  this.closeBtn.click(function () {
    _this.wrapper.animate({ "top": -_this.wrapperHeight });
  });
};

// 显示异常
Message.prototype.showError = function (message) {
  this.show(message, "error");
};

Message.prototype.showSuccess = function (message) {
  this.show(message, "success");
};

Message.prototype.showInfo = function (message) {
  this.show(message, "info");
};

// 提示框的显示
Message.prototype.show = function (message, type) {
  var _this2 = this;

  // 如果没有添加  则添加
  if (!this.isAppended) {
    $(document.body).append(this.wrapper);
    this.isAppended = true;
  }

  // 将各种提示的文字添加对应不同的样式
  this.messageSpan.text(message);
  if (type === "error") {
    this.wrapper.css(this.errorStyle['wrapper']);
    this.closeBtn.css(this.errorStyle['close']);
  } else if (type === "info") {
    this.wrapper.css(this.infoStyle['wrapper']);
    this.closeBtn.css(this.infoStyle['close']);
  } else if (type === "success") {
    this.wrapper.css(this.successStyle['wrapper']);
    this.closeBtn.css(this.successStyle['close']);
  }
  // 设置两秒后自动关闭
  this.wrapper.animate({ "top": 0 }, function () {
    setTimeout(function () {
      _this2.wrapper.animate({ "top": -_this2.wrapperHeight });
    }, 2500);
  });
};
// 将对象绑定到 window 上
window.message = new Message();

西北乱跑娃

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
西北乱跑娃 --- html登录案例js验证

在你测试代码之前请自行准备好jquery.min文件效果展示login.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> in...
复制链接

扫一扫