javascript:正则表达式、一个表单验证的例子

 


回到顶部

本文内容:

 

  • 正则表达式
    • 正则表达式的使用方法
    • 正则表达式的特殊匹配字符
    • 正则表达式修饰符
  • 利用正则表达式进行表单验证的例子

 

首发日期:2018-05-13

 

 


回到顶部

正则表达式:

 

正则表达式的使用方法:

  1. 首先创建正则表达式对象: 【正则表达式的字符规则:如果是没有特殊意义的字符,直接写;如果是有特殊意义的,直接写;如果想将特殊意义的字符转成非特殊意义的,前面使用\】
    1. 可以通过RegExp对象创建正则表达式对象: var 变量名=new RegExp("表达式"[,修饰符])image
    2. 也可以使用按照一定的格式(以斜杠( / )开头和结尾)的字符组合来创建正则表达式对象【称为字面量创建法】:var 变量名=/表达式/修饰符image【正则表达式修饰符写在正则表达式结束符/后面,是可选的,定义一些比如匹配忽略大小写等规则】
  2. 其次字符串使用正则表达式来获取匹配结果:
    1. 使用正则对象提供的方法:
      1. re.test(string):符合就返回true,不然返回falseimage
      2. re.exec(string):不符合返回null,找得到就返回符合的字符和开始位置image
    2. 使用字符串对象提供的方法:
      1. search(正则表达式):查找符合正则表达式的字符串,返回结果是字符串开始的位置,如果没有找到任何匹配的子串,则返回 -1image
      2. match(正则表达式):查找符合正则表达式的字符串,返回结果是匹配出的字符串,如果没有找到任何匹配的文本, match() 将返回 nullimage
      3. replace(正则表达式,用来替换的字符串):查找符合正则表达式的字符串,然后使用另一个字符串替换,返回结果是替换后的字符串,如果没有查找成功,返回的是原本的字符串。image
      4. split(正则表达式):查找符合正则表达式的字符串,然后根据它来分割整个字符串。返回结果是多个字符串。image

 

 

正则表达式的特殊匹配字符:

字符意义
\屏蔽使用字符的特殊意义,比如$代表不使用$来匹配,而仅仅把它当作一个普通字符
^代表^后面跟着的字符必须是字符串的开头
$代表$前面的字符必须是字符串的结尾
*匹配*前面的字符0次或多次(贪婪的,多多益善的)
+匹配+前面的字符1次或多次(贪婪的多多益善的)
?匹配?前面的字符0次或1次
.匹配除换行符\n之外的所有字符
\d匹配0~9的所有数字一次
\D匹配非数字的所有字符一次
\s匹配一个空字符,比如换行符、空格、缩进符
\w匹配任何字母、数字以及下划线
\W匹配除数字、字母及下划线外的其他字符
  
[0-9]匹配从 0 至 9 的数字一次
[a-z]匹配从 a 至 z 的字母一次
[几个字母],比如[abcd]匹配[]中的任意一个字母一次(从左到右优先)
[一个范围或几个范围],比如[a-z0-9]匹配[]几个范围中的一个字符一次(从左到右优先)
[^范围]匹配非范围内的字符
  
{n}匹配前面的字符n次
{n,}匹配前面的字符至少n次
{n,m}匹配前面的字符n~m次
  
x|y匹配x或y,(从左到右优先)
  
(一串特殊字符)把一串特殊字符当成一组来匹配

 

正则表达式修饰符

(写在正则表达式结束符/后面,image):

字符意义 
g全局匹配,不是仅仅匹配一处 
i匹配忽略字符大小写 

使用g之后,对于exec可以重复执行来获取结果,对于字符串提供的方法,会一次性返回多个结果:

image

imageimage

 

 

 


回到顶部

利用正则表达式进行表单验证的例子:

 

这是一个简单的例子,仅仅做匹配动作,不做效果,这只是一个小架子,想要增加效果可以自己来增加。

 

准备工作:

一个用来匹配邮箱的正则表达式:/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i

一个用来匹配世界手机号码的正则表达式:/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/

一个用来匹配密码的正则表达式(长度在6~18之间,只能包含字母和数字):/^[a-zA-Z0-9]{6,18}$/

image

获取值:

image

 

 

建立表单,绑定触发函数:

  • action指向一个不存在的网址,如果提交失败,则不会跳转

image

 

