JavaScript是脚本语言
    效果交互 和 数据交互
    
    注意！！！
        1）符合样式遇到 - 要大写：margin-left → marginLeft
        2）函数声明了就必须要调用，如果没声明就调用（报错：函数名 is not defined）
        3）赋值：=  比较值是否相等：==

锚点    回跳到相应的id 

window.onload = function(){}   等整个页面所有内容加载完毕之后才执行

数组有下标  有长度

谁触发的事件   this指的就是谁

操作属性：
    .
    []  字符串，可以放变量或者参数
    window.onload   window['onload']
    
i 的问题：
    执行时机的问题：循环中加事件，事件中使用i

数据类型：

1）基本数据类型（拆分不出来新的东西）：
    number：数字
    string：字符串
    boolean：布尔
    undefined：未定义
2）复合数据类型：
    object：对象
    
function：函数（有争议）
    
检测数据类型：typeof

改变内容：
    表单元素：oEle.value
    非表单元素：oEle.innerHTML
！！！谨记：所有表单的元素的值（value）全都是字符串
数据类型转换：
    int：整数
    float：小数（浮点数）
    显式转换(强制转换)：
    字符串数字-》整数：var num = parseInt(字符串数字);
    字符串数字-》小数：var num = parseFloat(字符串数字);
    字符串数字-》数字：var num = Number(字符串数字);
隐式转换：
        12+'abc'：'+'为连接字符串
        '12'-5：自动转换为数字
NaN：Not a Number（谁都不等于，包括自己）
检测是否是NaN：isNaN(值)

！！！谨记(命名规范)：
    o开头：object(一个对象)
    a开头：array(一组)
    s开头：string(字符串)
    i开头：int(整数)
    f开头：float(浮点数)

流程控制语句：
    if()else if()else 等价于 switch(变量) case item1:coding break

真：true、非0数字、非空字符串、非空对象、
假：false、0、空字符串、undefined、NaN、null

使用document.getElementById() 没获取到元素就是null

返回值(return)：返回一个东西，终止程序运行，后面的代码不执行，根据需求，如果需要这个值就return，不需要就不用return；如果写了但是没写值就返回undefined

随机数：Math.random()：从0-1的随机小数，会出现0但绝不会出现1
获取从n-m的随机整数
    function rnd(n,m){
        return parseInt(Math.random()*(m-n)+n);
    }
    rnd(10,20);

重排：就是重新排列一下你的布局
body没有高度会有颜色是因为重绘的问题
重绘：就是重新绘画一下你的布局

日期对象：

    var oDate = new Date();
    获取年：oDate.getFullYear();
    获取月：oDate.getMonth();从0计数
    获取日：oDate.getDate();
    获取时：oDate.getHours();
    获取分：oDate.getMinutes();
    获取秒：oDate.getSeconds();

var str = 'abdsd';
str[3]:注意：低版本浏览器不兼容
str.charAt(下标):获取字符串中某一位置的字符

#设置日期时间：
    设置年：oDate.setFullYear(y,m,d);oDate.setFullYear(y,m);oDate.setFullYear(y);
    设置月：oDate.setMonth(m,d);oDate.setMonth(m);
    设置日：oDate.setDate(d);
    设置时：oDate.setHours(h,m,s,ms);oDate.setHours(h,m,s);oDate.setHours(h,m);oDate.setHours(h);
    设置分：oDate.setMinutes(m,s,ms);oDate.setMinutes(m,s);oDate.setMinutes(m);
    设置秒：oDate.setSeconds(s,ms);oDate.setSeconds(s);
    设置毫秒：oDate.setMilliseconds(ms);
    设置时间戳：oDate.setTime();
    就是不能设置星期！！！
    时间戳：格林威治时间(1970-1-1 00:00:00.000):从这个时间起所经历的毫秒数
效果

倒计时：获取目标的时间和时间戳，时间差=目标时间戳-当前时间戳

运算符：

    算术运算符：
        + - * / %(取余)
    赋值运算符：
        = += -= *= /= %=
    比较运算符：
        > < >= <= == != ===(全等) !==(不全等)
    逻辑运算符:
        &&      (与, 并且)         都满足
        ||      (或, 或者)         满足一个
        !       (非, 取反)         相反的结果

