javascript 中的验证无法正常工作答案

【问题标题】：Validation in javascript is not working as it shouldjavascript 中的验证无法正常工作
【发布时间】：2023-03-31 14:07:01
【问题描述】：

我一直在尝试解决我在 JavaScript 中使用此电子邮件验证时遇到的问题，但我尝试过的所有代码都遇到了同样的问题。当我在谷歌浏览器中使用开发人员工具时，我没有看到任何错误消息，所以我不明白为什么会发生这种情况。如果电子邮件无效，我想显示错误消息。

我错过了什么？

链接完整代码 - https://jsfiddle.net/lmanhaes/cq1g5dyt/14/

谢谢。

function checkEmail(validate) {
    let re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    let email = validate.userName.value;
    if (email === re)
        return true;
    else {
        error.setAttribute("class", "error");
        error.innerHTML = ("Email is not correct. Please retype.");
    }
}

<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>JavaScript</title>
	<link rel="stylesheet" href="css/styles.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
	<section>
		<h1></h1>
		<ul>
			
		</ul>
		<h1>Register</h1>
		<p>* = Required Field</p>
		<div id="formcontainer">
			<form id="registerDetails" action="lmanha01_fma_t3confirm.html">
				<div>
					<label for="username">* Userame:</label>
					<input type="text" id="userName" required>
					<!--pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"-->
					<!--check that the user has in fact typed in an email address-->
					<div id="error"></div>
				</div>
				<div>
					<label for="password">* Password (must be 8 characters exactly and include one Uppercase, one
						lowercase and
						one number):</label>
					<input type="password" id="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,8}$"
						required>
					<input type="checkbox" id="showpasswords" onclick="Toggle()">
					<!--This creates a toggle effect-->
					<label id="showpasswordslabel" for="showpasswords">Show passwords</label>
				</div>
				<div>
					<label for="retypedpassword">* Retype your password:</label>
					<input type="password" id="retypedpassword">
					<span id="passwordmatcherror"></span>
				</div>
				<div>
					<button type="submit" id="registerButton">Register</button>
				</div>
			</form>
		</div>
	</section>
	<!--moved to the bottom to load the page faster-->
	<script src="scripts/exemple.js"></script>

</body>

</html>

【问题讨论】：

您的表单没有供用户输入数据的电子邮件字段。另外，为什么不直接使用<input type="email"> 而不使用任何脚本？
另外，标题元素 (<h1>...<h6>) 是语义元素，用于表示节或子节的开头。不要因为浏览器为它们提供的内置样式而使用它们。
re 是一个正则表达式对象。 email 是一个字符串。您不能只将字符串与正则表达式进行比较。为此，您可以使用.test() method of the regular expression object..
.innerHTML 用于设置包含 HTML 的字符串并需要解析。当字符串不包含任何 HTML 时不要使用它，因为这会影响安全性和性能。请改用.textContent。此外，在设置字符串时不要将括号括起来。

标签： javascript validation email-validation

【解决方案1】：

如果输入值与电子邮件模式匹配，则应使用正则表达式的 test() 方法返回 true 或 false。

if (re.test(email)){
     //logic when it is valid
}       
else{
      //logic when it is invalid
}

const email = document.getElementById('email');
function validate(){
   const regex=/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  return regex.test(email.value) ?console.log("Valid"):console.log("Invalid");
}

<input type="email" id="email" />
<button onclick="validate()">
Validate
</button>

【讨论】：