正则表单Tips【自制】

先贴图，方便理解

-------------------------------------------------------------------------html部分

<div class="contactInfo">
                <h3>联系人信息</h3>
                <section class="infoCon">
                    <div class="name">
                        <span class="title req">姓名：</span>
                        <section>
                            <input type="text" data-verify="len-2-10" name="name" placeholder="请输入姓名" />
                            <span class="gender male on"><i></i>先生</span>
                            <span class="gender female"><i></i>女士</span>
                            <p class="msg_tips arrowDown">请输入长度为2位以上的中文、字母</p>
                        </section>
                    </div><!-- 姓名 -->
                    <div class="phone">
                        <span class="title req">联系电话：</span>
                        <section>
                            <input type="num" data-verify="phone" name="phone" placeholder="请输入手机号码" />
                            <p class="msg_tips arrowLeft">请输入正确的手机号</p>
                        </section>
                    </div><!-- 联系电话 -->
                    <div class="address">
                        <span class="title req">收货地址：</span>
                        <section>
                            <input type="text" data-verify="noEmpty" name="address" placeholder="请输入收获地址" />
                            <p class="msg_tips arrowLeft">请输入收货地址</p>
                        </section>
                    </div><!-- 收货地址 -->
                </section>
            </div><!-- 联系人信息 -->

-------------------------------------------------------------------------css部分

.box-main div.contactInfo section.infoCon div section p.msg_tips{
    min-width: 5rem;
    line-height: .9rem;
    font-size: .6rem;
    letter-spacing: .05rem;
    position: absolute;
    left: 100%;
    background-color: rgba(0,0,0,.72);
    color: #fff;
    -webkit-border-radius: .25rem;
    border-radius: .25rem;
    padding: .1rem .25rem;
    display: none;
}


.box-main div.contactInfo section.infoCon div.name section p.msg_tips{
    width: 6rem;
    left: 9rem;
    bottom: 100%;
    margin-bottom: .2rem;
}


.box-main div.contactInfo section.infoCon div.phone section p.msg_tips,
.box-main div.contactInfo section.infoCon div.address section p.msg_tips{
    width: 8rem;
    height: 1.1rem;
    line-height: 1rem;
    top: 0;
    bottom: 0;
    margin: auto .5rem;
}


/* 箭头装饰 */
.box-main div.contactInfo section.infoCon div section p.msg_tips.arrowDown::after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: solid transparent;
    border-top-color: rgba(0,0,0,.72);
    border-width: .25rem .3rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: auto; 
}


.box-main div.contactInfo section.infoCon div section p.msg_tips.arrowLeft::after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: solid transparent;
    border-right-color: rgba(0,0,0,.72);
    border-width: .25rem .2rem;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    margin: auto; 
}

--------------------------------------------------------------------------js部分

/*正则功能*/

var inputWrap = $("div.contactInfo section.infoCon >div");


/*输入框获得焦点后显示提示*/
inputWrap.find("input").on("focus",function(){
    fVerify($(this));
});


/*输入框失去焦点后表单验证*/
inputWrap.find("input").on("blur",function(){
    fVerify($(this));
});


/*键盘按键放开*/
inputWrap.find("input").on("keyup",function(){
    fVerify($(this));
});


/*验证方法触发*/
function fVerify(element){
    var thisVal = element.val()||false;
    var thisVerify = element.attr("data-verify");
    return fValidation(element,thisVerify,thisVal);
}


/*表单验证方法*/
function fValidation(element,verify,val){


    var thisTips = element.siblings("p.msg_tips");
    var regExp,res;
    switch(verify)
    {
        case "phone":
            regExp = /^1(3|4|5|7|8)\d{9}$/;
            break;
        case "noEmpty":
            regExp = /[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
            break;
        case "len-2-10":
            regExp = /[a-zA-Z_\u4e00-\u9fa5]{2,10}/;
            break;
    }


    if(!val){
        thisTips.fadeIn(500);
        return false;
    }
    
    /*正则匹配*/
    res = regExp.test(val);
    if(res==true){
        thisTips.fadeOut(150);
        return true;
    }else{
        /*如果提示已经隐藏了，就让它再次显示*/
        if(thisTips.is(":hidden")){
            thisTips.fadeIn(500);
        }
        return false;
    }
    
}


/*判断全部验证是否通过*/
function inputVerify(elements){
    
    /*对应的input全部出发blur事件*/
    for(var i = 0 ; i < elements.length; i++){
        elements.eq(i).blur();
    }
    /*判断全部正则是否都成功匹配*/
    for(var i = 0 ; i<elements.length ; i++){
        if(!fVerify(elements.eq(i))){
            return false;
        }; 
    }
    /*通过*/
    return true;


}