关于html以及js相关格式验证的记录

 验证的常见方式

我们在写前端的时候或多或少的会遇到一些验证格式问题,通常我们有三种解决办法。

  • 第一种就是在输入完成后在输入框附近验证给出提示
  • 第二种就是在输入完成后在提交的时候排着验证提示
  • 第三张就是限制输入

前面两种我们都是非常的熟悉以及想到的,但是我们有时候想要的反而是第三种,因为这样可以避免非法的输入。第三张限制输入不外乎就是实现输入的实时监听,然后使用正则表达式来进行对输入的值验证,

验证通过就保留,验证不通过就删除掉。当然也并非一定这样,有些也是可以实时监听后做提示的。看个人意愿。

主要是实现实时监听值事件

一般我们实现实时监听事件可以是onkeyup,oninput和onpropertychange。

 onkeyup

事件介绍:onkeyup事件是在输的时候在键盘松开的时候进行触发验证。

示例代码:

onkeyup="value=value.replace(/[^\d|\.]/g,'')"

        

 oninput

事件介绍:oninput事件在用户常识输入时触发,该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触。

示例代码:

oninput="var ary = this.value.match(/(\d (\.\d{0,2})?)/);this.value=ary==null?'':ary[0];"

       

onpropertychange

事件介绍:onpropertychange事件可以说是ie浏览器的专属了,不用考虑是否失去焦点,不管js操作还是键盘鼠标手动操作,只要HTML元素属性发生改变即可立即捕获到:

示例代码:

onpropertychange="var ary = this.value.match(/(\d (\.\d{0,2})?)/);this.value=ary==null?'':ary[0];"

 注:该事件为ie专属,反正我在使用中是你要是ie9以上就不要使用他有时候会不好使,这样你可以使用oninput,能不用最好别用。

补充方法说明:

  • match: match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。类似于indexOf() 和 lastIndexOf(),但是他返回的是值不是位置。什么意思哪,通俗的讲就是在给定的字符串内找到和表达式匹配的值例如 math(“34”),然后我要匹配的字符串是:143474534634。然后通过匹配得到的就是一个数组:【“34”,“34”,“34”】,分别是字符串(143474534634)中的位置2和3,7和8,10和11.就是返回字符串中所有匹配的值然后返回给你。就是这个意思,当然要返回多个匹配还是要在正则表达式后面加g标志。
  • replace(regexp/substr,replacement):replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。这个好理解,就是替换调验证不通过的字符串。替换内容为第二个参数。

 平时记录收藏的正则表达式

 验证中文,数字,英文:/^[a-zA-Z0-9\u4E00-\u9FA5] $/

 验证只运行输入字母或者数字:/^[0-9a-zA-Z] $/

 验证数字:/^[ |-]{0,1}(\d )$|^[ |-]{0,1}(\d \.\d )$/

 验证邮政编码:/^[1-9]\d{5}$/i

 验证年龄:/^(?:[1-9][0-9]?|1[01][0-9]|120)$/i

只能输入正整数数字:/[^\d|\.]/g

只能输入包含两位小数的正整数数字:/(\d (\.\d{0,2})?)/

验证数字包含正负小数:/[^\ |\-|\d|\.]/g

验证不可为空:/\s /g

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

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

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

相关文章

mysql重做日志_MySQL-重做日志 redo log -原理

【redo log buffer】【redo log file】-原理目录:1.重做日志写入过程图2.相关知识点汇总图3.redo_log_buffer 原理4.redo_log_file 原理1. 重做日志写入过程:2. 相关知识点汇总:3. redo log buffer 原理重做日志缓冲(redo log buffer)是Innod…

Java 8 Friday:使用Streams API时的10个细微错误

在Data Geekery ,我们喜欢Java。 而且,由于我们真的很喜欢jOOQ的流畅的API和查询DSL ,我们对Java 8将为我们的生态系统带来什么感到非常兴奋。 Java 8星期五 每个星期五,我们都会向您展示一些不错的教程风格的Java 8新功能&#…

孤荷凌寒自学python第六十八天学习并实践beautifulsoup模块1

孤荷凌寒自学python第六十八天学习并实践beautifulsoup模块1 (完整学习过程屏幕记录视频地址在文末) 感觉用requests获取到网页的html源代码后,更重要的工作其实是分析得到的内容,因此这时候大名鼎鼎的BeautifulSoup模块就可以大展…

如何将h5网页改成微信网页

1、如何将h5网页改成微信网页 1、设置安全域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 备注&#xff1a;登录后可在“开发者中心”查看对应的接口权限。 2、引用一个js文件 在微信开发者里面 js sdk里面 <sc…

AspNetForums中基于角色的权限控制

AspNetForums中基于角色的权限控制 http://blog.joycode.com/dotey/archive/2005/02/24/44791.aspxasp.net页面如何控制页面依据不同用户权限有不可见、可见、编辑 三种操作权限 http://community.csdn.net/Expert/topic/3436/3436974.xml?temp.0139429做过权限管理和想做权限…

c#a服务器上传文件b服务器,C#_c#批量上传图片到服务器示例分享,客户端代码: 复制代码 代码 - phpStudy...

c#批量上传图片到服务器示例分享客户端代码&#xff1a;/// /// 批量上传图片/// /// 服务器路径/// 图片文件夹路径/// 图片名称public void UpLoadFile(string srcurl, string imagesPath, List files){int count 1;foreach (string imageName in files){string name image…

