如何在不单击按钮的情况下验证电子邮件
[英]How to validate email without button click
问题描述
我有以下代码，用于在单击按钮时验证电子邮件。 我希望电子邮件验证应该在没有按钮点击的情况下发生。 意味着我想要在文本框中编写电子邮件时，它应该得到验证。
下面是我的代码 -
<!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>
问候
6 个解决方案
解决方案1
0 2016-07-13 13:45:39
只要输入字段的值发生变化，您就应该运行验证代码（验证代码：将当前内容与正则表达式匹配）。 使用 jquery，它看起来像这样：
$("#email").on("keyup change paste cut", function() {
// validate here
});
解决方案2
0 2016-07-13 13:50:21
您应该将事件附加到该输入元素并使用 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)
});
解决方案3
0 2016-07-13 14:10:43
使用 JavaScript 和 jQuery 库，您可以在表单字段中附加和处理多个事件。
此外，您应该在表单中添加novalidate布尔属性，以防止提交时进行表单数据（输入）验证：
$('#form').on('keyup change paste cut click', '#mySubmit, #myEmail', function(e) { var pattern = /^\\b[A-Z0-9._%-]+@[A-Z0-9.-]+\\.[AZ]{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>
解决方案4
0 2016-07-13 14:15:59
原生 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.-]+\\.[az]{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.-]+\\.[az]{2,3}$"> <input name="submit" type="submit"> </form>
解决方案5
0 2016-07-13 14:17:52
作为一种变体，如果你想最小化验证函数的触发，你可以给 input type="submit" 一个 id 并附加一个 mouseenter 侦听器（加上一个函数来防止函数在无效电子邮件时点击）：
$("#input-submit").mouseenter(function () {
//validation function - but also prevents the button click if email invalid
});
我以前使用过这个 - 我们的 QA 测试人员尝试了他所能做的一切，在验证功能触发之前点击按钮，但没有。
解决方案6
0 2021-04-11 06:24:05
没有 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;
}
}
如何仅在单击按钮后验证数据？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.