jQuery-表单验证插件~

Qing

2023-5-2

效果图

废话不多说,先看效果图

代码

html代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="./js/FormValidation.js"></script>
  <link href="./css/FormValidation.css" rel="stylesheet" type="text/css" />
  <title>jQuery-表单验证</title>

</head>

<body>
  <div class="main">
    <form action="form" onsubmit="return func();">
      <div class="container">
        <div class="card">
          <a class="singup">jQuery-表单验证</a>

          <div class="inputBox">
            <input type="text" required="required" class="Username">
            <span class="info1">Username</span>

          </div>
          <div class="inputBox1">
            <input type="text" required="required" class="Email">
            <span class="info2">Email</span>
          </div>

          <div class="inputBox">
            <input type="password" required="required" class="Password">
            <span class="info3">Password</span>
          </div>

          <button class="enter" type="submit">Enter</button>

        </div>
      </div>
  </div>
  </form>


</body>
<script>
  $(function () {
    // 给username 输入框绑定焦点失去事件
    $('.Username').blur(function () {
      $('.Username').tooltip('userName'); // 用户名验证函数
    })
    // Email 输入框绑定焦点失去事件
    $('.Email').blur(function () {
      $('.Email').tooltip('email'); // 邮箱验证函数
    })
    // Password 输入框绑定焦点失去事件
    $('.Password').blur(function () {
      $('.Password').tooltip('password'); // 密码验证函数
    })



  })

  // 表单验证,全为true 则提交,反之不提交
  function func() {

    var flag1 = $('.Username').tooltip('userName');
    var flag2 = $('.Email').tooltip('email');
    var flag3 = $('.Password').tooltip('password');
    if (flag1 && flag2 && flag3) {
      return true;
    } else {
      alert("请填写正确的用户名密码或邮箱!!!");
      return false;

    }

  }
</script>

</html>

JS代码

;
(function ($) {

  var methods = {
    //用户名验证
    userName: function () {
      // 定义默认字段
      var success = "success";
      var error = "Error";
      var info = "UserName";
      // 用户名验证的正则表达式
      var reg = /^[a-zA-Z0-9\_\+\-\&\$\*]{6,10}$/;
      // 用户名为空的情况
      if (this.val() == '') {
        // $(".info1").css('color','#000');
        $(".info1").show().html(info);
        return false;
      } else if (this.val().match(reg)) { // 用户名正则匹配
        $(".info1").css('color', 'green');
        // $(".info1").css('background','#fff');
        $(".info1").show().html(success);
        return true;

      } else { // 正则匹配失败触发的事件
        $(".info1").css('color', 'red');
        $(".info1").show().html(error);
        return false;
      }


    },
    // 密码验证
    password: function () {
      // 定义默认字段
      var success = "success";
      var error = "Error";
      var info = "Password";
      // 密码验证正则表达式
      var reg = /^[a-zA-Z0-9\_\-]{8,10}$/;
      // 密码为空的情况
      if (this.val() == '') {
        // $(".info1").css('color','#000');
        $(".info3").show().html(info);
        return false;
      } else if (this.val().match(reg)) {  // 正则匹配
        $(".info3").css('color', 'green');
        $(".info3").show().html(success);
        return true;
      } else { // 匹配失败的情况
        $(".info3").css('color', 'red');
        $(".info3").show().html(error);
        return false;
      }

    },
    //邮箱验证
    email: function () {
      // 定义默认字段
      var success = "success";
      var error = "Error";
      var info = "Email";
      // 邮箱验证正则表达式
      var reg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;
      //  邮箱为空的情况
      if (this.val() == '') {
        // $(".info1").css('color','#000');
        $(".info2").show().html(info);
        return false;
      } else if (this.val().match(reg)) { // 正则匹配
        $(".info2").css('color', 'green');
        $(".info2").show().html(success);
        return true;
      } else { // 匹配失败事件
        $(".info2").css('color', 'red');
        $(".info2").show().html(error);
        return false;
      }

    }


  };
// 函数调用的方法
  $.fn.tooltip = function (method) {

    // Method calling logic
    if (methods[method]) {
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
      return methods.init.apply(this, arguments);
    } else {
      $.error('Method ' + method + ' does not exist on jQuery.tooltip');
    }

  };

})(jQuery);

CSS代码

.main{
    display: flex;
    justify-content: center;
    align-items: center;
}
.singup {
  color: #000;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  font-weight: bold;
  font-size: x-large;
  margin-top: 1.5em;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 350px;
  width: 300px;
  flex-direction: column;
  gap: 35px;
  border-radius: 15px;
  background: #e3e3e3;
  box-shadow: 16px 16px 32px #c8c8c8,
        -16px -16px 32px #fefefe;
  border-radius: 8px;
}

.inputBox,
.inputBox1 {
  position: relative;
  width: 250px;
}

.inputBox input,
.inputBox1 input {
  width: 100%;
  padding: 10px;
  outline: none;
  border: none;
  color: #000;
  font-size: 1em;
  background: transparent;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  transition: 0.1s;
  border-bottom-left-radius: 8px;
}

.inputBox span,
.inputBox1 span {
  margin-top: 5px;
  position: absolute;
  left: 0;
  transform: translateY(-4px);
  margin-left: 10px;
  padding: 10px;
  pointer-events: none;
  font-size: 12px;
  color: #000;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 3px;
  border-radius: 8px;
}

.inputBox input:valid~span,
.inputBox input:focus~span {
  transform: translateX(113px) translateY(-15px);
  font-size: 0.8em;
  padding: 5px 10px;
  background: #000;
  letter-spacing: 0.2em;
  color: #fff;
  border: 2px;
}

.inputBox1 input:valid~span,
.inputBox1 input:focus~span {
  transform: translateX(156px) translateY(-15px);
  font-size: 0.8em;
  padding: 5px 10px;
  background: #000;
  letter-spacing: 0.2em;
  color: #fff;
  border: 2px;
}

.inputBox input:valid,
.inputBox input:focus,
.inputBox1 input:valid,
.inputBox1 input:focus {
  border: 2px solid #000;
  border-radius: 8px;
}

.enter {
  height: 45px;
  width: 100px;
  border-radius: 5px;
  border: 2px solid #000;
  cursor: pointer;
  background-color: transparent;
  transition: 0.5s;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 3em;
}

.enter:hover {
  background-color: rgb(0, 0, 0);
  color: white;
}

文件结构

下载

此内容查看价格为5资源币，VIP 8折，请先

客服QQ:3517283258

版权声明 1 本网站名称：QingYu
2 本站永久网址：https://landaiqing.space
3 当前文章标题：jQuery-表单验证插件~
4 当前文章网址：https://landaiqing.space/508.html
5 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ进行删除处理。
6 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
7 如您发现本站提供资源链接失效，请联系我们处理。

THE END