判断:if else 简写成 条件&&语句
三目运算符:条件?语句1:语句2;

continue:跳过本次循环，进行下一次循环
break:终止循环
return:阻止函数内，后面的代码执行

定时器:

setInterval:隔一段时间执行一次
    var timer = setInterval(function(){},ms);
setTimeout:过一段时间执行一次且只有一次
    var timer = setTimeout(function(){},ms);
清除定时器:
    clearInterval(timer);
    clearTimeout(timer);

字符串常用方法：

str.charAt()    查找字符串中某一位置的字符
str.charCodeAt()    查找字符串中某一位置的字符的编码(ASCII码)
str.substring()/str.slice()    截取字符串
    1、参数为整数的时候：
    str.substring(start,end)/str.slice(start,end)    包括start不包括end
    str.substring(start)/str.slice(start)    从start开始截取到最后
    str.substr()    同上  不同点在于第二个参数返回的是截取的字符的个数
    2、参数为负数的时候：
    str.slice()    参数加上字符串的长度
    str.substring()    参数置为0
    str,substr()    第一个参数加上字符串的长度，第二个参数置为0
str.indexOf()    在字符串中查找某一字符首次出现的位置，如果找不到返回-1（存在两个参数的时候，第二个参数代表从当前位置开始向后搜索）
str.lastIndexOf()    在字符串中查找某一字符最后出现的位置，找不到返回-1（第二个参数代表从当前位置开始向前搜索）
str.split()    把字符串拆分成数组
str.search()    搜索；返回字符串中第一个匹配项的索引
str.match()    匹配；返回一个数组
str.replace()    替换  str.replace(str|reg,str|fn);  默认只会替换第一个子字符串，要想替换所有，必须用正则还要指定g全局标志
  exp1：
    var str = 'welcome to aite';
    var arr = str.split('c');
    document.write(arr);
    结果：wel,ome to aite
  exp2：
    var str = 'welcome to aite';
    var arr = str.split('');
    document.write(arr);
    结果：w,e,l,c,o,m,e, ,t,o, ,a,i,t,e
  exp3：
    var str = 'welcome to aite';
    var arr = str.split();
    document.write(arr);
    结果：welcome to aite
str.toUpperCase()    小写字母转大写字母；返回新字符串
str.toLowerCase()    大写字母转小写字母；返回新字符串
str.trim()    删除前置和后缀的所有空格；返回字符串的副本
    str.trimLeft()    删除字符串开头的空格
    str.trimRight()    删除字符串结尾的空格

检测浏览器版本信息：window.navigator.userAgent

数组常用方法：

arr.push();    从数组后面添加；返回修改后的长度
arr.pop();    从数组后面删除；返回移除的项
arr.unshift();    从数组前面添加；返回修改后的长度
arr.shift();    从数组前面删除,删除的东西会返回一个值；返回移除的项
arr.slice();    用法同字符串的用法一样
arr.splice();
    arr.splice(start,length);    删除
    arr.splice(start,0,item1...);    添加
    arr.splice(start,length,item1...);    从start开始替换掉长度为length个
arr.sort();    排序；返回经过排序之后的数组
    深入sort：arr.sort(function(iNum1,iNum2){
                return iNum1-iNum2;         从小到大
                return iNum2-iNum1;         从大到小
             });
arr.join();    将数组合并为字符串
arr.concat();    将数组拼接为字符串
arr.reverse();    将数组反转；返回经过排序之后的数组

Math常用方法：

Math.random();    随机0-1的小数
Math.floor();    向下取整
Math.ceil();    向上取整
Math.round();    四舍五入
Math.pow();    幂
Math.sqrt();    开方
Math.abs();    绝对值
Math.max();    最大值
Math.min();    最小值
Math.sin(α);    对边除以斜边
Math.cos(α);   邻边除以斜边
Math.PI;        π

i的问题（即执行时机）

怎么触发的？
    1.循环中加事件，事件中使用i
    2.循环中加定时器，定时器中使用i
怎么解决？
    1.自定义一个属性
    2.封闭空间：能解决i的问题和变量名冲突的问题
        exp：(function(){

             })();
    3.作用域：
        全局、局部和闭包
    4.块级作用域：
        将循环中的var改成let

