HTML(六)——表单验证、正则表达式、事件

JavaScript事件监听、常见事件及表单验证 JavaScript事件监听及常见事件示例,及简单表单验证示例 阅读详情

1、表单验证<form></form>

(1).非空验证(去空格)

(2).对比验证(跟一个值对比)

(3).范围验证(根据一个范围进行判断)

(4).固定格式验证:电话号码,身份证号,邮箱,信用卡号等的验证;需要用到正则表达式来进行验证。

(5).其它验证

2、正则表达式

用符号来描述书写规则:/ 中间写正则表达式 /

^ :匹配开头,$:匹配结尾 ; /^ve/以ve开头的 /ve$/以ve结尾

\d:一个任意的数字

\w:一个任意的数字或字母

\s:任意字符串

{n}:把左边的表达式重复n遍

{m,n}:把左边的表达式重复至少m遍,至多n遍
    {m, }:把左边的表达式重复至少m遍,,至多不限

+:左边的表达式,至少出现一次,至多不限,相当于{1,}

*:左边的表达式,至少出现0次,至多不限,相当于{0,}

?:左边的表达式,至少出现0次,至多出现1次,相当于{0,1}

[a,b,c]:只能取方括号中内容之一

[a-z]或[1-9]:在范围中取其一

|:代表或者; ():优先级; \:转义--“\( \)”这个才是要出现的小括号,需要转义

3、事件

事件有三要素:事件源、事件数据、事件处理程序

可以加return false;是阻止默认操作

onclick: 鼠标单击触发

ondblclick: 双击触发

onmouseover: 鼠标移动上面触发

onmouseout: 鼠标离开时触发

onmousemove: 鼠标在上面移动时触发

onchange: 只要内容改变触发

onblur: 失去焦点时触发

onfocus: 获得焦点时触发

onkeydown: 按键按下的时候触发

onkeyup:按键抬起来的时候触发

onkeypress:事件在用户按下并放开任何字母数字键时发生。但是系统按钮(例如:箭头键、功能键)无法得到识别。

例子:根据正则表达式验证邮箱

   function checkemail()
   {
    var v4 = trim(u4.value);
    var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    if(v4.match(reg) != null)
    {
        imgs4.setAttribute("src","imges/1.png");
        return true;
    }
    else
    {
        imgs4.setAttribute("src","imges/2.png");
        return false;
    }
 }

正则表达式补充:

建立正则表达式的方法:

var patten= new RegExp(/^[0-9]{17}[0-9|X]$/);/*
RegExp()括号里面的式子需要自己定义:
1、[]里面只有一个元素
2、()里面可以写一个单词或者式子
3、{}里面表示数量 4、^:以某个元素开头,写在元素前面 5、$:以某个元素结束,写在元素后面*/
 例:

1、正则表达式验证身份证:

 身份证:<input type="text" id="1"  />
 /*javascript部分*/
  var a= document.getElementById("1").value;
  var patten= new RegExp(/^[0-9]{17}[0-9|X]$/);
  if(patten.test(a))
  {
      alert("输入正确");
  }
  else
  {
      alert("输入错误");
  }
 2、正则表达式验证邮箱:
 邮箱:<input type="text" id="2" /><input type="button" value="提交" onclick="mail()" />
 
