使用 Materialise 和 jQuery 进行电子邮件验证

Question

我正在尝试使用 Materialize 制作一个表单来验证一封电子邮件。我从一个切换为禁用的提交按钮开始。理想情况下，当电子邮件被填写并验证后，提交按钮将不再被禁用，用户可以单击它进入下一页。这是我的 HTML：

<form id="survey">

        <div class="input-group">
            <p class="input-header">Enter Your Email</p>
            <div class="input-block input-field">
        <input id="email" type="text" name= "email" class="validate" required="" aria-required="true">
        <label for="email">Email Address</label>
      </div>
      <br></br>

        <a class="waves-light btn red lighten-2 disabled" id="submit">Submit
        <i class="material-icons right">send</i>
        </a>
        <br></br>
        <br></br>
        <br></br>

</form>

这里是 JavaScript/jQuery：

$(document).ready(function(){
  $('.parallax').parallax();

$('body').on('click', '#submit', function() {
let decision = confirm('Are you sure you would like to submit your survey?');
if (decision) {
  $.post('insert.php', $('#survey').serialize());
 window.location.href = 'thankyou.php';
}
});

$('body').on('click', 'input', function() {
checkValidity($(this));
});
$('body').on('focusout', 'input', function() {
checkValidity($(this));
});

function checkValidity (current) {
let isValid = true;
if (!current.val()) {
  isValid = false;
} else {
  isValid = iteratatingForm(current);
}
const submit = $('#submit');
if (isValid) {
  submit.removeClass('disabled');
} else {
  if (!submit.hasClass('disabled')) {
    submit.addClass('disabled');
  }
}
}

function iteratatingForm (current) {
if (!document.forms['survey']['email'].value) return false;
return true;
}});

请让我知道我做错了什么！谢谢！

Answer 1

解决此问题的另一种方法是将regex 字段添加到您的<input ... 元素，例如

<div class="input-field col s6">
  <input id="email" type="text" class="validate" value="hello@email.com" regex="(?!.*\.\.)(^[^\.][^@\s]+@[^@\s]+\.[^@\s\.]+$)" required="" aria-required="true" value="hello@email.com" >
  <label for="email">Email</label>
  <span class="helper-text" data-error="Invalid email address."></span>
</div>

这样做的好处是您可以对其他字段进行单独的正则表达式验证。例如，您可以有其他输入，例如 name / age 例如

1. name（仅包含由单个空格分隔的大写字符组，例如 JAMES JONES - regex = ^[A-Z]*(\s[A-Z]+)*$）。
2. age（仅包含数字 - regex = ^\d+$）。

注意：- 我推荐 https://regex101.com/ 网站来测试我们的正则表达式与示例文本。

使用例如验证JQuery - 您可以为每个 input 元素添加侦听器：-

$(document).ready(function(){
  $("input").on('input propertychange blur', function(event) {
    var elm = event.currentTarget;
    var val = elm.value;
    var isValid = true; // assume valid
    
    // check if required field
    if (elm.hasAttribute("required")) {
      isValid = val.trim() !== '';
    }
    // now check if regex
    if (isValid && elm.hasAttribute("regex")) {
      var regex = new RegExp(elm.getAttribute("regex"), 'g');
      isValid = regex.test(val);
    }
    
    elm.classList.remove(isValid ? "invalid" : "valid");
    elm.classList.add(isValid ? "valid" : "invalid");
    updateButtonState();
  });
});

function updateButtonState () {
  var numOfInvalid = $('input.invalid').length;
  if (numOfInvalid > 0) {
    $('.submit-button').prop('disabled', true);
    $('.submit-button').addClass('disabled');
  }
  else{
    $('.submit-button').prop('disabled', false);
    $('.submit-button').removeClass('disabled');
  }
}

当页面加载时，JQuery 函数会监听输入的变化（以及模糊事件）。它首先检查输入是否为必填字段，并首先对其进行验证。接下来，它会检查是否存在 regex 属性，如果存在，则执行基于正则表达式的验证。

如果验证失败，则该函数添加/删除与 Materialize CSS 相关的类，然后最终更新按钮状态。这是可选的，但如果您正在填写表单，则非常好（仅当一切都有效时才启用按钮）。

查看以下 CodePen 以了解所有实际操作：-

• https://codepen.io/bobmarks/pen/oNGGvWq

Answer 2

您可以使用email 类型作为您的输入，并使用一个按钮submit 来触发验证输入。 我添加了一个功能来检查电子邮件是否使用正则表达式有效。 （在这里找到：How to validate email address in JavaScript?） 您必须添加jQuery Validation Plugin

$(document).ready(function(){
  
  $('#survey input').on('keyup', function(){
   var validator = $("#survey").validate();
  if (validator.form() && validateEmail($('#email').val())) {
    $('#submitButton').prop('disabled', false);
    $('#submitButton').removeClass('disabled');
  }
    else{
      $('#submitButton').prop('disabled', true);
      $('#submitButton').addClass('disabled');
      }
  }  );

  function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email.toLowerCase());
}
  /*
    Confirmation Window
  */
  $('body').on('click', '#submit', function() {
    let decision = confirm('Are you sure you would like to submit your survey?');
    if (decision) {
      $.post('insert.php', $('#survey').serialize());
     window.location.href = 'thankyou.php';
    }
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<form id="survey">

			<div class="input-group">
				<p class="input-header">Enter Your Email</p>
				<div class="input-block input-field">
	        <input id="email" type="email" name= "email" class="validate" required="true" aria-required="true">
	        <label for="email">Email Address</label>
	      </div>

  <button type="submit" form="survey" value="Submit" class="waves-light btn red lighten-2 disabled" disabled='disabled' id="submitButton">Submit</button>
		</form>

由于 jQuery 验证插件导致的 StackOverflow sn-p 错误，但它适用于 CodePen