如何在不单击按钮的情况下验证电子邮件

How to validate email without button click

本文关键字：情况下 验证 电子邮件 按钮 单击      更新时间：2023-09-26

我有以下代码，我正在通过单击按钮来验证电子邮件。我希望电子邮件验证应该在没有按钮单击的情况下进行。意味着我希望当我在文本框中编写电子邮件时，它应该得到验证。

下面是我的代码 - 

<!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>

问候

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

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

您应该将一个事件附加到该输入元素并使用 javasciprt 对其进行验证。

检查这个工作小提琴

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)
});

原生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>

如果你想

尽量减少验证函数的触发，你可以给输入 type="submit" 一个 id 并附加一个 mouseenter 侦听器（加上一个函数来防止函数在无效电子邮件时单击

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

我以前用过这个 - 我们的 QA 测试人员在验证函数触发之前尽其所能单击按钮，但无法。

使用 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>

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

网页代码

<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;  
    }
}
相关文章：