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日

相关文章

  • 基于elementUI实现图片预览组件的示例代码

    下面就来详细讲解“基于elementUI实现图片预览组件的示例代码”的完整攻略,攻略分为以下几个步骤: 1. 安装elementUI 首先需要安装elementUI,可以使用npm或者yarn来安装,这里以npm为例: npm install element-ui –save 2. 导入elementUI插件 在项目中导入elementUI插件,可以选择在…

    JavaScript 2023年6月10日
    00
  • 常用的JavaScript验证正则表达式汇总

    让我来详细讲解“常用的JavaScript验证正则表达式汇总”的完整攻略。 什么是正则表达式? 正则表达式(Regular Expression,简称Regex)是指用于描述字符模式的语法规则。在JavaScript中,我们可以使用正则表达式来匹配和验证字符串。 常用的JavaScript验证正则表达式 在前端开发中,我们经常需要对输入的文本进行验证,例如检…

    JavaScript 2023年6月10日
    00
  • 使用Javascript和DOM Interfaces来处理HTML

    处理HTML主要是通过DOM(Document Object Model)来完成的,DOM是HTML文档的编程接口,通过DOM,可以进行对网页内容的增删改查。 以下是使用Javascript和DOM Interfaces处理HTML的完整攻略: 1. 获取HTML元素 通过Javascript获取HTML元素的方法如下: let element = docu…

    JavaScript 2023年6月10日
    00
  • JavaScript深入刨析this的指向以及如何修改指向

    JavaScript深入刨析this的指向以及如何修改指向 什么是this 在JavaScript中,this是一个十分重要且常用的关键字,用来指代当前函数执行上下文中的对象。而这个对象指代的意义在不同的使用场景下会发生变化,因此我们需要深入学习并理解this的指向。 在JavaScript中,this的指向可以分为以下4种情况: 作为对象的方法调用:thi…

    JavaScript 2023年6月10日
    00
  • 10个在JavaScript开发中常遇到的BUG

    让我来为您详细介绍10个在JavaScript开发中常遇到的BUG的解决攻略。 1. 数据类型问题 问题描述:在JavaScript中,由于变量的数据类型可以随时改变,因此在代码编写过程中容易遇到变量数据类型不对应的问题。 解决方法:建议在代码编写过程中注意数据类型的匹配,严格使用 === 和 !== 运算符比较数据类型和值;如果变量的数据类型不明确,可以使…

    JavaScript 2023年5月28日
    00
  • Webkit的跨域安全问题说明

    Webkit的跨域安全问题说明 Web应用程序中经常会有跨域请求的需求,但是跨域请求可能会涉及到安全风险,因此需要特殊的处理。 在Webkit浏览器中,跨域请求的安全机制较为严格。Webkit浏览器会对来自其他域的请求进行一系列的安全检查,包括Same origin policy、CORS等措施。下面我们详细讲解一下Webkit的跨域安全问题。 Same o…

    JavaScript 2023年5月27日
    00
  • Javascript 实用小技巧

    Javascript 实用小技巧 Javascript 作为一门非常灵活的脚本语言,具有很多实用的小技巧,本文将为您介绍几个实用的 Javascript 技巧。 1. 用箭头函数代替匿名函数 在 Javascript 中,匿名函数是非常常见的一种函数,但是匿名函数的语法不如箭头函数简洁易懂。我们可以使用 ES6 中的箭头函数来替换匿名函数: // 用匿名函数…

    JavaScript 2023年5月18日
    00
  • 关于JavaScript命名空间的一些心得

    关于JavaScript命名空间的一些心得 JavaScript命名空间是一种管理和组织JavaScript代码的重要方式。通过使用命名空间,我们可以避免多个JavaScript库或插件之间的代码冲突和命名冲突。以下是关于JavaScript命名空间的一些心得: 什么是JavaScript命名空间? JavaScript命名空间是一种将相关的变量、函数和对象…

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