如何在不單擊按鈕的情況下驗證電子郵件
[英]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.