语言特性

1.不加var声明的变量属于全局变量，全局的就是window的
    等号表达式：
        var a = b = c =12;  除了a是局部的，剩下全是全局的
    逗号表达式：
        ***听逗号后面的
        a = (12,5);  弹出5
2.预解析：
    a）在js执行之前，会把变量提到顶部
    b）不会突破作用域
    c）整个流程：
        读取一个script标签 ==> 预解析 ==> 执行代码 ==> 再读取下一个script标签 ==> ...依次循环
    exp1：
        alert(a);
        var a = 12;
        alert(a);
        结果：先弹出undefined，再弹出12
    exp2：
        alert(a);
        function show(){
            var a = 12;
        }
        show();
        结果：a is not defined

JavaScript的组成部分

1.ECMAScript（核心解释器）
    99%可以兼容，不兼容可以解决
    它规定了js的核心语法
2.DOM（文档对象模型document object model）
    一切document操作
    95%兼容，不兼容可以解决
3.BOM（浏览器对象模型browser object model）
    一切浏览器操作
    基本上就不兼容（exp：每个浏览器上的弹窗样式不同）

DOM

元素=标签=节点
oEle.tagName  获取元素的名字
节点包括：
    1.标签节点
    2.文本节点
判断节点类型：
    oEle.nodeType();
        1       标签节点
        3       文本节点
        9       document

#DOM操作:
1.获取
    通过id获取一个元素：document.getElementById();
    通过class获取一组元素：oEle.getElementsByClassName();
    通过标签名获取一个元素：oEle.getElementsByTagName();
    html：document.documentElement;
    body：document.body

    通过节点关系获取：
        获取第一层子节点：oParent.children
        获取父节点：
            获取结构上的父级：obj.parentNode
                最大就是document  再往上就是null
            获取定位上的父级：obj.offsetParent
                最大是body  再往上就是  null
        获取兄弟节点：
            上一个兄弟节点：
                oEle.previousElementSibling  兼容高级浏览器
                oEle.previousSibling  兼容IE678
                oEle.previousElementSibling||oEle.previousSibling  兼容写法
                    上面这种写法的意思是：如果（if）浏览器中有previousElementSibling就执行它，否则（else）就执行后面的previousSibling
            下一个兄弟节点：
                oEle.nextElementSibling  兼容高级浏览器
                oEle.nextSibling  兼容IE678
                oEle.nextElementSibling||oEle.nextSibling  兼容写法
        获取首尾子节点：
            获取首子节点：
                oParent.firstElementChild  兼容高级浏览器
                oParent.firstChild  兼容IE678
                oParent.firstElementChild||oParent.firstChild  兼容写法
                oParent.children[0];（推荐写法）
            获取尾子节点：
                oParent.lastElementChild  兼容高级浏览器
                oParent.lastChild  兼容IE678
                oParent.lastElementChild||oParent.lastChild  兼容写法
                oParent.children[oParent.children.length-1];（推荐写法）
2.创建
    document.createElement('标签名');
3.添加
    添加到父级的最后：父级.appendChild(子级);
    插入到某一元素的前面：父级.insertBefore(要插入的元素,在谁之前插入);
4.替换
    replaceChild(要插入的节点,要替换的节点);
5.删除
    父级中删除子级
    父级.removeChild(子级);
6.克隆
    oEle.cloneNode();  只克隆了标签，没有内容
    oEle.cloneNode(true);  所有东西全部克隆
7.操作属性：
    .
    []
    attribute
        oEle.setAttribute(name,value);  设置属性名和值
        oEle.getAttribute(name);  获取属性
        oEle.removeAttribute(name);  删除属性

BOM

核心对象是window：
window.location  包含地址信息（.pathname  .host  .port）
window.open();  打开新窗口
window.open('链接','打开方式_blank');
window.close();  关闭窗口
window.onscroll  当页面滚动时触发
window.onresize  当改变可视区大小触发（F12）
系统对话框（alert()  prompt()  confirm()）：
    系统对话框都是同步的和模态的，在对话框显示的时候，代码是不会执行的