mysql集群重启offline_mysql集群搭建问题及解决方法集锦

在上一篇博客中写了如何搭建mysql集群&#xff0c;之所以遇到这些问题&#xff0c;是因为刚开始弄mysql集群的时候不熟悉&#xff0c;正是因为这些问题&#xff0c;让我对mysql集群的了解渐渐深入&#xff0c;下面介绍在搭建mysql集群的时候我遇到了一些问题。1、mysql集群安装…

C - CJSON

cJSON API说明cJSON_Version()获得cJSON的版本cJSON_InitHooks();初始化cJSON_Hooks结构体cJSON_Parse();将字符串解析成cJSON结构体cJSON_ParseWithOpts()使用一些配置解析字符串cJSON_Print()将cJSON结构体转换成格式化的字符串cJSON_PrintUnformatted()将cJSON结构体转换成…

Java SE 8新功能导览:Java开发世界中的重大变化

与其他专业团队成员一样&#xff0c;我是采用OpenJDK的成员之一&#xff0c;但是从最近8个月开始加入&#xff0c;我们经历了Java SE 8 开发&#xff0c;编译&#xff0c;编码&#xff0c;讨论等各个阶段&#xff0c;直到将其付诸实践为止。 。 它于2014年3月18日发布&#xff…

蘑菇街一电话面试1

说说你常用的技术栈&#xff1f; ajax解决跨域问题的方法&#xff1f;jsonp的主要实现原理&#xff1f; 点击页面某个按钮&#xff0c;将原本一行显示的内容分成两行&#xff0c;如何实现&#xff1f; 怎样实现段首缩进&#xff1f;值是什么&#xff1f; 如何实现文本限制显示两…

从Java官网下载最新的文档(包含API文档)

Java学习资料(适合c转java的同学)&#xff1a; Java中带包&#xff08;创建及引用&#xff09;的类的编译 - 小明快点跑 JAVA 对象引用&#xff0c;以及对象赋值 - 飘来荡去。 Java官网下载页&#xff1a;https://www.oracle.com/technetwork/java/javase/downloads/index.html…

12121

sdfsfsfdsf转载于:https://www.cnblogs.com/zhongkeruanjian/archive/2006/06/01/414875.html

html option ajax,Ajax实现简单下拉选项效果【推荐】

基本都是固定步骤&#xff01;主要在JAVASCRIPT和PHP中的操作1、HTML代码里就只有两个SELECT标签如下&#xff1a;请选择请选择2、Javascript中进行创建选项和执行AJAX异步请求步骤如下var xhr getXhr();// 第一次执行Ajax异步请求 - 省份window.onload function(){xhr.open(…

svn安装教程 mysql_CentOS6.4 下安装SVN的详细教程(超详细)

1、检查系统是否已经安装如果安装就卸载rpm -qa subversionyum remove subversion2、安装yum install subversion3、建立SVN库mkdir -p /home/svn/repossvnadmin create /home/svn/repos执行上面的命令后&#xff0c;自动建立repositories库&#xff0c;查看/home/svn/repos 文…

babel安装

注意&#xff1a;如果没有装node.js&#xff0c;先去装一个&#xff01;&#xff01;安装node.js时会默认安装npm。 步骤&#xff1a; 1、新建一个文件夹&#xff0c;装接下来的所有东西。我新建了一个learn-es6文件夹 2、在learn-es6项目文件下创建根目录文件&#xff1a; …

针对新手的Java EE7和Maven项目–第1部分–简单的Maven项目结构–父pom

为什么呢 很多时候&#xff0c;我在日常工作中试图解决一些基本或复杂的Maven / Java EE项目结构问题。 为了提供解决方案&#xff0c;我经常最终会尝试项目结构&#xff0c;测试我在不同应用程序服务器上的部署并细化我的配置。 Maven对于新来者来说可能会有陡峭的学习曲线&a…

sql server 学习记录

sql-server 基础&#xff1a; 1、查看sqlserver的数据表 SELECT name,crdate FROM SysObjects Where XTypeU order by crdate desc 查看数据表的字段 SELECT A.name AS table_name,B.name AS column_name,C.value AS column_description FROM sys.tables A INNER JOIN sys.col…

简单对象访问协议

简单对象访问协议 2000年7月11日 SOAP 是“简单对象访问协议”&#xff08;Simple Object Access Protocol&#xff09;的简称&#xff0c;这种方式能够使用现有的 Internet 体系结构&#xff0c;创建运行在 Internet 上的、分布广泛的复杂计算环境。SOAP 所涉及的应用程序以非…

mysql 子字符串函数_MySQL 内置字符串函数

MySQL内置函数concat()用于连接字段LTRIM(),RTRIM(),TRIM()分别用于去除左边空格,右边空格,以及左右空格都去除NOW()放回当前的日期和时间UPPER() 和LOWER()upper():转换为年夜写输出; lower() 转换为小写输出LEFT()返回串左边的字符RIGHT()返回串右边的字符,办法参考LEFT()LOC…

服务器建网站www无法访问,IIS6服务器搭建网站无法访问解决方案总结_DOIT.com.cn...

很多朋友在用IIS6架网站的时候遇到不少问题&#xff0c;而这些问题有些在过去的IIS5里面就遇到过&#xff0c;有些是新出来的&#xff0c;俺忙活了一下午&#xff0c;做了很多次试验&#xff0c;结合以前的排错经验&#xff0c;做出了这个总结&#xff0c;希望能给大家帮上忙。…