如果三个输入框都符合条件,那么返回true,使得sumbit的事件能进行下去,从而进行跳转;如果任意一个不符合条件,那么返回false,从而阻止submit的事件进行

image

 

复制代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>表单验证</title><script>function isVaildInfo(){var emailReg=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;var telReg=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;var pwdReg=/^[a-zA-Z0-9]{6,18}$/;var email=document.getElementById("email").value;var tel=document.getElementById("tel").value;var pwd=document.getElementById("pwd").value;if (emailReg.test(email)&&telReg.test(tel)&&pwdReg.test(pwd)) {return true;}else{return false;}}</script>
</head>
<body><form action="555.html" method="get" ><input id="email" type="text" name="" placeholder="请输入邮箱"><input id="tel" type="text" name=""  placeholder="请输入手机号"><input id="pwd" type="password" name=""  placeholder="请输入密码"><input type="submit" value="确定" id="btn" οnclick="return isVaildInfo()"></form></body>
</html>
复制代码

 


转载于:https://www.cnblogs.com/aliyunpang/p/9032571.html

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

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

相关文章

Spring_01 spring容器、控制反转(IOC)、依赖注入(DI)

目录 1 什么是spring框架 2 spring框架的特点 3 spring容器 3.1 什么是spring容器 3.2 spring容器创建对象的编程步骤 3.4 spring容器创建对象的方式 3.5 bean元素的几个重要属性 4 IOC 4.1 什么是IOC 4.2 什么事DI 4.3 DI的三种方式 1 什么是spring框架 是一个开源的用来简化企…

一个传值的问题”*”与”*”

1/********************************************************* 2* Desc:参数传递&#xff1a;使用引用传递指针和直接传递指针地址的区别 3* Author:charley 4* DateTime:2010-12-7 11:00 02***********************************************************/ 03#include <…

spring boot 扩展之AutoConfigurationImportListener

最近阅读spring boot源码时发现&#xff0c;发现当spring使用ConfigurationClassParser加载使用Configuration注解类后&#xff0c;会使用AutoConfigurationImportSelector对加载的 Configuration注解的类进行一次过滤。当AutoConfigurationImportSelector过滤完成后会自动加载…

《高效程序员的45个习惯》-之一

敏捷开发是当下最流行的开发方法&#xff0c;它采用的是一种以人为核心、迭代、循序渐进的开发思想&#xff0c;值得你关注和学习。 最近我就阅读了一本有关敏捷开发的书籍&#xff0c;《高效程序员的45个习惯》。 它以“举反例”的方式来讲述了敏捷开发中程序员应该运用的…

《CLR via C#》之线程处理——线程基础

《CLR via C#》之线程处理——线程基础 《CLR via C#》之线程处理——线程基础windows为什么要支持线程线程开销CPU发展趋势CLR线程和Windows线程使用专用线程执行异步的计算限制操作线程调度和优先级windows为什么要支持线程 早期的操作系统只有一个执行线程&#xff0c;但同时…

spring boot之从零开始开发自己的网站

概述 首先要感谢两位大神&#xff0c;该项目的想法来源自tale和MyBlog。 做了一些改造&#xff0c;增加了一些功能和一些代码的重构&#xff0c;并且更换了博客主题。 关于项目&#xff0c;对于开发的练手项目&#xff0c;能够工程化&#xff0c;严谨一些。 关于文档&#x…

python day5--正则表达式

#----正则表达式 import re elink <a href"(.*)">(.*)</a> info <a href"http://www.baidu.com">baidu</a> cinfo re.findall(elink,info) print (cinfo) import re print(re.search (r^a,abc\neee)) #预期结果 ^匹配字符开…

WCF系列教程之WCF客户端调用服务