location对象：
    每次修改location属性(hash()方法除外)，页面都会以新的URL重新加载，同时浏览器的历史记录中就会生成一条新记录，hash也会生成
history对象：
    history.go(1)  <==> history.forward()  前进一页
    history.go(-1)  <==> history.back()  后退一页
    history.go(2)   前进两页
    history.length  所有的历史记录  等于0时代表记录中的第一个记录

获取盒子模型信息

获取元素盒子模型高度：
    oEle.offsetHeight  盒子模型高度
    oEle.offsetWidth  盒子模型宽度
获取内容的高度：
    oEle.scrollHeight
    当内容小于高度，获取的是height+padding，如果内容超过高度，获取的是内容高度
获取元素的位置：
    获取相对位置：
        oEle.offsetTop  距离定位父级的上边距
        oEle.offsetLeft  距离定位父级的左边距
    获取绝对位置：
        function getPos(obj){
            var l = 0;
            var t = 0;
            while(obj){
                l+=obj.offsetLeft;
                t+=obj.offsetTop;
                obj = obj.offsetParent;
            }
            return {left:l,top:t};
        }
可视区的宽高：
    document.documentElement.clientWidth  可视区宽
    document.documentElement.clientHeight  可视区高
滚动距离：
    document.documentElement.scrollTop||document.body.scrollTop  垂直方向
    document.documentElement.scrollLeft||document.body.scrollLeft  水平方向

javascript事件

1.鼠标事件
    onclick        点击事件
    onmouseover    鼠标移入
    onmouseout     鼠标移出
    onload         加载完执行
    onmousemove    鼠标移动
    onmousedown    鼠标按下
    onmouseup      鼠标抬起
    onscroll       滚动距离改变
    onresize       改变可视区大小
    oncontextmenu  上下文菜单
2.键盘事件
    onkeydown      键盘按下
    onkeyup        键盘抬起
事件对象（包含了事件的详细信息）
        ev(参数)    不兼容IE678
        event       不兼容Firefox
        var oEvent = ev||event;  兼容写法
        获取鼠标在可视区中的坐标：
            oEvent.clientX
            oEvent.clientY
        获取键码：
            oEvent.keyCode
#键码:
键盘上的普通按键:ev.keyCode
功能按键：
    ctrl：ev.ctrlKey
    shift:ev.shiftKey
    alt:ev.altKey

事件冒泡：
    子级的事件会触发父级中相同的事件
取消事件冒泡：
    oEvent.cancelBubble = true;
阻止浏览器默认行为（比如页面中右键出来浏览器菜单）：
    事件中加return false;
    ie低版本失效
        解决方法：
            设置捕获：
                oEle.setCapture&&oEle.setCapture();  如果浏览器中有setcapture就用setCapture方法
            释放捕获：
                oEle.releaseCapture&&oEle.releaseCapture();  同上

arguments

参数的数量不确定的时候使用arguments实参数组
    exp：
        function sum(){
            var result = 0;
            for(var i=0;i<arguments.length;i++){
                result+=arguments[i];
            }
            return result;
        }
        var result = sum(12,5,3,8,9,10,23);
        document.write(result);
        结果：70

JSON

    var arr = ['apple','lucy','banana','eric'];
    var json = {'name':'eric','age':18,'gender':'男'};

        key:value           键值对（key是唯一的）
    exp:
        小明居住在杭州是一名java工程师，有两个姐姐，一个叫小红，今年28岁，是一    名前端工程师，一个叫小丽，今年26岁，是一名DBA。
        用json表现出来:
            {'name':'小明','address':'杭州','job':'java工程师','sister':[
            {'name':'小红','age':28,'job':'前端工程师'},
            {'name':'小丽','age':26,'job':'DBA'}
            ]}
    ！！！数组和json的区别：
        数组         json
        有长度       没有长度
        有下标       没有下标，下标就是key
        for循环      for...in  循环（性能比for循环差）
                          exp：for(var key in json){
                                  key           键
                                  json[key]         值
                               }

cookie

存储数据用的，在F12里面的application里
特点：
    1.容量只有4KB，比如登录时候上次记住的账号密码
    2.不能跨浏览器
    3.不能跨域
    4.有生命周期（默认是session：会话）浏览器关闭会话结束
    5.键值对 key=cookie
