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

jQuery 正则表达式 验证表单

文章目录

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

简介:

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>

相关文章:

jQuery 正则表达式 验证表单

文章目录 简介&#xff1a;什么是正则表达式以及作用&#xff1a;●文本框内容的验证&#xff1a;代码演示示例&#xff1a; 简介&#xff1a; jQuery Form插件是一个优秀的Ajax表单插件&#xff0c;可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法…...

如何使用SVN查看旧版本

和目录 第一步&#xff1a;打开SVN客户端 第二步&#xff1a;浏览历史版本 第三步&#xff1a;还原历史版本 结论 Subversion (缩写为SVN)是一种常用的版本控制系统&#xff0c;它可以帮助团队协作开发软件项目。除了基本的版本控制功能外&#xff0c;SVN还提供了许多其他功…...

使用 GitHub 远程仓库

使用 GitHub 远程仓库 GitHub 是最大的 Git 版本库托管商&#xff0c;是成千上万的开发者和项目能够合作进行的中心。 大部分 Git 版本库都托管在 GitHub&#xff0c;很多开源项目使用 GitHub 实现 Git 托管、问题追踪、代码审查以及其它事情。本篇文章主要带大家上手 GitHub …...

关键词提取

在自然语言处理领域中&#xff0c;处理海量文本信息的关键在于把用户关心的问题提取出来。而关键词是能够表达文档中心内容的词语&#xff0c;更是表达文档主题的最小单位。因此&#xff0c;文本关键词的提取对于文本信息的理解是至关重要的。 关键词提取是文本挖掘领域下的一个…...

web开发学习笔记(2.js)

1.引入 2.js的两种引入方式 3.输出语句 4.全等运算符 5.定义函数 6.数组 7.数组属性 8.字符串对象的对应方法 9.自定义对象 10.json对象 11.bom属性 12.window属性 13.定时刷新时间 14.跳转网址 15.DOM文档对象模型 16.获取DOM对象&#xff0c;根据DOM对象来操作网页 如下图…...

Vue Axios——前端技术栈

文章目录 基本介绍Vue是什么&#xff1f; MVVMVue的使用快速入门注意事项和使用细节 Vue 数据绑定机制分析数据单向渲染注意事项和细节 双向数据绑定事件绑定示例&#xff1a;注意事项和使用细节课后作业1课后作业2 修饰符示例 条件渲染/控制: v-if v-showv-if VS v-show课后作…...

九、Qt C++ 数据库开发

《一、QT的前世今生》 《二、QT下载、安装及问题解决(windows系统)》《三、Qt Creator使用》 ​​​ 《四、Qt 的第一个demo-CSDN博客》 《五、带登录窗体的demo》 《六、新建窗体时&#xff0c;几种窗体的区别》 《七、Qt 信号和槽》 《八、Qt C 毕业设计》 《九、Qt …...

力扣电话号码的组合

文章目录 题目说明做题思路代码实现代码解析 题目链接 题目说明 首先我们先分析一下这个题目题目中说呢先给出一个字符串这个字符串其实就是这个九键数字我们要按照要求将数字所代表的字符进行自由组合形成一个字符串并且这个字符串的长度和输入的数字字符串长度相同&#xff0…...

ZooKeeper 实战(五) Curator实现分布式锁

文章目录 ZooKeeper 实战(五) Curator实现分布式锁1.简介1.1.分布式锁概念1.2.Curator 分布式锁的实现方式1.3.分布式锁接口 2.准备工作3.分布式可重入锁3.1.锁对象3.2.非重入式抢占锁测试代码输出日志 3.3.重入式抢占锁测试代码输出日志 4.分布式非可重入锁4.1.锁对象4.2.重入…...

基于kubernetes部署MySQL主从环境

