JS实现的简单表单验证功能示例攻略
简介
表单验证是网页开发中非常常见的功能,JS可以有效实现表单信息的验证,并提示用户输入规则是否满足。本文将介绍JS实现的简单表单验证功能示例,并通过两个具体实例进行说明。
实现过程
一、获取表单元素
在JS中,我们需要通过getElementsByClassName函数获取表单元素。例如验证用户名和密码的表单:
<form class="login-form">
<input class="input-username" type="text" placeholder="请输入用户名">
<input class="input-password" type="password" placeholder="请输入密码">
<button class="submit-btn" type="submit">登录</button>
</form>
在JS中获取用户名和密码输入框元素可以如下:
const userName = document.querySelector(".input-username");
const password = document.querySelector(".input-password");
二、实现表单验证函数
接下来需要实现表单验证函数。例如验证用户名和密码:
const validate = (userName, password) => {
if (userName.value.length < 5 || userName.value.length > 12) {
alert("用户名长度必须在5~12之间");
return false;
}
if (password.value.length < 6 || password.value.length > 20) {
alert("密码长度必须在6~20之间");
return false;
}
return true;
}
三、添加事件监听
在获取表单元素和实现表单验证函数后,需要为表单添加事件监听。例如:
const loginForm = document.querySelector(".login-form");
loginForm.addEventListener("submit", (e) => {
e.preventDefault();
if (validate(userName, password)) {
alert("表单验证通过,可以提交!");
}
});
示例说明
示例一:验证邮箱格式
<form class="email-verify-form">
<input class="input-email" type="email" placeholder="请输入您的邮箱">
<button class="submit-btn" type="submit">验证</button>
</form>
在JS中获取邮箱输入框元素:
const emailInput = document.querySelector(".input-email");
实现邮箱格式验证函数:
const verifyEmail = (emailInput) => {
const emailPattern = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;
if (emailPattern.test(emailInput.value)) {
return true;
} else {
alert("邮箱格式不正确");
return false;
}
}
为表单添加事件监听:
const emailVerifyForm = document.querySelector(".email-verify-form");
emailVerifyForm.addEventListener("submit", (e) => {
e.preventDefault();
if (verifyEmail(emailInput)) {
alert("邮箱格式正确,可以提交!");
}
});
示例二:验证手机号码格式
<form class="phone-verify-form">
<input class="input-phone" type="tel" placeholder="请输入您的手机号码">
<button class="submit-btn" type="submit">验证</button>
</form>
在JS中获取手机号码输入框元素:
const phoneInput = document.querySelector(".input-phone");
实现手机号码格式验证函数:
const verifyPhone = (phoneInput) => {
const phonePattern = /^[1]([3-9])[0-9]{9}$/;
if (phonePattern.test(phoneInput.value)) {
return true;
} else {
alert("手机号码格式不正确");
return false;
}
}
为表单添加事件监听:
const phoneVerifyForm = document.querySelector(".phone-verify-form");
phoneVerifyForm.addEventListener("submit", (e) => {
e.preventDefault();
if (verifyPhone(phoneInput)) {
alert("手机号码格式正确,可以提交!");
}
});
总结
通过上述示例,我们可以看到如何实现JS的简单表单验证功能。我们需要通过getElementsByClassName函数获取表单元素,实现表单验证函数并添加事件监听来对表单信息进行验证,从而确保用户输入规则的正确性。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS实现的简单表单验证功能示例 - Python技术站