1.正则的概念

    JS诞生的目的是什么?
      就是为了做表单验证。
 
    在JS未出现以前,表单的信息验证需要传输给后台,让后台做数据验证处理之后,再返回给前端页面处理的结果。在带宽有限的情况下,整个验证过程非常复杂,且耗时。
 
    在使用JS做验证的过程中,一个简单的验证规则的实现非常的麻烦。
 
    如:从杂乱的字符串中找数字
    var str = "asd68asd687as6da78sd123123zcacas"
var linshi='';
var arr=[]
for(var i = 0 ; i < str .length ; i ++){
if(str.charAt(i)>=0&&str.charAt(i)<=9){
linshi+=str.charAt(i)
}else{
if(linshi!=''){
arr.push(linshi)
}
}
}
if(linshi!=''){
arr.push(linshi)
}
console.log(arr)
    如果使用正则的方式:
    var arr = str.match(/\d+/g);
    就可以了
  
    什么是正则?
    正则表达式(regular expression)是一个描述字符规则的对象。可以用来检查一个字符串是否含有某个字符,将匹配的字符做替换或者从某个字符串中取出某个条件的子串等。
    
    正则表达式:
    正则表达式其实就是一种规则,其实把正则称作规则表达式更为恰当。正则的语法基于一种古老的perl语言。
 
 
    为什么要用正则:
    前端往往有大量的表单数据校验工作,采用正则表达式会使得数据校验的工作量大大减轻。常用效果:邮箱,手机号,身份证号等(使用熟练的情况下)
 
    正则的使用理念:
    任何程序都可以不用正则表达式写出来,但根据懒人原则,怎么做不言而喻。
 
    
 

2.创建方式

    正则的创建方式:
    1.构造函数方式
        var reg1 = new RegExp("a");
var str = "adassdfsd";
console.log(str.match(reg1)) //输出匹配a的字符
 
    2.字面量方式,古老的perl语言风格
        var reg2 = /a/;
console.log(str2.match(reg2)); //输出匹配a的字符
  
      / / 是正则表达式的标识符
      " " 是字符串的标识符
      [ ] 是数组的标识符
      { } 是对象的标识符
 
    
    正则中的修饰符,写在正则表达式后面/的后面:
    g表示全局匹配,查找所有
    i表示忽略大小写
 
 3.邮箱的规则
        123abc@qq.com
        数字+英文+@+英文+.+英文
 
    
    正则的验证:
    var reg = /[0-9]/;
    reg.test(str)    //返回为true表示验证成功,false表示失败
 
 
 4.字符串.replace(oldstr, newstr)函数 和 字符串.match(正则)函数
    字符串的replace函数的功能:将老字符串替换成新字符串
 
    可以利用此函数,将老字符串表示成正则表达式,对字符串进行替换
 
    如:字符串中的abc替换成“哈哈”,如果正则后面没有g,则只替换一个,如果没有i,则大写不会替换
    var str = “abc123abc456abbcdABCefaacbcdbcabc";
var reg = /abc/g;
console.log(str.replace(reg,"哈哈"));
    字符串match函数的功能:提取所有的想要的东西
    返回一个数组,包含所有符合条件的字符
 
 
    \d    匹配所有的数字
 
    var reg = /\d/g;
console.log(str.match(reg)) //打印字符串中所有的数字
    +     若干,量词,表示多少个都可以,至少1个,无上限
 
    var reg = /\d+/g;
console.log(str.match(reg)) //打印字符串中所有的数字,连续
    |     或,类似于js中的 ||
    var reg = /abc|bbc|cbc|dbc/g
console.log(str.match(reg)); //打印字符串中的abc,bbc,cbc,dbc
var reg = /[a-c]bc/g
    [ ]    中元符
    var reg = /[a-z]/              //匹配所有字母
    [0-9] == \d
 
    ^     排除(除了)
    var reg = /[^0-9]/             //表示除了数字之外所有
 
    .     代表所有,不建议使用
    var reg = /<.+>/g
