正则表达式---身份证、邮箱、密码、中文名

/*
    * 元字符：
    * . 表示的是：除了\n以外的任意的一个字符
    *
    * [] 表示的是范围，  [0-9]表示的是0到9之间的任意一个数字  [a-z]表示的是：所有小写字母中的任意一个   [0-9a-zA-Z]表示的是所有的数字或者字母中的一个
    *
    * [] 另一个含义：把正则表达式中元字符的意义去掉，显示本来的意思  [.]就表示一个.
    *
    * | 或者 [0-9]|[a-z]表示的是要么是一个数字，要么是一个小写字母
    *
    * () 分组 或 提升优先级  (()(())) 数左边的半括号有4个，所以分了4组，从最左边开始算起（不是和数学一样从最内层括号算起）
    *
    *
    * 限定符：也是元字符，但是限定前面表达式出现的次数的
    * * 表示：前面的表达式出现了0次到多次
    * + 表示： 前面的表达式出现了1次到多次
    * ？ 表示：前面的表达式出现了0次或1次  另一个含义：阻止贪婪模式---匹配到一次就结束
    *
    * {} 表示：前面的表达式出现的次数
    * {0,} 和*一样 表示前面的表达式出现了0次到多次
    * {1,} 和+一样 表示前面的表达式出现了1次到多次
    * {0,1} 和？一样 表示前面的表达式出现了0次或1次
    * {4,10} 表示前面的表达式出现了4到10次
    * {5} 表示前面的表达式出现了5次
    *
    *
    * ^ 表示以开始，或者是取非（取反） ^[0-9] 以数字开始 ^[a-z] 以小写字母开始  [^0-9a-zA-Z] 任意一个非数字或字母的字符
    *
    * $ 表示以什么结束   [0-9][a-z]$  必须以小写字母结束
    *
    * \d 数字中的一个
    * \D 非数字中的一个
    *
    * \s 空白符中的一个
    * \S 非空白符
    *
    * \w 非特殊符号
    * \W 特殊符号
    *
    * \b 单词的边界
    *
    * \ 转义
    *
    * g 全局匹配
    * 
    * i 忽略大小写
    * */

身份证的正则表达式
/ ^([1-9][0-9]{14})([0-9]{2}[0-9xX])?$/

邮箱
[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][0-9a_zA-Z]+){1,2}

请您输入邮箱地址：<input type="text" value="" id="email">
<script>
    //如果输入的是邮箱，输入框背景为绿色，如果不是邮箱，则为红色

    //获取文本框，注册失去焦点事件
    document.getElementById("email").onblur = function () {
        var reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/;
        //判断输入的是不是邮箱
        if(reg.test(this.value)){
            this.style.backgroundColor = "green";
        }else {
            this.style.backgroundColor = "red";
        }
    }
</script>

正则表达式对象
判断正则表达式是否匹配字符串：
正则表达式.test(字符串)

var reg = /^([1-9][0-9]{14})([0-9]{2}[0-9xX])?$/;
    var card = prompt("请输入您的身份证号：");
    if(reg.test(card)){
        alert("输入正确");
    }else {
        alert("输入错误");
    }

密码强度等级验证

 #qiangDuTiao{
        margin-top: 10px;
    }
    .hide0{
        height: 10px;
    }
    .hide1{
        width: 50px;
        height: 10px;
        background-color: red;
    }
    .hide2{
        width: 100px;
        height: 10px;
        background-color: orange;
    }
    .hide3{
        width: 150px;
        height: 10px;
        background-color: green;
    }

<div>
    密码：
    <input id="txt" type="text" maxlength="12" value="" />
    <div id="qiangDuTiao" class="hide0"></div>
</div>
<script>
    function my$(id) {
        return document.getElementById(id);
    }

    (function () {

        //键盘抬起事件
        my$("txt").onkeyup = function () {
            //密码长度大于6的时候才会开始验证，小于6的时候不需要验证
            if(this.value.length >= 6){
                var lvl = getLvl(this.value);
                console.log(lvl);
                my$("qiangDuTiao").className = "hide" + lvl;
            }else {
                my$("qiangDuTiao").className = "hide0";
            }
        }

        //给密码返回相应的等级
        function getLvl(qwd) {
            var lvl = 0;//默认是0级
            //如果密码有数字
            if(/[0-9]/.test(qwd)){
                lvl++;
            }
            //如果密码中有字母
            if(/[a-zA-Z]/.test(qwd)){
                lvl++;
            }
            //如果密码中有特殊符号或者_
            if(/[^0-9a-zA-Z]/.test(qwd)){
                lvl++;
            }
            return lvl;
        }
    }());
</script>

中文名字，一般是2-6个字

请输入中文名字：<input value="" type="text" id="name" />
<script>
    //注册失去焦点事件
    document.getElementById("name").onblur = function () {
        var reg = /^[\u4e00-\u9fa5]{2,6}$/;//中文的正则表达式：[\u4e00-\u9fa5]。中文变unicode编码，escape("中文")；unicode编码变中文，unescape("unicode编码")
        if(reg.test(this.value)){
            this.style.backgroundColor = "green";
        }else {
            this.style.backgroundColor = "red";
        }
    }
</script>

注册填写基本内容验证

#box{
            width: 420px;
            padding: 30px 20px;
            margin: 100px auto;
            background-color: #eee;
            border: 1px solid #999;
        }
        input{
            width: 250px;
            height: 20px;
            margin-top: 15px;
        }
        span{
            font-size: 12px;
        }

<div id="box">
    <label for="qq">Q Q：</label>
    <input type="text" value="" id="qq"/><span></span><br />

    <label for="phone">手机：</label>
    <input type="text" value="" id="phone"/> <span></span><br />

    <label for="e-mail">邮箱：</label>
    <input type="text" value="" id="e-mail"/> <span></span><br />

    <label for="telephone">座机：</label>
    <input type="text" value="" id="telephone"/> <span></span><br />

    <label for="fullName">姓名：</label>
    <input type="text" value="" id="fullName"/> <span></span><br />
</div>
<script>
function my$(id) {
    return document.getElementById(id);
}

//定义一个函数，判断每个输入框失去焦点事件
function isOnblur(obj, reg){
    obj.onblur = function () {
        if(reg.test(this.value)){
            this.nextElementSibling.innerText = "填写正确";
            this.nextElementSibling.style.color = "green";
        }else {
            this.nextElementSibling.innerText = "嘚瑟了吧，写错了";
            this.nextElementSibling.style.color = "red";
        }
    }
}
//验证输入QQ号是否正确
isOnblur(my$("qq"), /^[\d]{5,12}$/);

//验证输入手机号是否正确
isOnblur(my$("phone"), /^[1][3-9][0-9]{9}$/);

//验证输入邮箱号是否正确
isOnblur(my$("e-mail"), /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);

//验证输入座机号是否正确
isOnblur(my$("telephone"), /^[0-9]{3,4}[-][0-9]{7,8}$/);

//验证输入姓名号是否正确
isOnblur(my$("fullName"), /^[\u4e00-\u9fa5]{2,6}$/);
</script>