当前位置： 首页 > news >正文

HTML---表单验证

news 2026/1/20 1:44:10

文章目录

  • 目录

    本章目标

    一.表单验证概述

    二.表单选择器

    属性过滤选择器 

     三.表单验证

     表单验证的方法

    总结

本章目标

  • 掌握String对象的用法
  • 会使用表单选择器的选择页面元素
  • 会使用JQuery事件进行表单验证
  • Ajax的概念和作用

一.表单验证概述

前端中的表单验证是在用户提交表单之前，对用户输入的数据进行合法性检查的过程。这种验证的目的是确保用户输入的数据符合预期的要求，从而减少错误和无效的数据提交，提高数据的质量和准确性。

表单验证可以分为多种类型，包括但不限于：

  1. 输入类型的验证：检查用户输入的数据是否符合预期的输入类型，如文本、数字、邮箱、密码等。
  2. 必填字段的验证：确保用户必须填写某些字段，这些字段通常是表单中的关键信息。
  3. 日期和时间范围的验证：检查用户输入的日期或时间是否在允许的范围内。
  4. 步长的验证：对于某些需要递增或递减的输入字段，如价格、评分等，验证其步长是否符合要求。
  5. 字符长度的验证：检查用户输入的字符长度是否在规定的范围内。
  6. 数值范围的验证：检查用户输入的数值是否在允许的范围内。
  7. 正则表达式的验证：使用正则表达式对用户输入的数据进行复杂的模式匹配和验证。

在前端中，表单验证可以通过多种技术实现，如HTML5的内置验证、JavaScript验证库（如jQuery Validation Plugin）以及自定义的JavaScript代码。其中，JavaScript是实现表单验证的常用工具之一，它可以在数据被送往服务器前对HTML表单中的输入数据进行验证，从而减轻服务器的负担并提高用户体验。

二.表单选择器

