本文内容：

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

首发日期：2018-05-13

正则表达式：

正则表达式的使用方法：

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

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

字符 意义
\ 屏蔽使用字符的特殊意义，比如\$代表不使用$来匹配，而仅仅把它当作一个普通字符
^ 代表^后面跟着的字符必须是字符串的开头
$ 代表$前面的字符必须是字符串的结尾
* 匹配*前面的字符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，（从左到右优先)
   
(一串特殊字符) 把一串特殊字符当成一组来匹配

正则表达式修饰符

(写在正则表达式结束符/后面，)：

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

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

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

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

准备工作：

一个用来匹配邮箱的正则表达式：/^([\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}$/

获取值：

建立表单，绑定触发函数：

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

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

<!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" onclick="return isVaildInfo()">

    </form>

</body>

</html>

javascript:正则表达式、一个表单验证的例子的更多相关文章

  1. jquery做一个表单验证

    正则表达式的写法: var re=new RegExp('规则', '可选参数');var re=/规则/参数;(这个最常用) 正则表达式的规则 和其他语言的正则表达式规则一样,可以参考我的另一边博文 ...

  2. 使用 WTForms 进行表单验证的例子

    #使用 WTForms 进行表单验证的例子 from wtforms import Form from wtforms import BooleanField from wtforms import ...

  3. JavaScript：基础表单验证

    在用户填写表单的过程之中,往往需要编写一堆的验证操作,这样就可以保证提交的数据时正确的.那么下面就模拟表单验证的处理操作完成. 如果要想进行验证,首先针对于输入的数据来进行一个验证处理. 1.定义一个 ...

  4. React实例----一个表单验证比较复杂的页面

    前言:这阵子看了两本CSS的书~对于CSS层叠,定位,继承等机制基本上都了解了,就想着自己写几个页面~正好自己就写了写CSS样式,然后用React渲染出来~ 闲话不多说,简单说一说这个页面,希望能对大 ...

  5. JavaScript—— 案例：表单验证

    QQ号:<input type="text" id="txtQQ"><span></span><br> 邮箱:& ...

  6. javascript表单验证的例子

    function checkUsername(){ //对username的内容进行验证. //要求:首字符是字母或下划线,其他由下划线字母数字组成,共4-20位 var inputOb=docume ...

  7. 【HTML相关】iframe+javascript实现一个表单提交后多个处理文件按序处理

    最近在弄一个网页的问题,总结如下. [问题描述] 页面中包括以下几个部分:1)表单form,供用户输入图片文件:2)iframe1,显示a.php文件的内容,a.php接收客户端图片并保存,后台程序处 ...

  8. JavaScript -- 正则表达式 检验表单提交的内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. javascript简单的表单验证

    <html> <head> <title>用户登录</title> <script language="javascript" ...

随机推荐

  1. C# 结合 using 语句块的三种实用方法

    一.简介 阅读 Abp 源码的过程中,自己也学习到了一些之前没有接触过的知识.在这里,我在这儿针对研究学习 Abp 框架中,遇到的一些值得分享的知识写几篇文章.如果有什么疑问或者问题,欢迎大家评论指正 ...

  2. CAS单点登陆/oAuth2授权登陆

    单点登陆 CAS是一个单点登录框架,即Central Authentication Service(中心认证服务) ,开始是由耶鲁大学的一个组织开发,后来归到apereo去管,github地址:htt ...

  3. Java 容器源码分析之 Deque 与 ArrayDeque

    Queue 也是 Java 集合框架中定义的一种接口,直接继承自 Collection 接口.除了基本的 Collection 接口规定测操作外,Queue 接口还定义一组针对队列的特殊操作.通常来说 ...

  4. mysql字符串查找(统计客源)

    如客源状态为1:2:3:5:6:9,其中6代表成交状态 如果要统计查询出有6这个状态的客源,可以用函数LOCATE(字符,搜索的字符串)来, 示例:统计每个分组下全部客源数total,成交客源数dea ...

  5. python 闯关之路四（下）（并发编程与数据库编程）

    并发编程重点: 并发编程:线程.进程.队列.IO多路模型 操作系统工作原理介绍.线程.进程演化史.特点.区别.互斥锁.信号. 事件.join.GIL.进程间通信.管道.队列. 生产者消息者模型.异步模 ...

  6. shiro源码篇 - shiro的session创建，你值得拥有

    前言 开心一刻 开学了,表弟和同学因为打架,老师让他回去叫家长.表弟硬气的说:不用,我打得过他.老师板着脸对他说:和你打架的那位同学已经回去叫家长了.表弟犹豫了一会依然硬气的说:可以,两个我也打得过. ...

  7. Perl处理数据(二)：tr和y///

    tr和y///是等价的.用来实现一一映射,但也有额外的功能,就像Linux下的tr命令一样. 用法: tr/SEARCH/REPLACEMENT/cdsr y/SEARCH/REPLACEMENT/c ...

  8. 翻译：CREATE TRIGGER语句（已提交到MariaDB官方手册）

    本文为mariadb官方手册:CREATE TRIGGER的译文. 原文:https://mariadb.com/kb/en/create-trigger/我提交到MariaDB官方手册的译文:htt ...

  9. MySQL优化(2)--------常用优化

    前言 之前已经简单介绍了MySQL的优化步骤,那么接下来自然而是就是常用的SQL优化,比如inseer.group by等常用SQL的优化,会涉及SQL语句内部细节(这正是我缺乏的).最后希望自己能记 ...

  10. shell编程基础(一): 基本变量和基本符号

    一.shell历史 Shell的作用是解释执行用户的命令,用户输入一条命令,Shell就解释执行一条,这种方式称为交互式(Interactive),Shell还有一种执行命令的方式称为批处理(Batc ...