自己编写原生的cookie.js：
    1.设置：
        设置属性和属性值：'sName=sValue';
        设置路径（'/'为根目录）：'PATH=/';
        设置生命周期：'Expires='+oDate;
        exp:
            var oDate = new Date();
            document.cookie = 'sName=sValue; PATH=/; Expires='+oDate;（每两个属性之间用分号空格(; )隔开）
    2.获取：
        document.cookie;
    3.删除：
         把过期时间过期即为删除操作(因为cookie过期了就没了用不了了)
用法：
    先把写好的cookie.js引入进来，在事件的里面设置setCookie('sName','sValue',Expires)，在网页加载进来获取getCookie('sName');

localStorage

直译为本地存储，也是在F12里面的application里
特点：
    1.存储量为5MB
    2.不能跨浏览器
    3.不能跨域
    4.没有生命周期
    5.键值对  key=value
    6.操作比cookie简单的多，只有属性和值两个
操作：
    设置：localstorage.key= value;
    获取：localstorage.key;
    删除：delete localstorage.key;
        delete:只能删除对象的属性

服务器

服务器就是个电脑，是用来 存储 和 计算 的；(即便是游戏软件也都需要经过计算和存储来的)
做前端需要的是 WEB服务器，用来响应客户端的请求
做数据交互前需要一个服务器：
    用自己的电脑安装上web服务
    安装集成环境有三种：
         wamp：Windows Apache mysql php
         mamp：mac apache mysql php
         xampp：两种都可以用(推荐)
    访问项目的时候不要用编辑器自带的访问，用电脑偶读ip地址或者是localhost

数据交互

form表单（name：数据的名字；method：提交方式；submit：提交按钮；action：提交地址）
    method：提交方式有两种：
        get：
            1.明文提交：提交的地址url中含有提交的信息
            2.有缓存
            3.速度快效率高
            4.32KB
        post：
            1.密文提交：F12里面有个请求头部
            2.没有缓存
            3.速度慢
            4.1GB
form用的人越来越少：
    1.需要刷新加载资源，费流量，用户体验度差
    2.不能从服务器中获取数据

Ajax

异步的JavaScript和XML
    最大的特点：无刷新从后台取数据
回调函数：只需要注重定义，不需要注重调用的函数
***特性：
        1.缓存（cache）：
             a) url不同就没有缓存
                http://www.a.com?t=1
                http://www.a.com?t=2
                t：格式
             b) Math.random(); 相当于人坚持每天买彩票中大奖连续中60年的几率（推荐）
             c) new Date().getTime(); 电脑的时间可以更改可以作弊
        2.编码格式不统一：
             务必统一：UTF-8
        3.不管你建的文件的类型，没有类型也加载原来的数据
        4.响应返回给你的值都是‘字符串’类型的
             解析数据：
             a）首选：可以用jquery：
                          $.ajax({
                             url:'',
                             data:{},
                             dataType:'json'
                          });
             b）可以用js：
                   var json = JSON.parse(result); 瑕疵：不兼容IE低版本，不过也没关系
                 可以用jquery：
                   $.parseJSON(result);
             c）不建议使用，如果以上两种都不能用的话：
                   eval(); 可以执行字符串中的代码，解析数据的时候在字符串两侧加上小括号()
                   弊端：非常的强大，什么都能解析，万一用户输入的内容和代码发生冲突或者被执行，会有安全问题。性能也很差
             d）不建议使用：new Function('return '+result)();

Ajax原理

一共分为四步:
    模拟：
        1.捡电话
        2.拨号
        3.说话
        4.听
    实际原理：
        1.创建ajax对象
        2.打开链接（创建链接）
        3.发送请求
        4.接收响应
***ajax的核心就是：XMLHttpRequest();

