js脚本怎么实现表单验证_js表单验证功能脚本编写与实用技巧

function validateForm() {
  const username = document.getElementById("username").value;
  const email = document.getElementById("email").value;
<p>if (username === "") {
alert("用户名不能为空");
return false;
}</p><p>const emailRegex = /^[^\s@]+@[^\s@]+.[^\s@]+$/;
if (!emailRegex.test(email)) {
alert("请输入有效的邮箱地址");
return false;
}</p><p>return true;
}</p>

function isValidPhone(phone) {
  return /^1[3-9]\d{9}$/.test(phone);
}

document.getElementById("email").addEventListener("blur", function () {
  const value = this.value;
  const errorEl = document.getElementById("email-error");
<p>if (!/^[^\s@]+@[^\s@]+.[^\s@]+$/.test(value)) {
errorEl.textContent = "邮箱格式不正确";
errorEl.style.color = "red";
} else {
errorEl.textContent = "";
}
});</p>

const FormValidator = {
  rules: {
    required: (value) => value.trim() !== "",
    email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
    phone: (value) => /^1[3-9]\d{9}$/.test(value)
  },
<p>validate(input, ruleNames) {
for (let rule of ruleNames) {
if (!this.rules<a href="https://www.php.cn/link/dc19fa59fb460f069c2e609348abfc77">rule</a>) {
this.showError(input, <code>${input.name} 格式不正确</code>);
return false;
}
}
this.clearError(input);
return true;
},</p><p>showError(input, message) {
let errEl = input.nextElementSibling;
if (!errEl || !errEl.classList.contains("error")) {
errEl = document.createElement("div");
errEl.className = "error";
input.parentNode.insertBefore(errEl, input.nextSibling);
}
errEl.textContent = message;
},</p><p>clearError(input) {
const errEl = input.nextElementSibling;
if (errEl && errEl.classList.contains("error")) {
errEl.textContent = "";
}
}
};</p>