本文实例为大家分享了JavaScript实现表单验证的具体代码，供大家参考，具体内容如下
需求
有如下注册页面，对表单进行校验，如果输入的用户名、密码、手机号符合规则，则允许提交；如果不符合规则，则不允许提交。
完成以下需求：
1、当输入框失去焦点时，验证输入内容是否符合要求
2、当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不合符则阻止表单提交
环境准备
下面是初始页面
<!DOCTYPE html> <html lang="en"> <head> ? ? <meta charset="UTF-8"> ? ? <title>欢迎注册</title> ? ? <link href="css/register.css" rel="stylesheet"> </head> <body> ? ? <div class="form-div"> ? ? ? ? <div class="reg-content"> ? ? ? ? ? ? <h1>欢迎注册</h1> ? ? ? ? ? ? <span>已有帐号？</span> <a href="#" >登录</a> ? ? ? ? </div> ? ? ? ? <form id="reg-form" action="#" method="get"> ? ? ? ? ? ? <table> ? ? ? ? ? ? ? ? <tr> ? ? ? ? ? ? ? ? ? ? <td>用户名</td> ? ? ? ? ? ? ? ? ? ? <td class="inputs"> ? ? ? ? ? ? ? ? ? ? ? ? <input name="username" type="text" id="username"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span> ? ? ? ? ? ? ? ? ? ? </td> ? ? ? ? ? ? ? ? </tr> ? ? ? ? ? ? ? ? <tr> ? ? ? ? ? ? ? ? ? ? <td>密码</td> ? ? ? ? ? ? ? ? ? ? <td class="inputs"> ? ? ? ? ? ? ? ? ? ? ? ? <input name="password" type="password" id="password"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span id="password_err" class="err_msg" style="display: none">密码格式有误</span> ? ? ? ? ? ? ? ? ? ? </td> ? ? ? ? ? ? ? ? </tr> ? ? ? ? ? ? ? ? <tr> ? ? ? ? ? ? ? ? ? ? <td>手机号</td> ? ? ? ? ? ? ? ? ? ? <td class="inputs"><input name="tel" type="text" id="tel"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span> ? ? ? ? ? ? ? ? ? ? </td> ? ? ? ? ? ? ? ? </tr> ? ? ? ? ? ? </table> ? ? ? ? ? ? <div class="buttons"> ? ? ? ? ? ? ? ? <input value="注 册" type="submit" id="reg_btn"> ? ? ? ? ? ? </div> ? ? ? ? ? ? <br class="clear"> ? ? ? ? </form> ? ? </div> ? ? <script> ? ? </script> </body> </html>
验证输入框
此小节完成如下功能：
校验用户名。当用户名输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使 id='username_err' 的span标签显示出来，给出用户提示。
校验密码。当密码输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使 id='password_err' 的span标签显示出来，给出用户提示。
校验手机号。当手机号输入框失去焦点时，判断输入的内容是否符合 长度是 11 位 规则，不符合使 id='tel_err' 的span标签显示出来，给出用户提示。
代码如下：
//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");
//1.2 绑定onblur事件 失去焦点
usernameInput.onblur = function () {
? ? //1.3 获取用户输入的用户名
? ? var username = usernameInput.value.trim();
? ? //1.4 判断用户名是否符合规则：长度 6~12
? ? if (username.length >= 6 && username.length <= 12) {
? ? ? ? //符合规则
? ? ? ? document.getElementById("username_err").style.display = 'none';
? ? } else {
? ? ? ? //不合符规则
? ? ? ? document.getElementById("username_err").style.display = '';
? ? }
}
//1. 验证密码是否符合规则
//1.1 获取密码的输入框
var passwordInput = document.getElementById("password");
//1.2 绑定onblur事件 失去焦点
passwordInput.onblur = function() {
? ? //1.3 获取用户输入的密码
? ? var password = passwordInput.value.trim();
? ? //1.4 判断密码是否符合规则：长度 6~12
? ? if (password.length >= 6 && password.length <= 12) {
? ? ? ? //符合规则
? ? ? ? document.getElementById("password_err").style.display = 'none';
? ? } else {
? ? ? ? //不合符规则
? ? ? ? document.getElementById("password_err").style.display = '';
? ? }
}
//1. 验证手机号是否符合规则
//1.1 获取手机号的输入框
var telInput = document.getElementById("tel");
//1.2 绑定onblur事件 失去焦点
telInput.onblur = function() {
? ? //1.3 获取用户输入的手机号
? ? var tel = telInput.value.trim();
? ? //1.4 判断手机号是否符合规则：长度 11
? ? if (tel.length == 11) {
? ? ? ? //符合规则
? ? ? ? document.getElementById("tel_err").style.display = 'none';
? ? } else {
? ? ? ? //不合符规则
? ? ? ? document.getElementById("tel_err").style.display = '';
? ? }
}
验证表单
当用户点击 注册 按钮时，需要同时对输入的 用户名 、 密码 、 手机号 ，如果都符合规则，则提交表单；如果有一个不符合规则，则不允许提交表单。实现该功能需要获取表单元素对象，并绑定 onsubmit 事件
//1. 获取表单对象
var regForm = document.getElementById("reg-form");
//2. 绑定onsubmit 事件
regForm.onsubmit = function () {
? ??
}
onsubmit 事件绑定的函数需要对输入的 用户名 、 密码 、 手机号 进行校验，这些校验我们之前都已经实现过了，这里我们还需要再校验一次吗？不需要，只需要对之前校验的代码进行改造，把每个校验的代码专门抽象到有名字的函数中，方便调用；并且每个函数都要返回结果来去决定是提交表单还是阻止表单提交，代码如下：
//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");
//1.2 绑定onblur事件 失去焦点
usernameInput.onblur = checkUsername;
function checkUsername() {
? ? //1.3 获取用户输入的用户名
? ? var username = usernameInput.value.trim();
? ? //1.4 判断用户名是否符合规则：长度 6~12
? ? var flag = username.length >= 6 && username.length <= 12;
? ? if (flag) {
? ? ? ? //符合规则
? ? ? ? document.getElementById("username_err").style.display = 'none';
? ? } else {
? ? ? ? //不合符规则
? ? ? ? document.getElementById("username_err").style.display = '';
? ? }
? ? return flag;
}
//1. 验证密码是否符合规则
//1.1 获取密码的输入框
var passwordInput = document.getElementById("password");
//1.2 绑定onblur事件 失去焦点
passwordInput.onblur = checkPassword;
function checkPassword() {
? ? //1.3 获取用户输入的密码
? ? var password = passwordInput.value.trim();
? ? //1.4 判断密码是否符合规则：长度 6~12
? ? var flag = password.length >= 6 && password.length <= 12;
? ? if (flag) {
? ? ? ? //符合规则
? ? ? ? document.getElementById("password_err").style.display = 'none';
? ? } else {
? ? ? ? //不合符规则
? ? ? ? document.getElementById("password_err").style.display = '';
? ? }
? ? return flag;
}
//1. 验证手机号是否符合规则
//1.1 获取手机号的输入框
var telInput = document.getElementById("tel");
//1.2 绑定onblur事件 失去焦点
telInput.onblur = checkTel;
function checkTel() {
? ? //1.3 获取用户输入的手机号
? ? var tel = telInput.value.trim();
? ? //1.4 判断手机号是否符合规则：长度 11
? ? var flag = tel.length == 11;
? ? if (flag) {
? ? ? ? //符合规则
? ? ? ? document.getElementById("tel_err").style.display = 'none';
? ? } else {
? ? ? ? //不合符规则
? ? ? ? document.getElementById("tel_err").style.display = '';
? ? }
? ? return flag;
}
而 onsubmit 绑定的函数需要调用 checkUsername() 函数、 checkPassword() 函数、 checkTel() 函数。
//1. 获取表单对象
var regForm = document.getElementById("reg-form");
//2. 绑定onsubmit 事件
regForm.onsubmit = function () {
? ? //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false
? ? var flag = checkUsername() && checkPassword() && checkTel();
? ? return flag;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
查看更多关于JavaScript实现表单验证案例的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did121511