分享纯手写漂亮的表单验证

下面是关于如何分享纯手写漂亮的表单验证的完整攻略:

1. 为什么需要表单验证

在网站开发中,表单是非常重要的交互方式之一。表单用于收集和提交用户的数据,因此表单验证是非常必要的。表单验证可以确保用户输入的数据满足我们的需求,比如确保用户的邮箱格式正确、密码符合规范等。如果没有表单验证,那么用户可能会输入错误或者恶意的数据,造成网站数据的被破坏,或者影响用户使用体验。

2. 纯手写表单验证的优点

虽然市面上有很多表单验证插件,但是纯手写表单验证也有很多优点:

  • 学习成本低:基于一些基础知识,只需要了解相关代码就可以手写表单验证了,很多时候不需要使用复杂的插件;
  • 更加定制化:手写表单验证可以更加灵活方便的根据需求进行修改和扩展而不需要受限于插件的功能;
  • 代码质量更高:手写表单验证可以让代码更加简洁和高效,并且可以减少不必要的依赖,并保证代码质量高和执行效率。

3. 表单验证的实现方式

表单验证可以通过多个方式来进行实现。以下是两个非常常用的方法:

3.1 使用HTML5的表单验证

HTML5提供了一些表单验证的属性和API,可以直接使用来进行表单验证。比如可以使用required属性来规定输入框必须被填写,使用type="email"属性来验证用户是否输入了正确的邮箱地址。以下是一个使用HTML5表单验证的示例:

<form action="submit.php" method="post">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" pattern=".{8,}" title="Must contain at least 8 characters" required>

    <button type="submit">Submit</button>
</form>

在上述示例中,required属性规定了输入框必须填写,并且如果用户未填写会出现提示。type="email"属性则用来验证用户输入的是否是正确格式的邮箱地址。

3.2 使用JavaScript手写表单验证

除了使用HTML5,我们也可以通过手写JavaScript代码来进行表单验证。以下是一个使用JavaScript手写表单验证的示例:

<form action="submit.php" method="post">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <span id="email-error" class="error"></span>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <span id="password-error" class="error"></span>

    <button type="submit">Submit</button>
</form>
var form = document.querySelector('form');
var email = document.querySelector('#email');
var emailError = document.querySelector('#email-error');
var password = document.querySelector('#password');
var passwordError = document.querySelector('#password-error');

form.addEventListener('submit', function(e) {
  if (email.validity.valid && password.validity.valid) {
    // 表单验证通过,可以提交表单
  } else {
    e.preventDefault();
    if (!email.validity.valid) {
      emailError.textContent = '请输入正确的邮箱地址';
    }
    if (!password.validity.valid) {
      passwordError.textContent = '请输入至少8位密码';
    }
  }
});

email.addEventListener('input', function(e) {
  if (email.validity.valid) {
    emailError.textContent = '';
  } else {
    emailError.textContent = '请输入正确的邮箱地址';
  }
});

password.addEventListener('input', function(e) {
  if (password.validity.valid) {
    passwordError.textContent = '';
  } else {
    passwordError.textContent = '请输入至少8位密码';
  }
});

在上述示例中,我们通过监听表单submit事件来检验表单输入是否符合要求。如果符合要求,则可以提交表单;如果不符合要求,则阻止表单提交,并在错误的输入框下方显示错误提示。同时,我们还通过监听input事件来即时检测用户的输入是否符合要求。

4. 表单验证的优化

  • 及时的反馈(UI效果):采用视觉效果表明是否通过验证,即时的反馈对体验来说很重要。

  • 简单的操作:客户不想要太多打字或操作,所有都更好都自动化甚至所有都使用下拉框和单选按钮更好,如果必须要使用输入框,也建议内置联想功能,客户就不必输很多字。

  • 尽量避免复杂的验证规则:虽然开发人员可以依据各种特定规则进行验证,但是用户无法预料这些特定规则,而且在遇到一定的信任度危机时也无法接受,因此建议只使用通用的规则对用户进行验证并区分出错误。

  • 帮助他们改正错误:在验证发现用户有错误时,尽可能情况下把错误原因告诉用户,并提供改正的方案,给他们一种易于接受的方式改正错误。

  • 短语化的指引:使表单或验证指引直接简短而重点突出,不要把表单和指引进行过多而复杂的表述。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:分享纯手写漂亮的表单验证 - Python技术站

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