function mail()
{
    var patten2= new RegExp(/^[0-9|A-z|_]{1,17}[@][0-9|A-z]{1,3}.(com)$/)
    var mail = document.getElementById("2").value;
    if(patten2.test(mail))
      {
          alert("输入正确");
      }
    else
      {
          alert("输入错误");
      }
}
 

 常用正则表达式:

    匹配国内电话号码:d{3}-d{8}|d{4}-d{7} 
    评注:匹配形式如 0511-4405222 或 021-87888822 
   

    匹配腾讯QQ号:[1-9][0-9]{4,} 
    评注:腾讯QQ号从10000开始 
   

    匹配中国邮政编码:[1-9]d{5}(?!d) 
    评注:中国邮政编码为6位数字 
   

    匹配身份证:d{15}|d{18} 
    评注:中国的身份证为15位或18位 
   

    匹配ip地址:d+.d+.d+.d+ 
    评注:提取ip地址时有用 
   

    匹配特定数字: 
    ^[1-9]d*$      //匹配正整数 
    ^-[1-9]d*$    //匹配负整数 
    ^-?[1-9]d*$     //匹配整数 
    ^[1-9]d*|0$   //匹配非负整数(正整数 + 0) 
    ^-[1-9]d*|0$     //匹配非正整数(负整数 + 0) 
    ^[1-9]d*.d*|0.d*[1-9]d*$     //匹配正浮点数 
    ^-([1-9]d*.d*|0.d*[1-9]d*)$   //匹配负浮点数 
    ^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$   //匹配浮点数 
    ^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$     //匹配非负浮点数(正浮点数 + 0) 
    ^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$    //匹配非正浮点数(负浮点数 + 0) 
    评注:处理大量数据时有用,具体应用时注意修正 
   

    匹配特定字符串: 
    ^[A-Za-z]+$    //匹配由26个英文字母组成的字符串 
    ^[A-Z]+$    //匹配由26个英文字母的大写组成的字符串 
    ^[a-z]+$    //匹配由26个英文字母的小写组成的字符串 
    ^[A-Za-z0-9]+$    //匹配由数字和26个英文字母组成的字符串 
    ^w+$    //匹配由数字、26个英文字母或者下划线组成的字符串 
   

    在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下: 
    只能输入数字:“^[0-9]*$” 
    只能输入n位的数字:“^d{n}$” 
    只能输入至少n位数字:“^d{n,}$” 
    只能输入m-n位的数字:“^d{m,n}$” 
    只能输入零和非零开头的数字:“^(0|[1-9][0-9]*)$” 
    只能输入有两位小数的正实数:“^[0-9]+(.[0-9]{2})?$” 
    只能输入有1-3位小数的正实数:“^[0-9]+(.[0-9]{1,3})?$” 
    只能输入非零的正整数:“^+?[1-9][0-9]*$” 
    只能输入非零的负整数:“^-[1-9][0-9]*$” 
    只能输入长度为3的字符:“^.{3}$” 
    只能输入由26个英文字母组成的字符串:“^[A-Za-z]+$” 
    只能输入由26个大写英文字母组成的字符串:“^[A-Z]+$” 
    只能输入由26个小写英文字母组成的字符串:“^[a-z]+$” 
    只能输入由数字和26个英文字母组成的字符串:“^[A-Za-z0-9]+$” 
    只能输入由数字、26个英文字母或者下划线组成的字符串:“^w+$” 
    验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为:以字母开头,长度在6-18之间, 
    只能包含字符、数字和下划线。 
    验证是否含有^%&'',;=?$"等字符:“[^%&'',;=?$x22]+” 
    只能输入汉字:“^[u4e00-u9fa5],{0,}$” 
    验证Email地址:“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$” 
    验证InternetURL:“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$” 
    验证电话号码:“^((d{3,4})|d{3,4}-)?d{7,8}$” 
    正确格式为:“XXXX-XXXXXXX”,“XXXX-XXXXXXXX”,“XXX-XXXXXXX”, 
    “XXX-XXXXXXXX”,“XXXXXXX”,“XXXXXXXX”。 
    验证身份证号(15位或18位数字):“^d{15}|d{}18$” 
    验证一年的12个月:“^(0?[1-9]|1[0-2])$”正确格式为:“01”-“09”和“1”“12” 
    验证一个月的31天:“^((0?[1-9])|((1|2)[0-9])|30|31)$” 
    正确格式为:“01”“09”和“1”“31”。 
    匹配中文字符的正则表达式: [u4e00-u9fa5] 
    匹配双字节字符(包括汉字在内):[^x00-xff] 
    匹配空行的正则表达式:n[s| ]*r 
    匹配HTML标记的正则表达式:/<(.*)>.*|<(.*) />/ 
    匹配首尾空格的正则表达式:(^s*)|(s*$) 
    匹配Email地址的正则表达式:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)* 
    匹配网址URL的正则表达式:http://([w-]+.)+[w-]+(/[w- ./?%&=]*)? 

