jQuery 正则表达式 验证表单

news/2024/2/25 12:45:14/文章来源:https://blog.csdn.net/tdx03/article/details/135619094

文章目录

  • 简介:
  • 什么是正则表达式以及作用:
  • ●文本框内容的验证:
  • 代码演示示例:

简介:

jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery
Form有两个核心方法 – ajaxForm() 和 ajaxSubmit(),
它们集合了从控制表单元素到决定如何管理提交进程的功能。另外,插件还包括其他的一些方法:
formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields()
和 resetForm()等。

什么是正则表达式以及作用:

正则表达式,又称规则表达式,(Regular
Expression,在代码中常简写为regex、regexp或RE),是一种文本模式,包括普通字符(例如,a 到 z
之间的字母)和特殊字符(称为"元字符"),是计算机科学的一个概念。

正则表达式中的括号()主要有两个作用:分组和捕获。

  1. 分组:在正则表达式中,括号可以用来将一些字符组合在一起,形成一个分组。这通常用于确定优先级、重复次数或特殊的匹配规则。例如,(ab)可以将字符a和b组合在一起作为一个整体进行匹配。
  2. 捕获:当正则表达式中的括号内匹配到特定的文本时,可以将这些文本保存下来,以便后续使用。捕获的内容可以用于替换操作或者在其他正则表达式中进行引用。例如,在替换操作中,可以使用\1来引用第一个捕获的内容。

●文本框内容的验证:

1、实现思路

2、使用 String 对象的 length 属性验证密码的长度

3、验证两次输入密码是否一致

4、使用 length 属性获取文本长度,然后使用 for 循环和 substring ( ) 方法依次截断单个字符,最后判断每个字符是否是数字

标签描述
form定义供用户输入的表单
input定义输入域
textarea定义文本域 (一个多行的输入控件)
label定义了 input 元素的标签,一般为输入标题
fieldset定义了一组相关的表单元素,并使用外框包含起来
legend定义了 fieldset 元素的标题
select定义了下拉选项列表
optgroup定义选项组
option定义下拉列表中的选项
button定义一个点击按钮

