JavaScript实现表单验证示例

下面是针对“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技术站