我有这个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>
答案 0 :(得分:1)
一种可能性是添加p
代码(或div
,span
等),用作&#34;字段&#34;显示测试结果。
在这种情况下,我使用p
标记。要打印结果,我使用innerText
,如下所示:
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);
// Show result withing the added p tag
document.getElementById('result').innerText = "email: " + emailResult;
}
&#13;
<input type="text" id="email" placeholder="EMAIL"><br><br>
<input type="submit" value="REGISTER" id="butt" onclick="validate()">
<p id="result"></p>
&#13;
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._-]+\.[a-z]{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;
}
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
如上一个答案所述,您可以在要验证的每个字段后插入标记以显示结果。
对于您提到的电子邮件,我写下了显示错误消息的部分,如下所示。
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._-]+\.[a-z]{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
,以便在每次更改后立即对其进行验证。
希望这有帮助。