相关文章

  • JS截取url中问号后面参数的值信息

    下面是关于如何截取URL中问号后面参数值信息的完整攻略。 1. 获取URL并提取参数 首先,需要在 JavaScript 中获取 URL。 可以使用全局对象 window 中的 location 属性获取当前 URL。比如: var url = window.location.href; 得到 URL 后,我们需要提取 URL 中的参数。我们可以使用 URL…

    JavaScript 2023年6月11日
    00
  • js数组的五种迭代方法及两种归并方法(推荐)

    下面是关于“js数组的五种迭代方法及两种归并方法”的详细讲解: 1. 前言 在JavaScript中,数组是一种非常常见的数据类型。对于数组的操作,我们既可以使用循环遍历,也可以使用数组提供的方法进行处理。本文主要介绍 js 数组的五种迭代方法及两种归并方法。这些方法要熟练掌握,能够帮助我们高效地处理数组。 2. 迭代方法 2.1 forEach forEa…

    JavaScript 2023年5月27日
    00
  • javascript 冒号 使用说明

    下面是关于 JavaScript 冒号的使用说明: 什么是冒号 在 JavaScript 中,冒号(:)在对象字面量中用来分隔属性名和属性值,在 ES6 中则有更多的使用方式。下面我们来逐一讲解。 对象字面量 在对象字面量中,冒号用来分隔属性名和属性值。举个例子: const person = { name: ‘Tom’, age: 18 } 在这个例子中,…

    JavaScript 2023年6月11日
    00
  • JS document form表单元素操作完整示例

    下面是“JS document form表单元素操作完整示例”的完整攻略,包括两条示例说明: JS document form表单元素操作完整示例 示例1:获取表单中的数据并进行处理 1. 编写HTML代码 首先,我们需要编写HTML代码,创建一个表单,并添加表单元素:输入框、单选按钮、复选框、下拉框。 <form id="myForm&qu…

    JavaScript 2023年6月10日
    00
  • JavaScript学习笔记之Function对象

    下面是关于“JavaScript学习笔记之Function对象”的完整攻略。 1. Function对象的概述 在JavaScript中,函数(Function)也是一种数据类型。Function对象是JavaScript内置对象之一,它可以通过Function构造函数来创建,也可以通过函数表达式直接创建。 2. Function对象的创建 2.1 通过Fu…

    JavaScript 2023年5月27日
    00
  • JavaScript使用cookie实现记住账号密码功能

    一、什么是cookie? 在介绍如何使用cookie实现记住账号密码功能前,我们先来了解一下什么是cookie。 Cookie是一种存储在用户计算机上的小文件。当用户访问网站时,网站会在用户计算机上存储一些数据,并在以后访问该网站时使用这些数据。Cookie主要用于跟踪用户,在用户浏览网站时保持用户状态以及在一段时间内记录用户在网站上的活动。 二、使用coo…

    JavaScript 2023年6月11日
    00
  • vue动态菜单、动态路由加载以及刷新踩坑实战

    Vue动态菜单、动态路由加载以及刷新踩坑实战 在Vue项目中,动态菜单与动态路由的实现可以大大提升项目的扩展性和可维护性。本文将详细讲解如何实现Vue项目中的动态菜单、动态路由加载以及刷新踩坑实战。 一、动态菜单的实现 数据结构设计 首先,我们需要设计动态菜单的数据结构。我们可以将菜单数据放在以数组为基础的对象数据中,其中包含每个菜单的title、icon、…

    JavaScript 2023年6月11日
    00
  • JavaScript中常见的继承方式总结

    JavaScript中常见的继承方式主要包括原型链继承、构造函数继承、组合继承、寄生组合继承、ES6类继承等,下面将详细介绍这些继承方式。 原型链继承 原型链继承是JavaScript中最为普遍的继承方式,它的基本思想是让一个构造函数的原型对象作为另一个构造函数的实例的原型,从而实现继承。其实现方式如下: function Parent() { this.n…

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