点击功能没有定义，我不知道为什么

Question

我必须验证电子邮件和电话。没有必要两者都是强制性的，只要一个就足够了。当我点击我的按钮时，代码错误是没有定义handleValidation，但我不知道为什么。即使控制台也不会打印console.log。

这里的HTML:

<form class="form-group p-4">
<div class="row">
<div class="col-12 col-md-6 d-flex flex-column">
<input type="text" class="form-control rounded-0 p-3 m-1" id="name" required
placeholder="NOMBRE Y APELLIDO">
<input type="email" class="form-control rounded-0 p-3 m-1" id="email" placeholder="E-MAIL">
<input type="tel" class="form-control rounded-0 p-3 m-1" id="phone" placeholder="TELÉFONO">
</div>
<div class="col-12 col-md-6 d-flex flex-column">
<textarea id="message" class="form-control rounded-0 h-100 p-3 m-1" required
placeholder="DEJANOS TU MENSAJE"></textarea>
</div>
</div>
<div class="row">
<div class="col-12 col-md-3 d-flex flex-column float-right align-items-end">
<button onclick="handleValidation()" id="send-btn"
class="main-btn btn btn-primary col-12 rounded-0 p-2 mt-3">ENVIAR</button>
</div>
</div>
</form>

这里是JS:

let email = document.querySelector("#email");
let tel = document.querySelector("#phone");

const emailVal = () => {
if (!(/w+([-+.']w+)*@w+([-.]w+)*.w+([-.]w+)/.test(email))) {
console.log("bad")
return false;
}
console.log("good")
return true;
}

const telVal = () => {
if (!(/^d{9}$/.test(tel))) {
console.log("bad")
return false;
}
console.log("good");
return true;
}

const handleValidation = () => {
if (emailVal() === true || telVal() === true) {
alert("tu consulta fue enviada satisfactoriamente");
} else {
alert("el email y/o el teléfono son necesarios para contactarte");
}
}

Answer 1

• 在脚本中设置事件侦听器，而不是onclick属性
• 您不会得到输入的值，而是得到输入
• 输入值应该被抓取到验证函数中，而不是外部
• 你的电子邮件正则表达式似乎不起作用(我没有检查电话号码1(

如果你纠正了所有这些问题，你的脚本应该是这样的：

const emailVal = () => {
let email = document.querySelector("#email").value;  
if (!(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/.test(email))) {
console.log("bad email")
return false;
}
console.log("good")
return true;
}
const telVal = () => {
let tel = document.querySelector("#phone").value;
if (!(/^d{9}$/.test(tel))) {
console.log("bad tel")
return false;
}
console.log("good");
return true;
}
const handleValidation = () => {
if (emailVal() || telVal()) {
alert("tu consulta fue enviada satisfactoriamente");
} else {
alert("el email y/o el teléfono son necesarios para contactarte");
}
}
document.getElementById('send-btn').addEventListener('click', handleValidation);

当然，您还必须删除button-onclick属性。电子邮件验证正则表达式的来源：https://www.w3resource.com/javascript/form/email-validation.php

Answer 2

我在jsfiddle中检查了您的代码。我收到了"非常时间"；通过电子邮件和/或电话联系"；。因此，代码在某种程度上是正确的。我建议在html后面添加JSSript，反之亦然。我总是把这个搞混。