JavaScript实现表单验证示例

下面是针对“JavaScript实现表单验证示例”的完整攻略:

1. 表单验证的基本思路

前端表单验证的基本思路是,当用户提交表单时,先阻止表单的默认提交行为,然后通过JavaScript对表单进行内容的检测和验证,如果发现问题,则提示用户并阻止表单的提交。否则,允许表单进行提交操作。

通常,表单验证的实现流程如下:

  1. 针对表单的提交事件进行监听;
  2. 在提交事件触发时,获取表单中需要验证的输入项;
  3. 对这些输入项进行验证操作;
  4. 如果验证出现问题,则阻止表单的提交,并给出相应提示信息;
  5. 如果验证未出现问题,则允许表单继续进行提交操作。

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. 复杂表单验证

接下来,我们来看一个较为复杂的表单验证示例。假设有一个注册表单,需要对用户输入的账号、密码和邮箱分别进行格式和唯一性校验。具体来说,要求:

  1. 账号只能包含数字、字母和下划线,长度在6~16个字符之间,并且不能重复;
  2. 密码必须由数字、字母、特殊字符三类字符组成,长度在8~20个字符之间;
  3. 邮箱必须符合标准的邮箱格式,且不能重复。

对于这样的复杂表单验证,我们可以编写如下的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技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • GridView选择记录同时confirm用户确认删除

    GridView选择记录同时confirm用户确认删除 简介 由于GridView是ASP.NET Web Forms常用的控件之一,经常会被用来展示和编辑自定义数据源。在开发中,经常会遇到用户想要删除某一项记录的需求。这时候,我们需要使用JavaScript来先确认用户是否真正想要删除该记录。 步骤 第一步:在GridView中添加CheckBox列 我们…

    JavaScript 2023年6月11日
    00
  • js 键盘记录实现(兼容FireFox和IE)

    实现JS键盘记录兼容FireFox和IE的方法有很多种。下面我将为大家介绍一种比较常用的实现方式。 1. 监听键盘事件 要实现JS键盘记录,首先我们需要监听用户的键盘事件。一般情况下,用户在按下键盘上的按键时,会触发以下三种事件: keydown: 在键盘按下时触发,可能会连续触发多次。 keyup: 在键盘松开时触发,可能会连续触发多次。 keypress…

    JavaScript 2023年6月11日
    00
  • JavaScript italics方法入门实例(把字符串显示为斜体)

    下面是详细的JavaScript italics方法入门实例攻略: 1. 概述 italics()是JavaScript的字符串方法之一,用于将字符串显示为斜体。该方法返回一个新的字符串,其中原字符串被包含在<i>标签中。 2. 语法 string.italics() 其中,string是调用该方法的字符串。 3. 示例 示例一 以下是一个简单的…

    JavaScript 2023年5月28日
    00
  • JS高阶函数原理与用法实例分析

    JS高阶函数原理与用法实例分析 什么是高阶函数? 在JavaScript语言中,高阶函数是指能够以函数作为参数或返回值的函数。换句话说,高阶函数是处理其他函数的函数。 高阶函数的原理 在JavaScript中,函数本身就是一种对象,可以像其他对象一样作为函数参数或返回值传递。高阶函数的原理就是基于这种JavaScript函数作为对象的特性实现。 通过高阶函数…

    JavaScript 2023年5月27日
    00
  • JavaScript的代码编写格式规范指南

    JavaScript的代码编写格式规范指南是为了提高代码的可读性和维护性而制定的一些规则。以下是完整的攻略,包括命名规范、缩进、代码结构、注释、使用ES6等方面。 1. 命名规范 一个良好的命名规范可以使代码更加易读易懂。以下是一些常用的命名规范: 1.1 变量名 小驼峰命名法(camelCase):第一个单词小写,后面每个单词的首字母大写,如:userNa…

    JavaScript 2023年5月18日
    00
  • JavaScript中极易出错的操作符运算总结

    JavaScript中极易出错的操作符运算总结 在JavaScript编程中,操作符运算是非常常见的。但是,可能会有一些操作符运算容易出错,导致程序行为不符合预期。因此,我们需要了解并避免这些错误。 1. 严格相等运算符 在JavaScript中,使用双等号==进行非严格相等判断时,会发生隐式数据类型转换,可能会导致预期之外的结果。因此,在进行相等比较时,我…

    JavaScript 2023年5月28日
    00
  • 7个令人惊讶的JavaScript特性详解

    7个令人惊讶的JavaScript特性详解 介绍 这篇文章将会介绍七个我们可能不知道或很少使用的有趣的JavaScript特性。这些特性可能会帮助你更好地理解JavaScript的本质以及如何更好地使用它。 1. 默认参数 默认参数允许我们在一个函数的参数列表中为某些参数定义默认值。如果没有传递值给这个参数,它将使用默认值。 function sayHell…

    JavaScript 2023年5月27日
    00
  • 基于JS实现的消消乐游戏的示例代码

    下面是详细讲解“基于JS实现的消消乐游戏的示例代码”的完整攻略。 1. 简介 消消乐游戏是一款经典的益智类游戏,是一种基于图形匹配的消除游戏,在游戏中需要将相同类型的方块匹配消除,以获得更高的分数。 基于JS实现的消消乐游戏的示例代码,主要使用了HTML、CSS、JavaScript等技术,通过使用HTML来创建游戏的页面布局和界面元素,使用CSS来对页面布…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部