下面是针对“JavaScript实现表单验证示例”的完整攻略:
1. 表单验证的基本思路
前端表单验证的基本思路是,当用户提交表单时,先阻止表单的默认提交行为,然后通过JavaScript对表单进行内容的检测和验证,如果发现问题,则提示用户并阻止表单的提交。否则,允许表单进行提交操作。
通常,表单验证的实现流程如下:
- 针对表单的提交事件进行监听;
- 在提交事件触发时,获取表单中需要验证的输入项;
- 对这些输入项进行验证操作;
- 如果验证出现问题,则阻止表单的提交,并给出相应提示信息;
- 如果验证未出现问题,则允许表单继续进行提交操作。
2. 表单验证的实现示例
下面提供两个针对不同情况的表单验证实现示例:
2.1. 普通表单验证
首先,我们来看一个基于普通表单的验证示例。假设有一个登录表单,需要对用户名和密码进行验证。代码如下:
<form id="login-form">
<label>用户名:</label><input type="text" name="username" id="username"><br/>
<label>密码:</label><input type="password" name="password" id="password"><br/>
<input type="submit" value="登录">
</form>
此时,我们需要对这两个输入项进行验证。我们可以采用以下方式:
var loginForm = document.getElementById('login-form');
loginForm.onsubmit = function() {
var username = document.getElementById('username');
var password = document.getElementById('password');
if (username.value === '') {
alert('请输入用户名!');
return false;
}
if (password.value === '') {
alert('请输入密码!');
return false;
}
// 如果验证通过,允许表单提交
return true;
}
在这个示例中,我们获取了登录表单,并为其onsubmit
事件绑定了一个匿名函数。当用户点击登录按钮时,这个函数就会被触发,我们在函数中用document.getElementById
方法获取用户名和密码输入项的值,并针对这两个值进行判断。如果用户名或密码中出现了空值,则使用alert
对用户进行提示,并返回false阻止表单的提交。否则,返回true允许表单提交。
2.2. 复杂表单验证
接下来,我们来看一个较为复杂的表单验证示例。假设有一个注册表单,需要对用户输入的账号、密码和邮箱分别进行格式和唯一性校验。具体来说,要求:
- 账号只能包含数字、字母和下划线,长度在6~16个字符之间,并且不能重复;
- 密码必须由数字、字母、特殊字符三类字符组成,长度在8~20个字符之间;
- 邮箱必须符合标准的邮箱格式,且不能重复。
对于这样的复杂表单验证,我们可以编写如下的JS代码来实现:
<form id="register-form">
<label>账号:</label><input type="text" name="account" id="account"><span id="account-tip"></span><br/>
<label>密码:</label><input type="password" name="password" id="password"><span id="password-tip"></span><br/>
<label>邮箱:</label><input type="email" name="email" id="email"><span id="email-tip"></span><br/>
<input type="submit" value="注册">
</form>
// 获取表单和提示信息元素
var registerForm = document.getElementById('register-form');
var accountTip = document.getElementById('account-tip');
var passwordTip = document.getElementById('password-tip');
var emailTip = document.getElementById('email-tip');
// 给输入框绑定失去焦点的事件,进行格式校验
document.getElementById('account').onblur = function() {
var account = this.value;
if (!/^[a-zA-Z0-9_]{6,16}$/.test(account)) {
accountTip.innerHTML = '账号格式错误(只能包含数字、字母和下划线,长度在6~16个字符之间)';
return;
}
// 发送AJAX请求,判断账号是否重复
accountTip.innerHTML = '正在检查账号是否已经被使用……';
sendAjax('get', '/checkAccount?account=' + account, function(result) {
if (result === 'exist') {
accountTip.innerHTML = '对不起,该账号已经被使用了!';
} else {
accountTip.innerHTML = '账号检查通过';
}
});
}
document.getElementById('password').onblur = function() {
var password = this.value;
if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z@#\$%\^\&\*\?]{8,20}$/.test(password)) {
passwordTip.innerHTML = '密码格式错误(须包含数字、大小写字母及特殊字符,长度在8~20个字符之间)';
return;
}
passwordTip.innerHTML = '密码格式正确';
}
document.getElementById('email').onblur = function() {
var email = this.value;
if (!/^[a-zA-Z0-9._-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9]{2,6}$/.test(email)) {
emailTip.innerHTML = '邮箱格式错误';
return;
}
// 发送AJAX请求,判断邮箱是否重复
emailTip.innerHTML = '正在检查邮箱是否已经被使用……';
sendAjax('get', '/checkEmail?email=' + email, function(result) {
if (result === 'exist') {
emailTip.innerHTML = '对不起,该邮箱已经被使用了!';
} else {
emailTip.innerHTML = '邮箱检查通过';
}
});
}
// 对表单的提交操作进行监听
registerForm.onsubmit = function() {
// 获取输入项
var account = document.getElementById('account');
var password = document.getElementById('password');
var email = document.getElementById('email');
// 验证输入项
if (accountTip.innerHTML !== '账号检查通过') {
alert('请检查账号是否符合要求!');
return false;
}
if (passwordTip.innerHTML !== '密码格式正确') {
alert('请检查密码是否符合要求!');
return false;
}
if (emailTip.innerHTML !== '邮箱检查通过') {
alert('请检查邮箱是否正确!');
return false;
}
// 如果所有验证通过,允许表单提交
return true;
}
在这个示例中,我们首先为输入框分别绑定了失去焦点事件的函数,用来进行输入格式的验证,并通过AJAX向服务端发送请求来判断输入项是否唯一。然后,在表单的提交事件中,我们为表单绑定了一个函数,来验证用户所有的输入项,如果验证未通过,则使用alert
提示用户进行检查,并返回false阻止表单的提交。否则,返回true允许表单提交。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript实现表单验证示例 - Python技术站