部署方式 通过部署mysql主从容器&#xff0c;配置主从pod之间数据同步。 配置数据库访问的密码 创建 Mysql 密码的 Secret [rootk8s-master1 master]# kubectl create secret generic mysql-password --namespaceapp --from-literalmysql_root_passwordroot secret/mysql-pas…...

【JAVA语言-第13话】异常处理 之 try-catch-finally,throws,throw关键字的详细解析

目录 异常处理 1.1 概述 1.2 异常分类 1.3 异常处理 1.3.1 throws 1.3.2 try-catch 1.3.3 finally代码块 1.3.4 throw关键字 1.3.5 throw和throws的区别 1.4 自定义异常 1.4.1 概述 1.4.2 定义 1.4.3 自定义异常练习 异常处理 1.1 概述 在Java中&#xff0c;异常…...

ChatGPT4.0 >ChatGPT 3.5 > 文心一言

文章目录 前言一、ChatGPT4.0与ChatGPT3.5相比具有以下优点&#xff1a;二、ChatGPT和文心一言相比具有以下优点&#xff1a;总结 前言 ChatGPT是一种基于自然语言处理的对话型人工智能模型&#xff0c;由OpenAI开发。它是使用了大规模的语料库进行无监督学习的结果&#xff0…...

Linux 入门命令大全汇总 + Linux 集锦大全 【20240115】

文章目录 Linux 入门命令大全汇总Linux 集锦大全更多信息 Linux 入门命令大全汇总 别有一番风趣的alias 刚刚好合适的 apropos 命令 迷你计算器 bc 可看黄道吉日的 cal 全文可查看&#xff1a; Linux入门命令大全全文 Linux 集锦大全 linux终端中最漂亮的几款字体介绍及…...

【Web】NSSCTF Round#16 Basic个人wp(全)

出题友好&#xff0c;适合手生复健。 目录 ①RCE但是没有完全RCE ②了解过PHP特性吗 ①RCE但是没有完全RCE 上来就是一段md5八股 (string)就是不让用数组了&#xff0c;然后强比较需要md5碰撞 ?md5_1%4d%c9%68%ff%0e%e3%5c%20%95%72%d4%77%7b%72%15%87%d3%6f%a7%b2%1b%dc…...

【目标跟踪】跨相机如何匹配像素

文章目录 前言一、计算思路二、代码三、结果 前言 本本篇博客介绍一种非常简单粗暴的方法&#xff0c;做到跨相机像素匹配。已知各相机内外参&#xff0c;计算共视区域像素投影&#xff08;不需要计算图像特征&#xff09;。废话不多说&#xff0c;直接来&#xff0c;见下图。…...

Python 发微信:实现自动化沟通的利器

引言&#xff1a; 在当今信息爆炸的时代&#xff0c;微信已经成为人们日常生活中不可或缺的沟通工具。然而&#xff0c;手动发送微信消息往往耗时耗力&#xff0c;尤其是在需要频繁发送消息的场景下。为了提高工作效率和便利性&#xff0c;我们可以利用 Python 编程语言来实现自…...

计算机网络——HTTP协议

1. HTTP的概述 HTTP&#xff08;超文本传输协议&#xff09;&#xff0c;定义在RFC2616中&#xff0c;是用于分布式和协作式多媒体系统之间交互的应用层通信协议。 1.1 无状态 HTTP是一个无状态协议&#xff0c;意味着它不保存先前交互的记录。每个请求都独立于其他请求处理。…...

QT上位机开发(利用tcp/ip访问plc)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 plc是工控领域很重要的一个器件。简单的plc一般就是对io进行控制&#xff0c;但是复杂的plc&#xff0c;还可以控制电机、变频器&#xff0c;在工业…...

MySQL-多表连接查询

&#x1f389;欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克&#x1f379; ✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;重拾MySQL &#x1f379;文章作者技术和水平很有限&#xff0c;如果文中出现错误&am…...

Qt第二周周二作业

代码&#xff1a; widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);~Widget();void paintEvent(…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...