[英]Javascript message alert box
我有這個javascript代碼:
function validate()
{
var email=document.getElementById('email').value;
var emailRegex=/^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/;
var emailResult=emailRegex.test(email);
alert("email:" +emailResult);
}
和html部分,在表單標簽上:
<input type="text" id="email" placeholder="EMAIL"><br><br>
<input type="submit" value="REGISTER" id="butt">
我想每次Regex測試返回false時都打印一條消息,但是我不想使用警報框。 我怎樣才能做到這一點?
形式:
<form id="registration" onsubmit="validate()">
<h3>S'ENREGISTRER</h3>
<label for="button">FULL NAME: </label>
<small>*</small>
<input type="text" name="fname" id="fullname" placeholder="FULL NAME"><br><br>
<label for="button">LAST NAME:</label>
<small>*</small>
<input type="text" name="lname" id="lastname" placeholder="LAST NAME"><br><br>
<label for="button">USERNAME:</label>
<small>*</small>
<input type="text" name="uname" id="username" placeholder="USERNAME"><br><br>
<label for="button">PASSWORD:</label>
<small>*</small>
<input type="password" name="pass" id="password" placeholder="PASSWORD"><br><br>
<label id = "kjo" for="button">EMAIL:</label>
<small>*</small>
<input type="text" id="email" placeholder="EMAIL"><br><br>
<input type="submit" value="REGISTER" id="butt" onclick="validate()">
<p id="result"></p>
<br><br>
<a href="login.html">LOGIN</a>
</form>
一種可能性是添加一個p
標簽(或div
, span
等),該標簽用作顯示測試結果的“字段”。
在這種情況下,我使用的是p
標簽。 為了打印結果,我使用innerText
像這樣:
function validate() { var email = document.getElementById('email').value; var emailRegex = /^[a-z0-9._-]+@[a-z0-9._-]+\\.[az]{2,6}$/; var emailResult = emailRegex.test(email); //alert("email:" + emailResult); // Show result withing the added p tag document.getElementById('result').innerText = "email: " + emailResult; }
<input type="text" id="email" placeholder="EMAIL"><br><br> <input type="submit" value="REGISTER" id="butt" onclick="validate()"> <p id="result"></p>
PS:我還向您的按鈕添加了onclick
屬性,以在單擊按鈕時觸發該功能。
編輯:
如果要顯示錯誤消息,請在提交表單后顯示PHP 。 在客戶端使用JavaScript(我們在這里所做的事情),您將無法實現。
解決此問題的一種方法是,如果電子郵件無效,則阻止表單提交:
function validate(event) { // Mind the "event" parameter here var email = document.getElementById('email').value; var emailRegex = /^[a-z0-9._-]+@[a-z0-9._-]+\\.[az]{2,6}$/; var emailResult = emailRegex.test(email); //alert("email:" + emailResult); // Check if the email is invalid. If not, dont' submit the form if (emailResult == false) { event.preventDefault(); // This line prevents the form from submitting document.getElementById('result').innerText = "email: " + emailResult; } }
<form id="registration" onsubmit="validate(event)"> <!-- mind the "event" parameter here --> <h3>S'ENREGISTRER</h3> <label for="button">FULL NAME: </label> <small>*</small> <input type="text" name="fname" id="fullname" placeholder="FULL NAME"><br><br> <label for="button">LAST NAME:</label> <small>*</small> <input type="text" name="lname" id="lastname" placeholder="LAST NAME"><br><br> <label for="button">USERNAME:</label> <small>*</small> <input type="text" name="uname" id="username" placeholder="USERNAME"><br><br> <label for="button">PASSWORD:</label> <small>*</small> <input type="password" name="pass" id="password" placeholder="PASSWORD"><br><br> <label id="kjo" for="button">EMAIL:</label> <small>*</small> <input type="text" id="email" placeholder="EMAIL"><br><br> <input type="submit" value="REGISTER" id="butt"> <!-- I removed the onclick attribute here because it's already in the form tag --> <p id="result"></p> <br><br> <a href="login.html">LOGIN</a> </form> <p id="result"></p>
如上一個答案所述,您可以在要驗證的每個字段之后插入一個標簽以顯示結果。
對於您所提到的電子郵件,我編寫了顯示錯誤消息的部分,如下所示。
Element.prototype.remove = function() { this.parentElement.removeChild(this); }; NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { for (var i = this.length - 1; i >= 0; i--) { if (this[i] && this[i].parentElement) { this[i].parentElement.removeChild(this[i]); } } }; function insertAfter(newNode, referenceNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); } function validate(event) { var emailInput = document.getElementById("email"); var email = emailInput.value; var emailRegex = /^[a-z0-9._-]+@[a-z0-9._-]+\\.[az]{2,6}$/; var emailResult = emailRegex.test(email); if (!emailResult) { var errorDiv = document.getElementById("error"); if (!errorDiv) { var div = document.createElement("div"); div.innerHTML = "Insert a valid Email"; div.classList.add("error"); div.id = "error"; insertAfter(div, emailInput); emailInput.classList.add("error-input"); } event.preventDefault(); } else { var errorDiv = document.getElementById("error"); if (errorDiv) { errorDiv.remove(); emailInput.classList.remove("error-input"); } } }
.error { color: red; } .error-input { border: 1px solid red; border-radius: 5px; padding: 5px }
<form id="registration" onsubmit="validate()"> <h3>S'ENREGISTRER</h3> <label for="button">FULL NAME: </label> <small>*</small> <input type="text" name="fname" id="fullname" placeholder="FULL NAME"><br><br> <label for="button">LAST NAME:</label> <small>*</small> <input type="text" name="lname" id="lastname" placeholder="LAST NAME"><br><br> <label for="button">USERNAME:</label> <small>*</small> <input type="text" name="uname" id="username" placeholder="USERNAME"><br><br> <label for="button">PASSWORD:</label> <small>*</small> <input type="password" name="pass" id="password" placeholder="PASSWORD"><br><br> <label id="kjo" for="button">EMAIL:</label> <small>*</small> <input type="text" id="email" placeholder="EMAIL"><br><br> <input type="submit" value="REGISTER" id="butt" onclick="validate(event)"> <p id="result"></p> <br><br> <a href="login.html">LOGIN</a> </form>
您也可以為字段編寫事件偵聽器onchange
或onmouseout
或onfocusout
,以便在每次更改后立即對其進行驗證。
希望這可以幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.