下面是关于“原生js实现表单验证功能”的完整攻略:
目录:
- 需求分析和实现思路
- HTML结构布局
- JS代码实现
- 示例说明
需求分析和实现思路
表单验证功能是Web开发中必不可少的功能之一,实现表单验证的方法有很多种,包括使用第三方库(如jQuery、Bootstrap等),也可以使用原生的JS来实现。下面是一个原生JS实现表单验证的基本思路:
- 获取表单元素。
- 监听表单提交事件。
- 在表单提交事件的监听函数中,根据表单元素的值执行相应的验证逻辑。
- 如果验证成功,则提交表单;否则,错误提示。
HTML结构布局
下面是一个简单的表单结构示例:
<form>
<div>
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
</div>
<div>
<button type="submit">登录</button>
</div>
</form>
JS代码实现
下面是一个使用原生JS实现表单验证功能的代码示例:
const form = document.querySelector('form')
form.addEventListener('submit', (event) => {
event.preventDefault() // 阻止表单提交
const username = form.elements.username.value
const password = form.elements.password.value
// 验证用户名和密码是否为空
if (username.trim() === '') {
showError('请输入用户名')
return
}
if (password.trim() === '') {
showError('请输入密码')
return
}
// 验证通过,提交表单
form.submit()
})
function showError(message) {
const div = document.createElement('div')
div.className = 'error'
div.textContent = message
form.appendChild(div)
}
在上面的代码实现中,我们首先获取了表单元素,并监听了表单提交事件。然后,在表单提交事件的监听函数中,我们通过form.elements
获取了表单中的用户名和密码值,并进行了非空验证。如果表单验证通过,则调用form.submit()
方法提交表单。如果验证不通过,则调用showError()
方法来显示错误提示。
其中,showError()
方法用于在表单中添加一个错误提示元素。该方法接收一个参数message
,用于指定要显示的错误提示消息。
示例说明
下面提供两个示例,分别演示了如何使用原生JS实现表单验证:
示例一:实现邮箱和手机号验证
const form = document.querySelector('form')
form.addEventListener('submit', (event) => {
event.preventDefault() // 阻止表单提交
const email = form.elements.email.value
const phone = form.elements.phone.value
// 验证邮箱和手机号是否填写正确
const emailRegExp = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/
const phoneRegExp = /^1[3456789]\d{9}$/
if (!emailRegExp.test(email)) {
showError('请输入正确的邮箱')
return
}
if (!phoneRegExp.test(phone)) {
showError('请输入正确的手机号')
return
}
// 验证通过,提交表单
form.submit()
})
function showError(message) {
const div = document.createElement('div')
div.className = 'error'
div.textContent = message
form.appendChild(div)
}
在上面的示例中,我们扩展了表单验证功能,实现了邮箱和手机号的验证。在表单提交事件的监听函数中,我们首先获取了表单中的邮箱和手机号值。然后,我们使用正则表达式来验证邮箱和手机号是否填写正确。如果验证失败,则调用showError()
方法显示错误提示信息。如果验证通过,则调用form.submit()
方法提交表单。
示例二:实现密码复杂度验证
const form = document.querySelector('form')
form.addEventListener('submit', (event) => {
event.preventDefault() // 阻止表单提交
const password = form.elements.password.value
// 验证密码是否符合要求
const passwordRegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/
if (!passwordRegExp.test(password)) {
showError('密码必须包含大小写字母和数字,长度只能在8-16个字符之间')
return
}
// 验证通过,提交表单
form.submit()
})
function showError(message) {
const div = document.createElement('div')
div.className = 'error'
div.textContent = message
form.appendChild(div)
}
在上面的示例中,我们扩展了表单验证功能,实现了密码复杂度的验证。在表单提交事件的监听函数中,我们首先获取了表单中的密码值。然后,我们使用正则表达式来验证密码是否符合要求。如果验证失败,则调用showError()
方法显示错误提示信息。如果验证通过,则调用form.submit()
方法提交表单。
希望以上示例能够帮助你理解如何使用原生JS实现表单验证功能。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生js 实现表单验证功能 - Python技术站