GET：：：
    1.创建ajax对象：
        高版本浏览器：
            var oAjax = new XMLHttpRequest();
        低版本浏览器IE678：
            var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
        兼容写法：
            if(window.XMLHttpRequest){
                var oAjax = new XMLHttpRequest();
            } else {
                var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
            }
    2.打开链接：
        oAjax.open('打开方式','url?data','是否异步');
        exp: oAjax.open('GET','xxxx?xxxx',true);
        在计算机上的同步和异步正好和生活中的相反
        同步：同一时间内只能做一件事
        异步：同时可以做很多件事
    3.发送请求：
        oAjax.send();
    4.接收响应：
        oAjax.onreadystatechange = function(){
            判断ajax状态码
            if(oAjax.readyState == 4){
                判断http状态码
                    if(oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304){
                        成功
                        oAjax.responseText;
                        响应文本
                    } else {
                        失败
                    }
            }
        }

POST：：：
    和GET用法一样，只有以下不同：
        1.打开方式不同  'POST'
        2.在发送请求上面加一步：
            设置请求头部：
                oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            发送请求：
                oAjax.send(data);

Ajax的状态码：
    0：准备发送，但还未发送
    1：发送成功
    2：接收原始数据成功
    3：解析数据成功
    4：完成

HTTP的状态码（三位数）：
    常用的是2字头：成功
    3字头有一个304例外：重定向 也代表成功

小知识点：做交互数据获取时候后台没有返回time时间，千万不能自己写本地时间(否则会出现bug；exp：玩游戏玩家通过修改本地时间就可以更改数据)

跨域数据交互

Ajax自己不能实现跨域，除非使用以下方法：
    1.jsonp
    2.设置代理
    3.iframe
jsonp：不是ajax，因为没有核心XMLRequestHttp

exp：百度下拉
    https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show
    url：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/
    wd：word（关键词）  在百度输入框输入的值
    cb：callback（回滚，回调函数）  每个网站的回调函数写法不同
打开窗口：
    window.open('地址','打开方式');  打开方式指的是：_self  _blank

正则表达式

又称规则表达式（Regular Expression），所以玩的全是规则
作用：操作字符串
字符串的所有方法均可操作正则：
    str.search    搜索
    str.match    匹配
    str.replace    替换  str.replace(str|reg,str|fn);
怎么用正则：
    new RegExp('正则','选项');
    简写：/正则/选项
正则的特性：
    1.懒  2.笨  3.贪婪
    选项：
        i（ignore）：忽视，忽略一切
        g（global）：全局，全部
        m（muti-line）：多行模式，默认单行模式
规则（重中之重）：：：
    行首    ^
    行尾    $
    []
        任选一个：
            /a[abc]+c/    aaaabbbbc 随机+
            /abc+/    abccccccc  单个+  
            /a(abc)c+/    aabcabcabcc  整体+  
        范围：
            /[0-9]/    所有数字
            /[a-z]/    所有小写字母
            /[A-Z]/    所有大写字母
            /[0-9a-zA-Z]/    所有数字和字母
        排除：
            /[^0-9]/    除了数字
            /[^a-z]/    除了小写字母
            /[^A-Z]/    除了大写字母
            /[^0-9a-zA-Z]/    除了数字和字母
    量词
        {n}    n个
        {n,m}    n到m个
        {n,}    至少n个

        ?    {0,1}    0或1次
        +    {1,}    至少1次，若干
        *    {0,}    随意            
    转义
        \d    [0-9]    所有数字
        \w    [0-9a-zA-Z]    所有数字字母下划线
        \s    所有空白符号包括空格回车tab
        \D    [^0-9]    除了数字
        \W    [^0-9a-zA-Z_]    除了所有数字字母下划线
        \S    除了空白符号
        \n    回车
        \t    tab
        .    包括键盘上能打出来的所有字符
        |    或  中间有|的话要加()
如果想用正常的字符串必须要转义：\
一个\转义字符只能转义一个字符
exp：
    .    \.
    @    \@

