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

HTML---表单验证

news 2025/8/23 5:35:49

文章目录

  • 目录

    本章目标

    一.表单验证概述

    二.表单选择器

    属性过滤选择器 

     三.表单验证

     表单验证的方法

    总结

本章目标

  • 掌握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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/8/21 22:38:46

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/8/22 3:28:17

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/8/22 5:00:36

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2025/8/22 5:05:14

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2025/8/19 23:51:38

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/8/13 21:32:37

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2025/8/22 5:18:22

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

编程新知 2025/7/8 3:17:13

C++--string的模拟实现

一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现&#xff0c;其目的是加强对string的底层了解&#xff0c;以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量&#xff0c;…...

编程新知 2025/8/22 2:49:08