HTML---表单验证

news/2024/4/15 3:55:03/文章来源:https://blog.csdn.net/zhoutong2323/article/details/136397382

文章目录

  • 目录

    本章目标

    一.表单验证概述

    二.表单选择器

    属性过滤选择器 

     三.表单验证

     表单验证的方法

    总结


本章目标

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

 表单验证的方法


总结

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_998744.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vision Transformer结构解析

Vision Transformer结构解析 ViT简介ViT参数量ViT三大模块ViT图像预处理模块——PatchEmbed多层Transformer Encoder模块MLP&#xff08;FFN&#xff09;模块 基本的Transformer模块Vision Transformer类的实现Transformer知识点网络结构计算复杂度对比Transformer的参数量和计…

C#,煎饼排序问题(Pancake Sorting Problem)算法与源代码

1 煎饼排序问题 给定一个未排序的数组&#xff0c;任务是对给定数组进行排序。您只能在阵列上执行以下操作。 翻转&#xff08;arr&#xff0c;i&#xff09;&#xff1a;将数组从0反转为i 示例&#xff1a; 输入&#xff1a;arr[]{23、10、20、11、12、6、7} 输出&#xff1a…

通过联合部署DDoS高防和WAF提升网站防护能力

如果您的网站遭受的攻击既有流量型攻击&#xff0c;又混杂精巧的Web应用层攻击时&#xff08;例如SQL注入、跨站脚本攻击、命令注入等&#xff09;时&#xff0c;推荐您组合使用阿里云DDoS高防和Web 应用防火墙 WAF&#xff08;Web Application Firewall&#xff09;&#xff0…

B端系统优化,可不是换个颜色和图标,看看与大厂系统的差距。

Hi&#xff0c;我是贝格前端工场&#xff0c;优化升级各类管理系统的界面和体验&#xff0c;是我们核心业务之一&#xff0c;欢迎老铁们评论点赞互动&#xff0c;有需求可以私信我们 一、不要被流于表面的需求描述迷惑。 很多人找我们优化系统界面&#xff0c;对需求总是轻描淡…

springboot整合redis redis连idea

首先是maven项目里pom.xml添加依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-redis</artifactId> </dependency> 然后是application.properties 中增加redis配置 spring.redis.host=lo…

C++ 标准库类型string

C/C总述&#xff1a;Study C/C-CSDN博客 目录 定义和初始化string对象 string的增 使用push_back进行尾插 使用insert插入 使用append函数完成string的拼接 string的删 使用pop_back进行尾删 使用erase删除 string的查 使用find函数正向搜索第一个匹配项 使用rf…

ArcGIS学习(十二)ModelBuilder参数化建模

ArcGIS学习(十二)ModelBuilder参数化建模 1.ModelBuilder应用基础 本任务给大家带来的是ArcGIS中一个非常有意思也很重要的模块一-ModelBuilder。ModelBuilder有什么用呢? 大家设想一下这些场景: 你在做一项复杂研究,使用到ArcGIS中的多个工具和步骤,包括缓冲区分析、空…

【查找算法】插值查找

文章目录 一&#xff1a;插值查找**代码公式&#xff1a;int mid left (right - left) * (findVal - arr[left]) / (arr[right] - arr[left]);**1.1 基本概念1.2 基本思想1.3 原理介绍 二&#xff1a;代码实现 一&#xff1a;插值查找 代码公式&#xff1a;int mid left (…

Python笔记|基础算数运算+数字类型(1)

重新整理记录一下python的基础知识 基础运算符 、-、*、/ &#xff1b;括号 ()用来分组。 >>>2 2 4 >>>50 - 5*6 20 >>>(50 - 5*6) / 4 5.0 >>>8 / 5 1.6向下取整除法&#xff1a;向下舍入到最接近的整数的数学除法。运算符是 //。比如1…

Win UI3开发笔记(四)设置主题续2