<!DOCTYPE html>  
<html>  
<head>  <title>表单选择器示例</title>  
</head>  
<body>  <form id="myForm">  <label for="name">姓名:</label>  <input type="text" id="name" name="name"><br><br>  <label>性别:</label>  <input type="radio" id="male" name="gender" value="male">  <label for="male">男</label><br>  <input type="radio" id="female" name="gender" value="female">  <label for="female">女</label><br><br>  <label>兴趣爱好:</label>  <input type="checkbox" id="reading" name="hobby" value="reading">  <label for="reading">阅读</label><br>  <input type="checkbox" id="travel" name="hobby" value="travel">  <label for="travel">旅行</label><br>  <input type="checkbox" id="coding" name="hobby" value="coding">  <label for="coding">编程</label><br><br>  <input type="submit" value="提交">  </form> <script src="jq/jquery-3.7.1.js"></script><script type="text/javascript">$(document).ready(function(){//选中标签id=myForm中所有的input、button，select，textarea元素$("#myForm :input").css("background-color","aqua") });</script>
</body>  
</html>

属性过滤选择器 

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>前端表单示例</title>  
</head>  
<body>   
<form>  <!-- 下拉框 -->  <label for="country">选择国家:</label>  <select id="country" name="country">  <option value="usa">美国</option>  <option value="china">中国</option>  <option value="france">法国</option>  <option value="germany">德国</option>  </select>  <br><br>  <!-- 单选按钮 -->  <label>选择性别:</label>  <br>  <input type="radio" id="male" name="gender" value="male">  <label for="male">男</label><br>  <input type="radio" id="female" name="gender" value="female">  <label for="female">女</label><br>  <br>   <!-- 多选按钮 -->  <label>选择你感兴趣的运动:</label>  <br>  <input type="checkbox" id="football" name="sport" value="football">  <label for="football">足球</label><br>  <input type="checkbox" id="basketball" name="sport" value="basketball">  <label for="basketball">篮球</label><br>  <input type="checkbox" id="swimming" name="sport" value="swimming">  <label for="swimming">游泳</label><br>  <br>   <!-- 提交按钮 -->  <input type="submit" value="提交">  
</form>  
<script src="jq/jquery-3.7.1.js"></script>
<script type="text/javascript">$(function(){//使用属性选择器selected选中标签select中选中的option并存贮在变量slist中var slist = $("#country :selcted");//使用each()函数遍历slist并调用函数slist.each(function(){使用html()函数编译选中的option标签并保存在变量message中var messsage = $(this).html();window.alert(message);});});
</script>	
</body>  
</html>

 三.表单验证

 演示案例

<!DOCTYPE html>  
<html>  
<head>  <title>表单选择器示例</title>  
</head>  
<body>  <form id="myForm">  <label for="name">账号:</label>  <input type="text" id="name" name="name" value=""><br><br>  <label>性别:</label>  <input type="radio" id="male" name="gender" value="male">  <label for="male">男</label><br>  <input type="radio" id="female" name="gender" value="female">  <label for="female">女</label><br><br>  <label>兴趣爱好:</label>  <input type="checkbox" id="reading" name="hobby" value="reading">  <label for="reading">阅读</label><br>  <input type="checkbox" id="travel" name="hobby" value="travel">  <label for="travel">旅行</label><br>  <input type="checkbox" id="coding" name="hobby" value="coding">  <label for="coding">编程</label><br><br>  <input type="submit" value="提交">  </form> <script src="jq/jquery-3.7.1.js"></script><script type="text/javascript">$(document).ready(function(){//点击表单中的提交按钮时调用函数$("#myForm").submit(function(){// $("#myForm :text")选中表单中的文本框并使用val()提取标签中的value值并储存在变量user中var user = $("#myForm :text").val();//判断账号是否为空if(user==""){window.alert("账号不能为空！");//结合当前方法并返回false的值return false;}if(user.indexOf("@")==-1){window.alert("User格式错误，必须包含@符号");return false;}var pwd = $("#myForm :password").val();//使用for循环遍历密码框中的每个字符for(var i=0;i<pwd.length;i++){//使用substring(i,i++)函数提取i位置到i+位置的数字不包含i+1var s = pwd.subtring(i,i++);//使用isNaN(s)判断该变量是否为字符串if(isNaN(s) == false){window.alert("密码框内不允许出现数字");return false;}});});</script></body>  
</html>

 表单验证的方法

总结

相关文章：

HTML---表单验证

文章目录 目录 本章目标 一.表单验证概述 二.表单选择器 属性过滤选择器 三.表单验证 表单验证的方法 总结 本章目标 掌握String对象的用法会使用表单选择器的选择页面元素会使用JQuery事件进行表单验证Ajax的概念和作用 一.表单验证概述 前端中的表单验证是在用户提交表…...

编程日记 2024/3/2 17:00:22

基于tomcat的JavaWeb实现

Tomcat服务器 免费&#xff0c;性能一般的服务器 安装配置 基于Java&#xff0c;故需要配置环境变量&#xff0c;新加系统路径JAVA_HOME&#xff0c;路径为jdk的主目录。 而后打开bin目录下的startup.bat文件出现如下窗口说明配置成功 idea继承tomcat服务器 使用java开发…...

编程日记 2024/3/2 16:58:20

AI时代编程新宠！如何让孩子成为未来的编程大师？

文章目录 一、了解编程的基础概念二、选择适合的编程工具三、激发孩子的兴趣四、注重基础能力的培养五、提供实践机会六、鼓励孩子与他人合作七、持续支持与鼓励《信息学奥赛一本通关》本书定位内容简介作者简介目录 随着科技的迅猛发展&#xff0c;编程已经从一种专业技能转变…...

编程日记 2024/3/2 16:57:19

Qt 中Json的构造和解析简单例子

概述: Qt中使用Json比较方便&#xff0c;不像纯C需要导入CJson RapidJson JsonCpp等第三方的库&#xff0c;主要使用到QJsonDocument、QJsonObject对象即可 1、如何构造一个json字符串 假如我们需要构造 {"cmd":"1001","data":{"content&q…...

编程日记 2024/3/2 16:56:18

CSS特性

小技巧&#xff1a;在调试工具中&#xff0c;css样式上看层叠&#xff0c;下看继承。 1、层叠性 相同的属性会被覆盖&#xff0c;不同的属性会叠加 2、继承性 3、优先级 基于不同种类的选择器的匹配规则。 通配符 < 标签 < 类选择器 < id选择器 < 行内样式 <…...

编程日记 2024/3/2 16:55:17

springcloud：3.1介绍雪崩和Resilience4j

灾难性雪崩效应 简介 服务与服务之间的依赖性，故障会传播，造成连锁反应，会对整个微服务系统造成灾难性的严重后果，这就是服务故障的“雪崩”效应。 原因 1.服务提供者不可用（硬件故障、程序bug、缓存击穿、用户大量请求） 2.重试加大流量（用户重试，代码逻辑重试） 3.服…...

编程日记 2024/3/2 16:54:16

实现定时器的两种方法：使用windows api定时器 和使用c++11/14 定时器

前言&#xff1a; 当我有一个开发需求&#xff0c;符合下面的条件 1.需要某个任务在程序中每隔一段时间就要执行一次&#xff0c;可能把这个任务封装成了一个函数。 2.这种需要定时执行的任务&#xff0c;有2个&#xff0c;3个....越来越多。 这个时候我们就可以考虑使用定时…...

编程日记 2024/3/2 16:51:13

H5：图像标签和路径

目录 一.前言 二.正文 1.图像标签 注意: 2.路径 Ⅰ.目录文件夹和根目录 Ⅱ.路径 三.结语 一.前言 本篇介绍有关标签和路径&#xff0c;关于图像标签我们来看看有什么需要注意的。 二.正文 1.图像标签 在HTML标签中&#xff0c;img标签用于定义HTML页面中的图像。 <im…...

编程日记 2024/3/2 16:50:12

AI学习(5):PyTorch-核心模块(Autograd):自动求导

1.介绍 在深度学习中&#xff0c;自动求导是一项核心技术&#xff0c;它使得我们能够方便地计算梯度并优化模型参数。PyTorch 提供了一个强大的自动求导模块(Autograd)&#xff0c;它可以自动计算张量的导数得出梯度信息&#xff0c;同时也支持高阶导数计算。 1.1 概念词 在学…...

编程日记 2024/3/2 16:47:09

Grid-Based Continuous Normal Representation for Anomaly Detection 论文阅读

Grid-Based Continuous Normal Representation for Anomaly Detection 论文阅读 摘要简介方法3.1 Normal Representation3.2 Feature Refinement3.3 Training and Inference 4 实验结果5 总结 文章信息&#xff1a; 原文链接&#xff1a;https://arxiv.org/abs/2402.18293 源码…...

编程日记 2024/3/2 16:46:08

FaceBook获取广告数据

1、访问 广告管理工具 确认自己登陆的账号下面能看到户。 ​ 2、使用 图谱Api探索工具 生成用户短期口令 ​ 3、get请求(或者浏览器直接打开)访问&#xff1a; https://graph.facebook.com/v19.0/me?fieldsid,name, email&access_token{上一步生成的口令} ​ 4、短期…...

编程日记 2024/3/2 16:45:07

Redis之十：Spring Data Redis --- CrudRepository方式

SpringData Redis CrudRepository方式 Spring Data Redis 的 CrudRepository 是 Spring Data 框架中用于提供基础 CRUD&#xff08;创建、读取、更新和删除&#xff09;操作的一个接口。在与 Redis 集成时&#xff0c;尽管 Redis 是一个键值存储系统&#xff0c;并没有像关系型…...

编程日记 2024/3/2 16:44:07

Spring重点记录

文章目录 1.Spring的组成2.Spring优点3.IOC理论推导4.IOC本质5.IOC实现&#xff1a;xml或者注解或者自动装配&#xff08;零配置&#xff09;。6.hellospring6.1beans.xml的结构为&#xff1a;6.2.Spring容器6.3对象的创建和控制反转 7.IOC创建对象方式7.1以有参构造的方式创建…...

编程日记 2024/3/2 16:43:06

代码覆盖率工具Gcovr和Fastcov的性能对比

在软件开发过程中&#xff0c;代码覆盖率工具是非常重要的&#xff0c;它可以帮助开发人员评估他们的代码覆盖情况&#xff0c;从而更好地进行测试和调试。在这方面&#xff0c;Gcovr和fastcov是两个常用的工具。本文将对这两种工具的性能进行对比分析。 首先&#xff0c;让我…...

编程日记 2024/3/2 16:42:05

css - flex布局实现div横向滚动

父盒子&#xff1a; display: flex; //将容器设置为Flex布局。overflow-x: scroll; //设置容器水平方向出现滚动条。white-space: nowrap; //防止项目换行显示。 子盒子&#xff1a; flex: 0 0 auto; //设置项目为固定宽度。width: 200px; //设置项目的宽度。margin-rig…...

编程日记 2024/3/2 16:41:04

关于在Ubuntu20.04环境下安装GRPC

关于在Ubuntu20.04环境下安装GRPC 1 cmake安装 要在Ubuntu 20.04上安装CMake 3.26.4，请按照以下步骤进行操作： 打开终端并更新apt软件包列表： sudo apt update安装必要的依赖项： sudo apt install -y wget gcc g++ build-essential下载CMake 3.26.4的源代码： wget https…...

编程日记 2024/3/2 16:38:01

力扣601 体育馆的人流量

在解决"连续三天及以上人流量超过100的记录"问题时&#xff0c;MySQL方案作为力扣解决问题的方案通过窗口函数和分组技巧高效地识别连续记录。而Python与Pandas方案作为扩展则展示了在数据处理和分析方面的灵活性&#xff0c;通过行号变换和分组计数来筛选符合条件的…...

编程日记 2024/3/2 16:35:57

ubuntu20.04设置docker容器开机自启动

ubuntu20.04设置docker容器开机自启动 1 docker自动启动2 容器设置自动启动3 容器自启动失败处理 1 docker自动启动 &#xff08;1&#xff09;查看已启动的服务 $ sudo systemctl list-units --typeservice此命令会列出所有当前加载的服务单元。默认情况下&#xff0c;此命令…...

编程日记 2024/3/2 16:33:55

Kubernetes/k8s的核心概念

一、什么是 Kubernetes Kubernetes&#xff0c;从官方网站上可以看到&#xff0c;它是一个工业级的容器编排平台。Kubernetes 这个单词是希腊语&#xff0c;它的中文翻译是“舵手”或者“飞行员”。在一些常见的资料中也会看到“ks”这个词&#xff0c;也就是“k8s”&#xff…...

编程日记 2024/3/2 16:31:53

vue 前端预览 Excel 表

一、安装依赖包官网 npm i luckyexceltemplate 模板 <!-- 用于渲染表格的容器 --> <div id"luckysheet" stylewidth:100vw;height:100vh></div>二、加载 异步加载及 import LuckyExcel from luckyexcel;/* 下列代码加载 cdn 文件&#xff0c;你…...

编程日记 2024/3/2 16:30:52

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2026/1/18 20:26:45

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2026/1/18 14:00:51

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/11/28 2:51:33

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/11/10 10:45:11

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2026/1/16 21:17:41

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2026/1/15 6:46:00

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

编程新知 2026/1/15 5:02:09