JavaScript表单验证示例详解

下面是“JavaScript表单验证示例详解”的完整攻略：

一、概述

在网页开发中，为了保证用户输入的信息的正确性和完整性，我们通常会对用户所填写的表单进行验证。JavaScript是一种常用的前端语言，它可以通过编写代码实现表单验证的功能。本文将对JavaScript表单验证进行详细讲解，让大家可以通过学习掌握该技术。

二、表单验证的准备工具

实现表单验证前，我们需要准备以下工具：

1. HTML表单

表单是用于收集用户信息的常用工具，我们需要在HTML中编写表单元素。以下是一个简单的表单代码示例：

<form>
  <fieldset>
    <legend>用户信息</legend>
    <label for="uname">用户名：</label>
    <input type="text" name="uname" id="uname" required>
    <br>
    <label for="passwd">密码：</label>
    <input type="password" name="passwd" id="passwd" minlength="6" required>
    <br>
    <label for="email">邮箱：</label>
    <input type="email" name="email" id="email" required>
    <br>
    <button type="submit">提交</button>
  </fieldset>
</form>

2. JavaScript

我们需要编写JavaScript代码来验证表单输入信息的正确性。在HTML文档中引入JavaScript文件：

<script src="form-validate.js"></script>

3. 编辑器

我们需要一个编辑器来写代码。可以使用VS Code、Sublime Text等文本编辑器。

三、基本表单验证

以下是一个实现表单验证的JavaScript代码示例：

//获取表单元素对象
var form = document.querySelector('form');
//添加表单提交事件监听器
form.addEventListener('submit', function(e){
    //禁止表单提交事件默认行为
    e.preventDefault();
    //获取表单元素中的用户名输入框、密码输入框和邮箱输入框
    var uname = form.elements['uname'];
    var passwd = form.elements['passwd'];
    var email = form.elements['email'];
    //验证用户名是否为空
    if(!uname.value){
        alert('请输入用户名');
        uname.focus();
        return false;
    }
    //验证密码是否为空以及长度是否小于6
    if(!passwd.value){
        alert('请输入密码');
        passwd.focus();
        return false;
    }else if(passwd.value.length<6){
        alert('密码长度必须大于等于6');
        passwd.focus();
        return false;
    }
    //验证邮箱格式是否正确
    var emailPattern = /^\w+@[a-z0-9]+(\.[a-z0-9]+)*\.[a-z]{2,4}$/i;
    if(!emailPattern.test(email.value)){
        alert('邮箱格式不正确');
        email.focus();
        return false;
    }
    //表单验证通过后，提交表单
    form.submit();
});

上述代码中，我们首先获取了表单元素对象，然后添加了表单提交事件监听器。在监听器中，我们获取了表单元素中的用户名输入框、密码输入框和邮箱输入框，并对每个输入框的值进行验证。若验证不通过，则弹出提示信息，并返回false，阻止表单提交。若验证通过，则提交表单。

四、添加动态验证

动态验证是指用户在输入框内输入内容时，即时监测输入内容是否符合规定。以下是一个实现动态验证的JavaScript代码示例：

//获取用户名输入框对象
var uname = document.querySelector('#uname');
//添加输入事件监听器
uname.addEventListener('input', function(){
    //获取输入框的值
    var value = uname.value;
    //获取用户名输入规则的正则表达式
    var pattern = /^[a-zA-Z][a-zA-Z0-9_]{3,19}$/;
    //判断输入是否符合规定
    if(pattern.test(value)){
        //输入符合规定，显示绿色的勾
        uname.parentNode.classList.add('valid');
        uname.parentNode.classList.remove('invalid');
    }else{
        //输入不符合规定，显示红色的叉
        uname.parentNode.classList.add('invalid');
        uname.parentNode.classList.remove('valid');
    }
});

本代码中，我们获取了用户名输入框的对象并添加了输入事件监听器。在输入事件监听器中，我们获取输入框的值，并使用正则表达式判断输入是否符合规定。若符合规定，则给输入框的父元素添加“valid”类，并移除“invalid”类，以显示绿色的勾。若不符合规定，则给输入框的父元素添加“invalid”类，并移除“valid”类，以显示红色的叉。