HTML---表单验证

文章目录

  • 目录

    本章目标

    一.表单验证概述

    二.表单选择器

    属性过滤选择器 

     三.表单验证

     表单验证的方法

    总结


本章目标

  • 掌握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.mzph.cn/news/713634.shtml

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

相关文章

图神经网络导论 - 刘知远

一、神经网络基础 近年来&#xff0c;机器学习领域的发展迅速&#xff0c;主要表现在多种神经网络架构的出现。尽管不同的神经网络架构相差甚远&#xff0c;但现有的神经网络架构可以分为几个类别&#xff1a; 卷积神经网路是前馈神经网路的特殊形式&#xff0c;FNN通常是全…

什么是VR虚拟现实|虚拟科技博物馆|VR设备购买

虚拟现实&#xff08;Virtual Reality&#xff0c;简称VR&#xff09;是一种通过计算机技术模拟出的一种全新的人机交互方式。它可以通过专门的设备&#xff08;如头戴式显示器&#xff09;将用户带入一个计算机生成的虚拟环境之中&#xff0c;使用户能够与这个虚拟环境进行交互…

Spring Boot文档目录

目录 官方文档 说明&#xff1a;本文档翻译的版本&#xff1a;2.7.18-SNAPSHOT。 1. 法规&#xff08;Legal&#xff09; 2. 获取帮助&#xff08;Getting Help&#xff09; 3. 文档概述&#xff08;Documentation Overview&#xff09; 4. 开始使用&#xff08;Getting Sta…

BUUCTF---另外一个世界1

1.这是一道杂项题&#xff0c;也是我觉得最值得记录的一道题。 2.话不多说&#xff0c;题目描述&#xff08;真的是另一个世界&#xff09; 3.下载附件&#xff0c;是一张图片 4.尝试了查看属性&#xff0c;以及在记事本中打开看看有没有什么有用的信息&#xff0c;发现没什么…

FaceBook获取广告数据

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

c# 获取源码路径与当前程序所在路径

获取源码路径 private static string GetFilePath([CallerFilePath] string path null) {return path;}//当程序所在路径string str67 System.Environment.CurrentDirectory;//源码路径 var path GetFilePath();var directory Path.GetDirectoryName(path);参考

Vue2:用node+express写一个轻量级的后端服务

1、桌面创建demo文件夹 进入demo&#xff0c;执行如下命令 npm init输入名称&#xff1a; test_server然后一路回车 2、安装express框架 npm i express3、新建server.js 在demo文件夹中&#xff0c;新建server.js const express require(express) const app express()…

2023年12月CCF-GESP编程能力等级认证Scratch图形化编程三级真题解析

一、单选题(共15题,共30分) 第1题 现代计算机是指电子计算机,它所基于的是( )体系结构。 A:艾伦图灵 B:冯诺依曼 C:阿塔纳索夫 D:埃克特-莫克利 答案:B 第2题 默认小猫角色,执行下列程序,舞台上会看到? ( ) A: B: C: D: 答案:C

干净的语料没有免疫力吗?

干净的语料指的是没有杂音、无污染、无错误的语言材料。虽然干净的语料本身没有免疫力&#xff0c;但可以提供给机器学习算法或自然语言处理模型&#xff0c;帮助提高其性能和准确性。通过使用干净的语料&#xff0c;可以降低噪声干扰&#xff0c;减少模型的误差&#xff0c;提…

Java类加载器 和 双亲委派【详解】

一.类加载器&#xff1a; 由JDK提供的&#xff0c;用于加载一些资源文件到JVM内存里的一项技术。主要是加载class文件到内存&#xff0c;也可以加载一些资源文件。 2.JDK提供了三个类加载器&#xff1a; BootstrapClassLoader&#xff1a;引导类加载器&#xff0c; 是c语言编写…

LightGBM高级教程:高级特征工程

导言 特征工程是机器学习中至关重要的一部分&#xff0c;它直接影响到模型的性能和泛化能力。在LightGBM中进行高级特征工程可以进一步提高模型的效果。本教程将详细介绍如何在Python中使用LightGBM进行高级特征工程&#xff0c;并提供相应的代码示例。 1. 特征交叉 特征交叉…

界面控件DevExpress .NET MAUI v23.2新版亮点 - 拥有全新的彩色主题

DevExpress拥有.NET开发需要的所有平台控件&#xff0c;包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。屡获大奖的软件开发平台DevExpress 今年第一个重要版本v23.1正式发布&#xff0c;该版本拥有众多…

python链接数据库,实现数据增删改查

要在Python中链接数据库并实现数据的增删改查&#xff0c;需要使用数据库的API&#xff08;Application Programming Interface&#xff09;。以下是一个示例&#xff0c;演示如何使用Python的SQLite3模块连接并操作数据库&#xff1a; 安装SQLite3模块&#xff08;如未安装&a…

如何克隆树莓派系统到较小的硬盘/SD卡上(如何分区、设置修复引导)

最近有个老固态硬盘空下来了&#xff0c;虽然写入速度没那么快&#xff0c;但是足够满足千兆网络了&#xff0c;所以我就想把现在给树莓派使用的固态硬盘换下来。由于一些设置很浪费时间&#xff0c;所以我不打算重装系统。此外这个老固态是 120GB 的&#xff0c;要小于正在使用…

redis实现分布式全局唯一id

目录 一、前言二、如何通过Redis设计一个分布式全局唯一ID生成工具2.1 使用 Redis 计数器实现2.2 使用 Redis Hash结构实现 三、通过代码实现分布式全局唯一ID工具3.1 导入依赖配置3.2 配置yml文件3.3 序列化配置3.4 编写获取工具3.5 测试获取工具 四、运行结果 一、前言 在很…

Linux运维_Bash脚本_部署安装DocBook-XML-4.5(XML-DTD)

Linux运维_Bash脚本_部署安装DocBook-XML-4.5(XML-DTD) Bash (Bourne Again Shell) 是一个解释器&#xff0c;负责处理 Unix 系统命令行上的命令。它是由 Brian Fox 编写的免费软件&#xff0c;并于 1989 年发布的免费软件&#xff0c;作为 Sh (Bourne Shell) 的替代品。 您可…

leetcode 热题 100_最长连续序列

题解一&#xff1a; 哈希表&#xff1a;找连续最长的数字序列&#xff0c;很容易联想到排序&#xff0c;但排序的时间复杂度O(nlogN)过大&#xff0c;判题容易超时。因此我们需要使用哈希表来快速查找&#xff0c;序列中是否存在与某个数相邻的数。用HashSet建立哈希表并去重&a…

【Javascript编程实操02】1、判断一个年份是闰年还是平年 2、找到三个数中最小的数

目录 前言 1、判断一个年份是闰年还是平年 原理&#xff1a; 代码&#xff1a; 实现效果&#xff1a; 2、找到三个数中最小的数 流程图&#xff1a; 代码&#xff1a; 实现效果&#xff1a; 总结 前言 本次继续针对Javascript阶段的if...else...的实操练习&#xff0…

IDEA 配置股票插件

IDEA配置股票基金实时查看插件&#xff0c;步骤如下&#xff1a; 打开Settings&#xff0c;找到Plugins&#xff0c;在Marketplace中搜索&#xff1a;Money Never Sleeps&#xff0c;如下图所示&#xff1a; Money Never Sleeps是IntelliJ IDEA平台插件. 支持查看股票实时行情…

three.js 叉乘判断物体在人前左,前右,后左、后右

效果&#xff1a; 代码&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs"></div><div style"padding: 10px;text-align: left;">叉乘判断物体…