1、创建WCF客户端应用程序需要执行下列步骤 (1)、获取服务终结点的服务协定、绑定以及地址信息 (2)、使用该信息创建WCF客户端 (3)、调用操作 (4)、关闭WCF客户端对象 二、操作实例 1、WCF服务层搭建:新建契约层、服务层、和WCF宿主,添加必须的引用(这里不会的参考本人前面的随…

短信认证方案,用手机短信进行上网认证如何实现?

WFilter NGF的“Web认证”模块&#xff0c;提供了一系列的上网认证解决方案。包括如下认证方式&#xff1a;本地用户名密码认证AD域用户名密码认证企业邮箱用户名密码认证Radius用户名密码认证微信WiFi认证Facebook Wifi认证除此&#xff0c;WFilter NGF还有一个“其他”的选项…

Nginx 之一:编译安装nginx 1.8.1 及配置

转http://www.cnblogs.com/zhang-shijie/p/5294162.html 一&#xff1a;基介绍 官网地址www.nginx.org&#xff0c;nginx是由1994年毕业于俄罗斯国立莫斯科鲍曼科技大学的同学为俄罗斯rambler.ru公司开发的&#xff0c;开发工作最早从2002年开始&#xff0c;第一次公开发布时间…

PI校正环节的程序实现推导过程

PI校正环节在经典控制论中非常有用&#xff0c;特别是对负反馈控制系统&#xff0c;基本上都有PI校正环节。1.下面分别说明比例环节和积分环节的作用&#xff0c;以阶跃信号为例。①比例环节单独作用以上分析说明&#xff0c;若只有比例环节的控制系统&#xff0c;阶跃响应也是…

vs里根据json快速创建对应类的方法

有时候,我们在调用别人接口的时候,服务端返回了一个json格式的字符串,我们要获取json里面的数据的话一般有两种方式: 1.通过正则 2.反序列化成一个对象 第一种方式这里不再多说,主要说一下第二种,(为什么呢&#xff0c;你看到后面 你也会喜欢上第二种) 有人肯定会说, json字符串…

人工智能之基于face_recognition的人脸检测与识别

不久乘高铁出行&#xff0c;看见高铁火车站已经实现了“刷脸进站”&#xff0c;而且效率很高&#xff0c;很感兴趣&#xff0c;今天抽时间研究一下&#xff0c;其实没那么复杂。 我基本上是基于https://github.com/ageitgey/face_recognition上的资料和源码做一些尝试和试验。 …

iOS 升级https的方案选择

我的选择是将UIWebView统一替换为WKWebView WKWebView AFN SDWebImage https的支持之前的博客都有涉及转载于:https://www.cnblogs.com/Jusive/p/6867531.html

Python3抓取糗百、不得姐

​点击关注 异步图书&#xff0c;置顶公众号 每天与你分享 IT好书 技术干货 职场知识 重要提示1:本文所列程序均基于Python3.6,低于Python3.6的Python版本可能无法运行.重要提示2:因所抓取的网站可能随时更改展示内容,因此程序也需及时跟进.重要提示3:本程序仅供学习,不能拿去做…

Oracle优化-表设计

前言  绝大多数的Oracle数据库性能问题都是由于数据库设计不合理造成的&#xff0c;只有少部分问题根植于Database Buffer、Share Pool、Redo Log Buffer等内存模块配置不合理&#xff0c;I/O争用&#xff0c;CPU争用等DBA职责范围上。所以除非是面对一个业已完成不可变更的系…

Win10远程桌面 出现 身份验证错误,要求的函数不受支持,这可能是由于CredSSP加密Oracle修正 解决方法...

升级至win10 最新版本10.0.17134&#xff0c;远程桌面连接Window Server时报错信息如下&#xff1a; 出现身份验证错误&#xff0c;要求的函数不正确&#xff0c;这可能是由于CredSSP加密Oracle修正。 解决方法&#xff1a; 运行 gpedit.msc 本地组策略&#xff1a; 计算机配置…

Rsyslog 日志相关内容

[rootserver vusers_home]# rpm -ql rsyslog|more ###.so结尾为模块&#xff0c;模块有分im为输入模块&#xff0c;om 为输出模块/etc/logrotate.d/syslog/etc/pki/rsyslog/etc/rc.d/init.d/rsyslog/etc/rsyslog.conf/etc/rsyslog.d/etc/sysconfig/rsyslog/lib64/rsyslog…

MFC导出对话框类DLL的实现

1.新建基于对话框的应用程序 2.新建MFC DLL工程 3.选择MFC DLL 4.选择扩展Dll选项&#xff08;重要&#xff01;&#xff01;&#xff01;&#xff09; 5.为Dll工程添加一个MFC类&#xff0c;基类为CDialogEx 6.Dll新建的MFC 类中添加resource.h防止编译出错…

身于“乱世”,我们程序员应该如何打算?

今天看了这篇文章&#xff0c; 发现自己也有点生处乱世&#xff0c;不平之感&#xff0c;但是文章的朴实却让我有了一个良好的反省&#xff0c;特此转载 分类&#xff1a; 项目管理 2011-09-04 00:58 770人阅读 评论(12) 收藏 举报 不仅要低头拉车&#xff0c;还要抬头看路。…