console.log(str.replace(reg,"")) //过滤,表示尖括号里面的东西不要,但是?
    正则的贪婪定律:
    var reg = /<[^<>]+>/g
console.log(str.replace(reg,"”)) //表示尖括号里面的东西不要,真
 
    转义字符:
    \d    ——    [0-9]         数字
    \w    ——    [a-z0-9_]     数字,字母,下划线
    \s    ——    空白字符(空格)   
 
    \D    ——    [^0-9]        非数字
    \W    ——    [^a-z0-9_]    非数字,字母,下划线
    \S    ——    非空白字符
 
    量词:限定符,可以指定正则表达式的一个给定组,必须要出现多少次才能满足匹配
    *     匹配前面的子表达式零次或多次
    +     匹配前面的子表达式至少一次或多次
    ?     匹配前面的子表达是零次或一次
    {n}   匹配确定n次
    {n,}  至少匹配n次
    {n,m} 至少匹配n次,最多匹配m次
 
    注:在限定符后紧跟?,则由贪婪匹配变成非贪婪匹配
 
    qq号验证规则:
    var reg = /[1-9]\d{4,10}/
 
    固化的规则:0411-6666888
    开头为0或者2的或者三位数字加上-开头为非零的八位数字,结尾是1到4的分机号
    var reg = /(0\d{2,3}-)?[1-9]\d{7}(-\d{1,4})?/
 
    复杂邮箱的规则:英文数字下划线@一串英文或数子.一串英文
    var reg = /\w+@[a-z0-9]+\.[a-z]+/i
    想要校验怎么办?在正则转义字符前加上\
 
 
正则的方法
    正则.test(字符串)方法,返回值是true和false
    正则.test(字符串)有一个特性,就是只要字符串的一部分符合要求,那么就会返回true
解决方法:
  ^开始
  $结束
 
exec()找到了返回数组,找不到反回null
 
    删除多余空格  
    str.replace(/\s+/g,'');
 
 
    删除首尾空格
    str.replace(/^\s+/,'');
    str.replace(/\s+$/,'');
 
    检查邮政编码  共 6 位数字,第一位不能为 0
    /^[1-9]\d{5}$/
 
 
 
正则表达式手册
 
 
常用检测方式:
1.中文检测
    unicode编码中文监测:/^[\u2E80-\u9FFF]+$/
 
2.用户名检测
    正则:/^[a-z0-9_-]{3,16}$/
 
3.邮箱检测
    /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
      可以多次出现 (字母数字下划线.-)@可以出现多个(数字字母.-).2到6位字母或.
    /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
可以有多个(字母数字)可有多个可无(.多个(字母数字))@可以多个(数字字母可   有1次可无(-数字字母))可以有多个(1或2个.多个字母)
 
abc123@123abc.com
 
4.URL检测
    /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w\.-]*)*\/?$/