使用 JavaScript 和 HTML5 实现强大的表单验证 表单验证是 Web 开发中不可或缺的一部分,它确保用户输入的数据符合预期格式和要求。通过客户端验证,我们可以提高用户体验,减少不必要的服务器请求。然而,客户端验证并不能替代服务器端验证,因为客户端验证可以被绕过。本文将介绍如何使用 JavaScript 和 HTML5 实现强大的表单验证。 阅读详情

相关推荐

SoC芯片时钟树优化实战:如何用分段CTS解决DDRPHY与Memory Controller的时序难题

本文深入探讨了SoC芯片时钟树优化中的分段CTS技术,重点解决DDRPHY与Memory Controller之间的时序难题。通过分析多域时钟架构的复杂性,提出三级分段CTS策略,并结合28nm移动SoC实战案例,展示如何通过Guide Buffer插入和本地段重构实现72%的跨域偏差改善。文章还涵盖5nm以下工艺的线阻变异、热梯度效应等特殊考量,为数字IC设计提供时钟树综合的高阶解决方案。

kkk56的博客 906

HTML正则表达式:表单验证

HTML的正则表达式: 元字符: \d : 0-9之间的任意一个数字 \d只占一个位置 \w : 数字,字母 ,下划线 0-9 a-z A-Z _ \s : 空格或者空白等 \D : 除了\d \W : 除了\w \S : 除了\s . : 除了\n之外的任意一个字符 \ : 转义字符 | : 或者 () : 分组 \n : 匹配换行符 \b : 匹配边界 字符串的开头和结尾 空格的两边都是边界 => 不占用字符串位数 ^ : 限定开始位置 => 本身不占位置 $ : 限定结束位置 =>

DollyCat的博客 1680

态路小课堂丨三款800G光模块方案介绍—SR8/DR8/2FR4

800G QSFP-DD 2FR4光模块使用CWDM4波长(1271/1291/1311/1331nm),单通道速率为100G,通过MUX减小光纤的数目,其光学接口采用CS接口或双芯LC接口。

poposu的博客 2390

html中验证正则表达式,HTML(6)格式的验证,正则表达式,事件

form>(1). 非空验证(无空格)(2). 比较验证(与值比较)(3). 范围验证(基于范围的判断)(4). 固定格式验证: 验证电话号码,ID号,邮箱,号等;需要使用正则表达式进行验证.(5). 其他验证2. 正则表达式使用符号描述书写规则: /在中间写正则表达式/^: 开头匹配,$: 结尾匹配; / ^ ve / / ve $ /以ve / ve开头ve\ d: 任意数字\ w: 任...

weixin_31524201的博客 1211

react-window 大数据列表和表格数据渲染组件之虚拟滚动

ReactWindow是一个高性能的React虚拟滚动组件库,专门用于高效渲染大型列表和表格数据。它通过“窗口化”技术,仅渲染用户可见区域的内容,大幅提升性能并减少内存消耗。主要特点包括:支持固定/可变大小列表项、多种布局类型(垂直/水平/网格)、轻量级设计(不足5KB)以及平滑的滚动体验。相比传统渲染方式,它能轻松处理成千上万条数据,并提供自动滚动、自适应容器大小等高级功能。与同类库相比,ReactWindow具有更简洁的API和更优的性能表现,是处理大数据量渲染场景的理想选择。

前端开发-前端技术分享 1137

数据库系统概论课后习题答案(第五版 王珊、萨师煊)

第1章 绪论 1 .试述数据、数据库、数据库系统、数据库管理系统的概念。 答: ( l )数据( Data ) :描述事物的符号记录称为数据。数据的种类有数字、文字、图形、图像、声音、正文等。数据与其语义是不可分的。解析在现代计算机系统中数据的概念是广义的。早期的计算机系统主要用于科学计算,处理的数据是整数、实数、浮点数等传统数学中的数据。现代计算机能存储和处理的对象十分广泛,表

早知晓的博客 11万+

html 数据验证