代码演示示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>.over { font-size: large; font-style: italic; }.out { font-size: small; }
</style>
<body><div id="display">demo</div>
<div id="test"></div>
<br><br>
<form id="theForm">输入字符<div><input type="text" id="username" onblur="isString(this.value)"></div>输入正确的数字<div><input type="text" id="password" onblur="isInteger(this.value)"></div>输入正确的电话<div><input type="text" id="telephone" onblur="isTelephone(this.value)"></div>确移动电话<div><input type="text" id="mobile" onblur="isMobile(this.value)"></div>邮箱地址<div><input type="text" id="email" onblur="isEmail(this.value)"></div>inernet地址<div><input type="text" id="uri" onblur="isUri(this.value)"></div><div><input type="button" value="Validata" onclick="return validata();"></div></form>
<script src="../jQuery/jquery-1.12.4.js"></script>
<script>function validata() {if ($("#username").val() == "") {alert("请输入名字");return false;}if ($("#password").val() == "") {alert("请输入密码");return false;}if ($("#telephone").val() == "") {alert("请输入电话号码");}if ($("#email").val() == "") {$("#email").val("shuangping@163.com");}}function isInteger(obj) {reg = /^[-+]?\d+$/;if (!reg.test(obj)) {$("#test").html("<b>Please input correct figures</b>");} else {$("#test").html("");}}function isEmail(obj) {reg = /^\w{3,}@\w+(\.\w+)+$/;if (!reg.test(obj)) {$("#test").html("<b>请输入正确的邮箱地址</b>");} else {$("#test").html("");}}function isString(obj) {reg = /^[a-z,A-Z]+$/;if (!reg.test(obj)) {$("#test").html("<b>只能输入字符</b>");} else {$("#test").html("");}}function isTelephone(obj) {reg = /^(\d{3,4}\-)?[1-9]\d{6,7}$/;if (!reg.test(obj)) {$("#test").html("<b>请输入正确的电话号码!</b>");} else {$("#test").html("");}}function isMobile(obj) {reg = /^(\+\d{2,3}\-)?\d{11}$/;if (!reg.test(obj)) {$("#test").html("请输入正确移动电话");} else {$("#test").html("");}}function isUri(obj) {reg = /^http:\/\/[a-zA-Z0-9]+\.[a-zA-Z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;if (!reg.test(obj)) {$("#test").html($("#uri").val() + "请输入正确的inernet地址");} else {$("#test").html("");}}//document加载完毕执行$(document).ready(function() {// do something here//隔行换色功能$("p").each(function(i) {this.style.color = ['red', 'green', 'blue', 'black'][i % 2]});//eq(2)获取$("p")集合的第3个元素$("p").eq(2).click(function() {$("#display").css("color", "blue")});//所有test中的p都附加了样式"over"。$("#test>p").addClass("over");//test中的最后一个p附加了样式"out"。$("#test p:last").addClass("out");//选择同级元素还没看懂//$('#faq').find('dd').hide().end().find('dt').click(function()//选择父级元素$("a").hover(function() {$(this).parents("p").addClass("out")},function() {$(this).parents("p").removeClass("out")})//hover鼠标悬停效果,toggle每次点击时切换要调用的函数 ,//trigger(eventtype): 在每一个匹配的元素上触发某类事件,//bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定从每一个匹配的元素中(添加)删除绑定的事件。//方法的连写$("#display").hover(function() {$(this).addClass("over");},function() {$(this).removeClass("over");}).click(function() {alert($("#display").text())});});</script>
</body>
</html>

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

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

相关文章

数据仓库(2)-认识数仓

1、数据仓库是什么 数据仓库 &#xff0c;由数据仓库之父比尔恩门&#xff08;Bill Inmon&#xff09;于1990年提出&#xff0c;主要功能仍是将组织透过资讯系统之联机事务处理(OLTP)经年累月所累积的大量资料&#xff0c;透过数据仓库理论所特有的资料储存架构&#xff0c;做…

可以在微信群里使用midjourney,gpt4,gemini,文心一言4.0,且免费

免费使用gpt4和midjourney 免费使用 参考链接&#xff1a; https://chat.xutongbao.top/

【银行测试】银行项目,信用卡业务测试+常问面试(三)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 银行测试-信用卡业…

轻松识别Midjourney等AI生成图片,开源GenImage

AIGC时代&#xff0c;人人都可以使用Midjourney、Stable Diffusion等AI产品生成高质量图片&#xff0c;其逼真程度肉眼难以区分真假。这种虚假照片有时会对社会产生不良影响&#xff0c;例如&#xff0c;生成公众人物不雅图片用于散播谣言&#xff1b;合成虚假图片用于金融欺诈…

Angular系列教程之DOM操作

文章目录 引言1. ElementRef2. Renderer23. ViewChild结论 引言 在Angular中&#xff0c;DOM操作是开发Web应用程序的一个重要方面。通过对DOM进行操作&#xff0c;我们可以动态地修改页面内容、样式和元素行为。本文将详细介绍如何在Angular中进行DOM操作&#xff0c;并提供相…

从数据可视化到场景渲染:山海鲸的创新与实践

作为山海鲸的开发者&#xff0c;我们深知可视化模型场景渲染在数据分析和决策支持中的重要作用。因此在保证山海鲸可视化软件免费编辑、分享、部署的同时也在场景渲染方面不断优化&#xff0c;本文将介绍山海鲸在可视化模型场景渲染方面的技术革新与实践探索。 首先&#xff0…

【STM32】STM32学习笔记-USART串口数据包(28)

00. 目录 文章目录 00. 目录01. 串口简介02. HEX数据包03. 文本数据包04. HEX数据包接收05. 文本数据包接收06. 预留07. 附录 01. 串口简介 串口通讯(Serial Communication)是一种设备间非常常用的串行通讯方式&#xff0c;因为它简单便捷&#xff0c;因此大部分电子设备都支持…

Go并发快速入门:Goroutine

Go并发&#xff1a;Goroutine 1.并发基础概念&#xff1a;进程、线程、协程 (1) 进程 可以比作食材加工的一系列动作 进程就是程序在操作系统中的一次执行过程&#xff0c;是由系统进行资源分配和调度的基本单位&#xff0c;进程是一个动态概念&#xff0c;是程序在执行过程…

unity面试题

一&#xff1a;什么是协同程序&#xff1f; 在主线程运行的同时开启另一段逻辑处理&#xff0c;来协助当前程序的执行&#xff0c;协程很像多线程&#xff0c;但是不是多线程&#xff0c;Unity的协程实在每帧结束之后去检测yield的条件是否满足。 二&#xff1a;Unity3d中的碰…

汽车线束的汽配企业MES管理系统解决方案

随着科技的飞速发展和环保需求的日益提升&#xff0c;新能源汽车在全球范围内崭露头角&#xff0c;成为未来出行的主导力量。在这股浪潮中&#xff0c;中国凭借其强大的研发实力和市场敏锐度&#xff0c;迅速崛起为新能源汽车领域的佼佼者。而作为汽车数字化控制与智能化应用的…

Excel地址

解题思路&#xff1a; 根据题中歪歪和笨笨的话可以有两种解法。 1.输入的数为多大&#xff0c;则循环1多少次&#xff0c;当值为27时就要进行进位操作。这时要分情况讨论。 当集合中元素为一个时&#xff0c;如26&#xff0c;则需要变为1 1&#xff0c;集合元素个数加一。 当…

Maven 依赖传递和冲突、继承和聚合

一、依赖传递和冲突 1.1 Maven 依赖传递特性 1.1.1 概念 假如有三个 Maven 项目 A、B 和 C&#xff0c;其中项目 A 依赖 B&#xff0c;项目 B 依赖 C。那么我们可以说 A 依赖 C。也就是说&#xff0c;依赖的关系为&#xff1a;A—>B—>C&#xff0c; 那么我们执行项目 …

IC验证——perl脚本ccode_standard——c代码寄存器配置标准化

目录 1 脚本名称 2 脚本路径 3 脚本参数说明 4 脚本操作说明 5 脚本代码 1 脚本名称 ccode_standard 2 脚本路径 /scripts/bin/ccode_standard 3 脚本参数说明 次序 参数名 说明 1 address (./rfdig&#xff1b;.&#xff1b;..&#xff1b;./boot) 指定脚本执行路…

ES高级查询

ES中提供了一种强大的检索数据方式&#xff0c;这种检索方式称为Query DSL&#xff0c;这种方式的丰富查询语法让ES检索变得更强大&#xff0c;更简洁。 1.常见查询 1.1查询所有[match_all] match_all关键字&#xff1a;返回索引中的全部文档。 GET /products/_search { &…

Redis-redis.conf配置文件中的RDB与AOF持久化方式的详解与区别

RDB&#xff08;Redis Database&#xff09; RDB是Redis的默认持久化方式&#xff0c;它将内存中的数据以二进制格式写入磁盘&#xff0c;形成一个快照。RDB持久化有以下几个重要的配置选项&#xff1a; save&#xff1a;指定了保存RDB的策略&#xff0c;默认的配置是每900秒&…

域名群站开源系统分享开源域名授权系统

一、需要自己安装PHP和MYSQL服务器环境。 二、务必设置伪静态规则&#xff0c;否则将无法访问文章栏目页面。 三、启用伪静态功能&#xff0c;请在站点设置中选择使用thinkphp的伪静态规则。 四、在域名的根目录下找到”data/config.php”文件&#xff0c;填入数据库的账号和…

使用WAF防御网络上的隐蔽威胁之CSRF攻击

在网络安全领域&#xff0c;除了常见的XSS&#xff08;跨站脚本&#xff09;攻击外&#xff0c;CSRF&#xff08;跨站请求伪造&#xff09;攻击也是一种常见且危险的威胁。这种攻击利用用户已经验证的身份在没有用户知情的情况下&#xff0c;执行非授权的操作。了解CSRF攻击的机…

无需主网结算来进行 BTC 交易?Tectum 提出了新的解决方案

撰文&#xff1a;Tom&#xff0c;CryptoBooster 下载TechubNews APP&#xff0c;探索Web3的无限可能&#xff01;掌握最新动态&#xff0c;发现更多相关资讯&#xff0c;与行业领袖共同探索未来趋势。立即下载&#xff0c;开启您的Web3之旅&#xff01; 区块链发展至今&#x…

解决防爬虫机制方法(二)

最近为了完成学校的大数据的作业&#xff0c;老师要我们爬一个的网站&#xff0c;里面有还算不错的防爬机制&#xff0c;忙活了几天&#xff0c;总结出一些常见的防爬机制的应对方法&#xff0c;方法均来自个人实战总结&#xff0c;非专业爬虫角度分析 承接上一次讲的方法解决…

MybatisPlus-删除

目录 1.数据库建表 2.项目 ---就是更新del_flag字段为2 (1)pom.xml (2)Application (3)applicatiom.yml (4)entity (5)mapper (6)service (7)service目录下的impl目录 (8)common (9)enums (10)config (11)controller postman测试 3.彻底删除数据库记录 (11&…