项目中可以用到的正则校验密码格式：
下面这里是正则校验格式：
if (items[0].checked && items[1].checked && items[2].checked) {
    that.passwordRule = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[#@!~%^&*])[a-zA-Z\d#@!~%^&*]{8,15}$/;
    that.passwordRuleType = 1;
} else if (items[0].checked && items[1].checked && !items[2].checked) {
    that.passwordRule = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,15}$/;
    that.passwordRuleType = 2;
} else if (items[0].checked && !items[1].checked && items[2].checked) {
    that.passwordRule = /^(?=.*\d)(?=.*[#@!~%^&*])[\d#@!~%^&*]{8,15}$/;
    that.passwordRuleType = 3;
} else if (!items[0].checked && items[1].checked && items[2].checked) {
    that.passwordRule = /^(?=.*[a-zA-Z])(?=.*[#@!~%^&*])[a-zA-Z~!@#%^&*]{8,15}$/;
    that.passwordRuleType = 4;
} else if (items[0].checked && !items[1].checked && !items[2].checked) { //纯数字
    that.passwordRule = /^\d{8,15}$/;
    that.passwordRuleType = 5;
} else if (!items[0].checked && items[1].checked && !items[2].checked) { //纯字母
    that.passwordRule = /^[a-zA-Z]{8,15}$/;
    that.passwordRuleType = 6;
} else if (!items[0].checked && !items[1].checked && items[2].checked) { //纯特殊符号
    that.passwordRule = /^(?=.*[#@!~%^&*])[~!@#%^&*]{8,15}$/;
    that.passwordRuleType = 7;
}
下面是前端应对正则校验所做的业务处理代码：
if (!(that.newPassword && that.newPasswordAgain && that.oldPassword)) {
    that.passwordMessage = '密码不能为空';
} else if (that.newPassword === that.oldPassword) {
    that.passwordMessage = '原始密码不可与新密码相同';
} else if (!that.passwordRule.test(that.newPassword)) {
    if (that.passwordRuleType === 1) {
        that.passwordMessage = '*新密码请输入8-15位数字+字母+特殊字符(#@!~%^&*)';
    } else if (that.passwordRuleType === 2) {
        that.passwordMessage = '*新密码请输入8-15位数字+字母';
    } else if (that.passwordRuleType === 3) {
        that.passwordMessage = '*新密码请输入8-15位数字+特殊字符(#@!~%^&*)';
    } else if (that.passwordRuleType === 4) {
        that.passwordMessage = '*新密码请输入8-15位字母+特殊字符(#@!~%^&*)';
    } else if (that.passwordRuleType === 5) {
        that.passwordMessage = '*新密码请输入8-15位纯数字';
    } else if (that.passwordRuleType === 6) {
        that.passwordMessage = '*新密码请输入8-15位纯字母';
    } else if (that.passwordRuleType === 7) {
        that.passwordMessage = '*新密码请输入8-15位纯特殊字符(#@!~%^&*)';
    }
} else if (that.newPassword !== that.newPasswordAgain) {
    that.passwordMessage = '*两次密码输入不一致'
} else {
    soar.appFrame.toastr('修改密码成功');
}

表单校验

reg.test(str)
校验的时候必须加上行首行尾
校验小技巧：要分段来做，否则容易乱
exp1：
    邮箱验证：
        第一段：名字（英文数字下划线）
                \w+
        第二段：@
                \@
        第三段：域名（英文数字-）
                [0-9a-zA-Z\-]+
        第四段：域名后缀（.  英文长度在2-6个  允许出现1-2次）
                (\.[a-zA-Z]{2,6}){1,2}
        /^\w+\@[0-9a-zA-Z\-]+(\.[a-zA-Z]{2,6}){1,2}$/
exp2：
    座机号验证：
        第一段：区号
                3到4位数字
                第一位一定是0
                第二位一定不是0
                0[1-9]\d{1,2}
        第二段：-
                \-
        第三段：号码
                第一位不是0
                7到8位数字
                [1-9]\d{6,7}
        /^0[1-9]\d{1,2}\-[1-9]\d{6,7}$/
exp3：
    手机号验证：
        11位数字
        /^1[34578]\d{9}$/
exp4：
    年龄验证（18-100岁的）：
        第一段：18-19
                1[89]
        第二段：20-99
                [2-9]\d
        第三段：100
                100
        /^(1[89]|[2-9]\d|100)$/
exp5：
    身份证验证：
        第一段：第一位不是0
                [1-9]
        第二段：15或18位
                \d{13}|\d{16}
        第三段：最后一位可以是x
                [\d,x,X]
        /^[1-9](\d{13}|\d{16})([\d,x,X])$/