$("#designName").validate("blur", "课题名称", { required: true, maxLength: { maxLength: 16, errorMessage: "请输入4-16位字符" },//最大长度 minLength: { minLength: 4, errorMessage:

小小程序猿 1310

电源设计之路-Buck电源环路设计(Type IIIA&Type IIIB)

在对Buck 环路补偿Type II拓扑进行仿真测试后,对瞬态波形以及伯德图已经有感官上的认知;然后再进一步对Type IIIA & IIIB进一步的学习;进一步了解Cout电容量和ESR对环路补偿的影响;认识到一个电源,不是参考Datasheet上的参数进行选值就行;更需要根据实际情况,功率电感值、输出电容值以及不同电容会有不一样的ESR,这些都会对环路参数产生一定的影响

2503_92839756的博客 759

身份证的验证

身份证的验证 本次任务完成时间:2019年07月28日 开发工具与关键技术:Visual Studio 2015 && 身份证的验证 展示效果:身份证的验证 身份证是国家法定的证明公民个人身份的有效证件。而每个人身份证号都是18位,这些数字的排列并不是随机的,而是各有各的含义。前六位数字分别代表省市县等政府代码,第七到第十四位是持证人的出生年月日,第十五与十六位代表户口所在地的...

weixin_44542781的博客 554

On the convergence of FedAvg on non-iid data

On the convergence of FedAvg on non-iid data

Lyn_S的博客 7082

《唤醒你的AI同事:WorkBuddy从零上手》000:介绍及目录

《唤醒你的AI同事:WorkBuddy从零上手》全书导览与总目录:000–043 共 44 篇,覆盖从环境搭建、对话基础到资料库、行业助手与多模态生成的入门实战。含完整篇目速查与编号直达,建议关注收藏。

LuckyHanMo的博客 605

JS进行简单的表单验证(附详细代码)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录一、JS表单验证是什么?一、JS表单验证需求分析?三、表单验证所需事件设置from表单及其文本框,代码如下(示例):2.设置触发事件函数JS代码3.结果展示总结 提示:以下是本篇文章正文内容,下面案例可供参考 一、JS表单验证是什么? 表单验证是javascript中的高级选项之一。JavaScript 可用来在数du据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 一、JS表单验证需求分析? 表单

qq_45228201的博客 2万+

图像处理入门007:图像处理中的数学基础:线性代数与卷积

一种:把 OpenCV 当黑盒,调用,效果不对就乱调参数;另一种:理解每个像素是怎么被周围邻域"加权平均"的,理解核翻转、边界填充、stride 的含义。前者能干活,后者能解难题。一旦遇到自定义核(比如 ISP 上的锐化)、深度学习反向传播、医学图像重建,你就必须把卷积、相关、矩阵乘法这些基本功捡回来。线性代数三件套:向量点积、矩阵乘法、线性变换;2D 卷积的数学定义:核翻转、滑动窗口、边界填充。并手写一个,验证它与和的结果完全一致(误差 < 1e-9)。f∗gn∑m−∞∞f。

专注:太空算力、AI infra、异构调度、大模型成本工程 387

HTML进行表单验证

文章目录使用JavaScript进行表单验证使用html5自带的特性进行验证: 使用JavaScript进行表单验证 表单样式: <form action="" name="form_login"> <input placeholder="账号" type="text" name="username" class="form_input"> <br> <input placeholder="密码

wr456wr的博客 5849

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

用正则表达式实现表单验证提交

用正则表达式实现表单验证提交 前端基础,正好做个练手,记录一下 用到了HTML5的标签和JS的基本逻辑还有正则表达式 这么屑的代码还有人看?(滑稽) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head>

风吟Pro的博客 2995

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

HTML中onblur事件的使用

在HTML中,onblur事件是指当元素失去焦点时触发的事件。失去焦点意味着用户从当前输入框或其他可输入元素转移到另一个元素上。例如,当用户在输入框中输入完内容后,点击页面的其他地方或按下Tab键切换焦点时,就会触发onblur事件。本文深入探讨了HTML中onblur事件的概念、基本语法及其在实际开发中的应用场景。通过使用onblur事件,开发者可以实现表单验证、用户交互优化和自动保存等功能,从而提升页面的交互性和用户体验。

技术研究中心 2379

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

HTML——表单验证、正则表达式、事件

1、表单验证&lt;form&gt;&lt;/form&gt; (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码,身份证号,邮箱,信用卡号等的验证;需要用到正则表达式来进行验证。 (5).其它验证 2、正则表达式 用符号来描述书写规则: / 中间写正则表达式 / ^ :匹配开头,$:匹配结尾 ; ...

qq_34331147的博客 260

JS学习——表单验证

JS(JavaScript),最先听到的时候以为是和java一样,必须要学的,但是后来接触到后,才发现是不一样的,JS一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果(来源百度百科)。 本文主要是讲将JS如何嵌入HTML中实现表单的验证,会简单介绍下HTML、CSS、JS的内容,以及正则表达式,由于笔者还是个初学者,所以不会很深入,很多地方也是有点模糊不清,不对之处,还望多多指教,觉得不错还请点个赞! 互联网的三大基石 URL(

weixin_51963604的博客 4357

使用正则表达式实现简单的表单验证

正则 - 正则表达式,又名 “规则表达式” - 是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。 - 正则表达式通常用来检索、替换那些符合某个规则的文本。 正则表达式里面的符号 . : 匹配非换行的任意字符 \ : 转译符号,把有意义的符号转换成没有意义的字符,把没有意义的字符转换成...

weixin_44411850的博客 4979

html表单验证方法,简述HTML交互式表单验证方法

在 HTML 中创建表单总是有点复杂。你首先得将 HTML 标记编写正确,然后需要确保每一个表单项在提交之前都有一个可用的值,最后还需要在有问题时用提醒来告知用户。还好 HTML5 引入了一些新的特性,让这件事情变得轻松了许多。特别是对表单控件进行了扩展来支持约束,从而无需使用 JavaScript, 就可以让浏览器在客户端对表单内容进行验证。WebKit 已经进行了部分支持。在表单控件上使用属性...

weixin_39721009的博客 2934

JavaScript、Html5——表单验证相关

前端表单验证相关

Corn___的博客 2488

HTML5 表单验证的oninvalid事件

定制校验规则 但是浏览器会显示通用的错误报告 好在可以用JavaScript添加自己定制的校验消息,只要把它加到oninvalid监听器上就行了 HTML DOM oninvalid事件(input元素内的值为无效值时触发的事件) 提交的input元素的值为无效值时,触发oninvalid事件。 例如:input元素设置了required属性,但是提交时该处为空就会触发o

99的博客 1万+

HTML---表单验证

前端中的表单验证是在用户提交表单之前,对用户输入的数据进行合法性检查的过程。这种验证的目的是确保用户输入的数据符合预期的要求,从而减少错误和无效的数据提交,提高数据的质量和准确性。输入类型的验证:检查用户输入的数据是否符合预期的输入类型,如文本、数字、邮箱、密码等。必填字段的验证:确保用户必须填写某些字段,这些字段通常是表单中的关键信息。日期和时间范围的验证:检查用户输入的日期或时间是否在允许的范围内。步长的验证:对于某些需要递增或递减的输入字段,如价格、评分等,验证其步长是否符合要求。

zhoutong2323的博客 2335

JavaScript表单验证

JavaScript表单验证是确保Web应用程序数据完整性和安全性的关键步骤。通过掌握常见的验证方法、灵活应用正则表达式以及关注用户体验,我们可以构建出既强大又易于使用的表单验证系统。随着Web技术的不断发展,我们还可以结合HTML5的内置验证功能、CSS样式以及第三方验证库来进一步提升验证效果和用户体验。虽然前端验证对于提升用户体验至关重要,但它并不能替代后端验证。前端验证的主要目的是提供即时反馈并减少不必要的服务器请求,而后端验证则是确保数据完整性和安全性的最后一道防线。

Python老吕的博客 1441
上一篇: String SringBuffer StringBuilder区别
下一篇: 常用正则表达式大全!(例如:匹配中文、匹配html)
ole_triangle_java
博客等级 码龄10年 82粉丝 83原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值