正则表达式相关表单验证

重复匹配

1、 * 有或者没有，有多少个都可以，相当于{0,} 。
2、 + 有至少一个以上，相当于{1,}。
3、 ? 有或者没有都行，最多1个相当于{0,1}。
例如：

/ca{0,}t/ ===  /ca*t/                  
/ca{1,}t/ ===  /ca+t/             
/ca{0,1}t/ === /ca?t/                   

重复匹配时默认最大优先匹配，即贪婪匹配。

console.log("aaaaaaaaab".match(/a{0,4}/g));

结果：
会先匹配最大，再向下匹配，匹配到最后一个"a"时，再向下就是匹配空字符串，空字符串也会匹配。
非贪婪匹配console.log("aaaaaaaaab".match(/a{0,4}?/g));这时候取最小，会匹配11个空字符串。

表单格式匹配

比如表单内有三个输入框，分别输入用户名、密码、手机号，做相应的验证。

<form action="http://www.163.com" method="GET">
     <input type="text"><span></span><br>
     <input type="text"><span></span><br>
     <input type="text"><span></span><br>
     <input type="submit">
</form>

var form=document.querySelector("form");
 // 获取所有的input列表转换为数组
var list=Array.from(document.getElementsByTagName("input"));
list.pop();	//去除submit提交按钮
var arr=[];	//用于判断每个输入是否正确
for(var i=0;i<list.length;i++){
    // 初始化让没有个元素都标示没有验证通过，都是false
    arr.push(false);
}
form.addEventListener("submit",formHandler);
form.addEventListener("input",formHandler);
function formHandler(e){
    if(e.type==="input"){
        // 获取当前input触发文本框是数组中第几个
        var index=list.indexOf(e.target);
        // 执行验证，带入当前是第几个文本框，文本内容
        var bool=getVerify(index,e.target.value);
        // 本次验证文本内容是否正确
        if(bool){
            // 如果正确就让本次验证内容后面的元素span添加内容改变颜色
            e.target.nextElementSibling.textContent="正确的";
            e.target.nextElementSibling.style.color="green";
        }else{
            // 如果不正确提示错误，红色
            e.target.nextElementSibling.textContent="错误的";
            e.target.nextElementSibling.style.color="red";
        }
        // index是当前验证元素list列表的第几个元素
        console.log(arr,index);
        // 让arr数组的对于顺序标示为是否验证正确
         // 数组中对于下标顺序，对于的input顺序位置标示当前验证是否正确
        arr[index]=bool;
    }else if(e.type==="submit"  && arr.indexOf(false)===-1){
        // 这个条件  提交事件时
        // 数组中是否有false
    }else{
        e.preventDefault();
        console.log("请输入正确后再提价");
    }
  
}
function getVerify(index,value){
    switch(index){
        case 0:
        return /^\w{8,16}$/.test(value);
        case 1:
        return /^(?=\D+\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/.test(value);
        case 2:
        return /^1\d{10}$/.test(value);
    }
}

用户名限制在8-16个字符内，/\w/ === /[a-zA-Z0-9_]/；
密码，?=匹配满足"条件"之前的字符，在这表示紧跟其后，即首位必须是一个或一个以上非数字，必须含有大小写字母，总字符8-16位之间。
每次在输入框中输入字符时，都会执行formHandler，并判断是否正确，用一个数组来表示每个输入框是否符合格式要求，当点击提交时，判断数组内都为true表示符合要求。