本机深色主题下设置的背景颜色可以作用于整个对话框&#xff0c;本机浅色模式下设置的背景颜色只作用与下边的部分。 如果本机选深色&#xff0c;程序选浅色&#xff0c;设置为light只对上部分管用&#xff0c;下部分不管用。如图&#xff0c;左边那个hello按钮要看不见了。。…

C++指针(四)万字图文详解!

个人主页&#xff1a;PingdiGuo_guo 收录专栏&#xff1a;C干货专栏 前言 相关文章&#xff1a;C指针&#xff08;一&#xff09;、C指针&#xff08;二&#xff09;、C指针&#xff08;三&#xff09; 本篇博客是介绍函数指针、函数指针数组、回调函数、指针函数的。 点赞破六…

怎么将pom在文件放到src下方

今天在IDEA从git拉取项目的时候&#xff0c;发现pom.xml文件在文件夹src的上方&#xff0c;平时看惯了项目的pom.xml文件在文件夹src的下方&#xff0c;应该怎么去设置呢&#xff1f; 点击设置——>点击Folder Always on Top 即可 参考&#xff1a;http://t.csdnimg.cn/s34…

2024蓝桥杯每日一题(二分)

一、第一题&#xff1a;教室 解题思路&#xff1a;二分差分 对天数进行二分&#xff0c;在ck函数中用差分方法优化多次区间累加。 【Python程序代码】 n,m map(int,input().split()) a [0] list(map(int,input().split())) d,s,t [0]*(m5),[0]*(m5),[0]*(m5) for…

CSS补充(下),弹性布局(上)

高级选择器 1.兄弟选择器 2.同时满足 div.bg{background-color: red;}p.bg{background-color: green;}spam.bg{background-color: blue;}注&#xff1a;选择器中间没有空格&#xff0c;有明确标识的选择器写在后面 3.各种伪类的应用 3.1作为第几个子元素 选择器:nth-child…

LeetCode 2917.找出数组中的 K-or 值:基础位运算

【LetMeFly】2917.找出数组中的 K-or 值&#xff1a;基础位运算 力扣题目链接&#xff1a;https://leetcode.cn/problems/find-the-k-or-of-an-array/ 给你一个下标从 0 开始的整数数组 nums 和一个整数 k 。 nums 中的 K-or 是一个满足以下条件的非负整数&#xff1a; 只有…

SPSS直接输出三线表

STEP1 下载三线表.stt至安装目录的Looks文件夹 STEP2 在SPSS菜单栏中找到 编辑-选项-透视表 表外观下拉到最底&#xff0c;选择三线表&#xff08;如果第一步没保存对是不会出现的&#xff09;&#xff0c;然后点击确定 效果&#xff1a;

k8s 网络概念与策略控制

一、Kubernetes 基本网络模型 Kubernetes 的容器网络模型可以把它归结为约法三章和四大目标。 1、约法三章 约法三章确保了Kubernetes容器网络模型的基本特性&#xff1a; ① 任意两个 pod 之间可以直接通信&#xff1a;在Kubernetes中&#xff0c;每个 Pod 都被分配了一个…

【比较mybatis、lazy、sqltoy、mybatis-flex、easy-query操作数据】操作批量新增、分页查询(三)

orm框架使用性能比较 比较mybatis、lazy、sqltoy、mybatis-flex、easy-query操作数据 环境&#xff1a; idea jdk17 spring boot 3.0.7 mysql 8.0测试条件常规对象 orm 框架是否支持xml是否支持 Lambda对比版本mybatis☑️☑️3.5.4sqltoy☑️☑️5.2.98lazy✖️☑️1.2.4…

cocos creator 3.7.2使用shader实现图片扫光特效

简介 功能&#xff1a;图片实现扫光效果 引擎&#xff1a;cocos Creator 3.7.2 开发语言&#xff1a;ts 完整版链接 链接https://lengmo714.top/284d90f4.html 效果图 shader代码 // Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd. CCEffect %{techniques:- pas…

探索数据结构:单链表的实战指南

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;数据结构与算法 贝蒂的主页&#xff1a;Betty‘s blog 前言 在上一章节中我们讲解了数据结构中的顺序表&#xff0c;知道了顺序…