有1次或0次(http有1次或0次s : //) 可以多个(数字字母.-) . 2到6位(字母.) 可多个或0个 (可以多个或0个 /数字字母下划线.-) 可0或1次/
 
 
5.HTML标签检测
    /^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/
<多个(字母)可多个或0个(除了<的所有字符)  />
<多个(字母)可多个或0个(除了<的所有字符)>多个任意字符   </重复第一部分的多个字母>
 
 
自定义的html标签
/<[^<>]+>/g
 

javascript基础7(正则及表单验证)的更多相关文章

  1. laravel基础课程---14、表单验证(lavarel如何进行表单验证)

    laravel基础课程---14.表单验证(lavarel如何进行表单验证) 一.总结 一句话总结: lavarel的验证的功能比tp要[简单]且[强大]很多 直接控制器中:添加[规则数组]和[修改提 ...

  2. jQuery/javascript实现网页注册的表单验证

    <html> <head> <meta charset="utf-8"> <title>注册表单验证</title> & ...

  3. Java Script基础(十一) 表单验证

    一.表单验证的必要性: 表单验证在客户端和服务器端,客户端验证实际是直接调用JavaScript脚本对用户输入的数据进行验证:而服务器也同样可以实现数据验证,但是当服务器压力过大时,资源损耗会比较严重 ...

  4. jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)

    1.表单验证插件——validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:   $(form).validate({o ...

  5. (七)JavaScript之[调试]与[前端表单验证]

    12].调试为什么要去调试?1.在编写JavaScript时,如果没有调试工具将是一件很痛苦的事情.2.没有调试工具是很难去编写JavaScript程序的.3.编写的代码可能包含语法错误.逻辑错误,如 ...

  6. JavaScript入门学习笔记(表单验证)

    表单验证: 在数据被送到服务器之前对HTML表单中的输入数据进行验证,避免服务器频繁验证信息造成用户体验差. (1)表单数据是否为空 (2)输入的信息格式是否正确 (3)输入数据的类型是否正确 必填( ...

  7. Laravel 5 基础(十一)- 表单验证

    在建立一个文章的时候,如果你什么都不输入直接提交,ok,你获得了一个空的文章,没有任何错误提示,这是不对的.在命令行下运行 php artisan 可以看到一个选项 make:request,新建一个 ...

  8. 基于Jquery Validate 的表单验证

    基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...

  9. JQuery中的表单验证及相关的内容

      前  言 JRedu Android应用开发中,经常要用到表单.既然用到了表单,那就不可避免的要用到表单的验证.但是,在提交表单时,但是,并不是,每次提交的表单内容都是正确的,如果 每次都将表单的 ...

随机推荐

  1. Git--01 基础 - 远程仓库的使用

    目录 Git 基础 - 远程仓库的使用 远程仓库的使用 查看远程仓库 添加远程仓库 从远程仓库中抓取与拉取 推送到远程仓库 查看某个远程仓库 远程仓库的移除与重命名 Git 基础 - 远程仓库的使用 ...

  2. hdu 5964:平行四边形 【计算几何】

    打重现赛时,一点思路也没有,然后又看到这题AC数那么少,就直接放弃了.今天重新看了看,借鉴了下别人的,发现此题应该算是一道可解题. 看上去,这题的ans是同时有两个点作为自变量的函数(然而n^2复杂度 ...

  3. LeetCode算法题

    1.给两个整数数组 A 和 B ,返回两个数组中公共的.长度最长的子数组的长度. 时间复杂度待优化 class Solution { public int findLength(int[] A, in ...

  4. Angular JS - 4 - Angular JS 作用域与控制器对象

    1. 控制器对象使用 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...

  5. Spring学习总结(2)- AOP

    一,什么是AOP AOP(Aspect Oriented Programming)意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中 ...

  6. 分享几套bootstrap后台模板【TP5版】

    分享几套bootstrap后台模板[TP5版],模板来源于网络,需要的拿走.1.AdminLTE 链接: http://pan.baidu.com/s/1o7BXeCM 密码: zfhy 2.Boot ...

  7. CMMI模型

    CMMI的成熟度级别 初始级(过程不可预测,管理和控制差,是反应式的)管理级(过程处于项目级,经常是反应式的)定义级(过程已经提升到组织级(OSSP))定量管理级(对过程进行度量,并进行统计控制)优化 ...

  8. 2018-2019-2 20175105王鑫浩《Java程序设计》实验三 《敏捷开发与XP实践》

    实验三 <敏捷开发与XP实践> 实验报告封面 课程:Java程序设计 班级:1751班 姓名:王鑫浩 学号:20175105 指导教师:王鑫浩 实验日期:2019年4月29日 实验时间:- ...

  9. Js事件分发与DOM事件流

    这一篇比较透彻:https://www.jianshu.com/p/dc1520327022 点击了目标节点后,捕获阶段里事件会从外向目标传递:到了目标阶段,捕获和冒泡的执行顺序按照事件被定义的先后顺 ...

  10. 杂项-网络-DNS-IP:8.8.8.8

    ylbtech-杂项-网络-DNS-IP:8.8.8.8 8.8.8.8是一个IP地址,是Google提供的免费DNS服务器的IP地址,Google提供的另外一个免费DNS服务器的IP地址是:8.8. ...