Question

我有以下代码，我在按钮点击时验证电子邮件。我希望无需点击按钮即可进行电子邮件验证。我希望当我将在文本框中写入电子邮件时，它应该得到验证。

以下是我的代码 -

<!DOCTYPE html>
<html>
<body>

<form >
  E-mail: <input type="email" id="myEmail" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
  <input type="submit">
</form>
</body>
</html>

此致

Answer 1

每当输入字段的值发生变化时，您应该运行验证代码（验证代码：将当前内容与正则表达式匹配）。使用jquery，它看起来像这样：

$("#email").on("keyup change paste cut", function() { 
   // validate here 
});

Answer 2

您应该将事件附加到该输入元素并使用javasciprt验证它。

检查此工作Fiddle

var patt = new RegExp("[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$");

$('body').on('keyup change paste cut', '#myEmail', function() {

    var res = patt.test($(this).val()) === true  ? 'Correct Email' : 'You have entered some crap';
  $('.result').text(res)
});

Answer 3

使用JavaScript和jQuery库，您可以在表单字段中附加和处理多个事件。

此外，您应该在表单中添加novalidate布尔属性，以防止在提交时进行表单数据（输入）验证：

$('#form').on('keyup change paste cut click', '#mySubmit, #myEmail', function(e) {
    var pattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i,
        emailVal = $('#myEmail').val(),
        emailErrorMsg = (!emailVal || !pattern.test(emailVal)) 
        ? 'Error validation message'
        : '';

    $('.email-error').text(emailErrorMsg);

    if (emailErrorMsg) {
        e.preventDefault();
    }
});

.error {color: red;}
.submit {margin-top: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" novalidate>
    Email: <input type="email" id="myEmail" name="email">
    <div class="email-error error"></div>
    <input type="submit" id="mySubmit" class="submit">
</form>

Answer 4

原生JS解决方案

您可以将this.checkValidity()与onblur结合使用：

<form >
  E-mail: <input type="email" id="myEmail" onblur="this.style.borderColor= this.checkValidity() ? 'green' : 'red'" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
  <input type="submit">
</form>

<form >
      E-mail: <input type="email" id="myEmail" onblur="this.style.borderColor= this.checkValidity() ? 'green' : 'red'" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
      <input type="submit">
</form>

或者与onkeyup结合使用会显示消息（有点烦人）：

<form >
  E-mail: <input type="email" id="myEmail" onkeyup="this.checkValidity() || this.form.submit.click()" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
  <input name="submit" type="submit">
</form>

<form >
  E-mail: <input type="email" id="myEmail" onkeyup="this.checkValidity() || this.form.submit.click()" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
  <input name="submit" type="submit">
</form>

Answer 5

作为一种变体，如果你想最小化验证函数的触发，你可以给输入type =“submit”一个id并附加一个mouseenter监听器（加上一个函数来阻止函数点击，如果无效的电子邮件）：< / p>

$("#input-submit").mouseenter(function () {
    //validation function - but also prevents the button click if email invalid
});

我之前使用过这个 - 我们的QA测试人员在验证功能被激活之前尝试了所有他可以单击按钮的功能，但却没有。

Answer 6

没有 jQuery 库电子邮件验证。只需使用非常简单的代码。有条件的验证。

HTML 代码

<body>
    <form action="/hello" onchange="ValidateEmail()">
        <input type="text" placeholder="Your email address..." id='input_id' required>
        <button id="myBtn" type="submit">Notify Me</button>
    </form>
    <p id="validation"></p>
    <script src="main.js"></script>
 </body>

JS 代码

function ValidateEmail() {
    var x = document.getElementById('input_id').value
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length || x==='') {
        document.getElementById("validation").innerHTML = "Please provide a valid email address";
        document.getElementById("myBtn").disabled = true;      
    }
    else{
        document.getElementById("validation").innerHTML = "";
        document.getElementById("myBtn").disabled = false;  
    }
}

如何在没有按钮点击的情况下验证电子邮件

6 个答案:

原生JS解决方案