时间戳

首页 > 解决方案 > javascript自动验证在php文件中不起作用

javascript - javascript自动验证在php文件中不起作用

问题描述

$(document).ready(function() {
  $("#email").blur(function() {
    var email = $(this).val();
    var valid = "/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/";

    if (email = "" || email == null) {
      $('#email-e').css("color", "red");
      $('#email-e').html('❌ Please Enter your email');
    } else {
      if (!email.test(valid)) {
        $('#email-e').css("color", "red");
        $('#email-e').html('❌ Invalid email address');
      } else {
        $('#email-e').css("color", "green");
        $('#email-e').html('Valid email address');
      }

    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="test" id="email"><span id="emai-e"></span>

标签： javascriptphphtml

解决方案

  1. =是赋值，而不是比较，===是严格相等的，我们可以使用它
  2. 它是 regexp.test(text) 而不是 text.test(regexp)
  3. 你不需要引用正则表达式

我把它改成了var email =，const emailVal = 因为我们周围有很多电子邮件

$(function() {
  const valid = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

  $("#email").on("blur", function() {
    const emailVal = $(this).val();
    if (emailVal.trim() === "") { // field value is never null but can be empty
      $('#email-e').css("color", "red");
      $('#email-e').html('&#10060; Please Enter your email');
    } else { 
      if (!valid.test(emailVal)) {
        $('#email-e').css("color", "red");
        $('#email-e').html('&#10060; Invalid email address');
      } else {
        $('#email-e').css("color", "green");
        $('#email-e').html('Valid email address');
      }
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="test" id="email"> <span id="email-e"></span>

更短

$(function() {
  const valid = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

  $("#email").on("blur", function() {
    const emailVal = $(this).val();
    const empty = emailVal.trim() === "" // field value is never null but can be empty
    const isValid = !empty && valid.test(emailVal);
    let emailMessage = 'Valid email address';
    $('#email-e').css("color", isValid ? "green" : "red");
    if (empty) emailMessage = '&#10060; Please Enter your email';
    else if (!isValid) emailMessage = '&#10060; Invalid email address';
    $('#email-e').html(emailMessage)
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="test" id="email"> <span id="email-e"></span>

推荐阅读