联系电话正则表达式（jquery表单验证）

一、实现的效果图：

二、CSS样式

/*验证样式*/
.onError{

    vertical-align: middle;
    color: #ff0000;
    line-height: 22px;
    padding: 2px 10px 2px 23px;
    margin-left: 10px;
    _margin-left: 5px;
    background-image: url(../images/cuo.png);
    background-repeat: no-repeat;
    background-position: 0px 2px;
}
.onTan{

    vertical-align: middle;
    color: #343434;
    line-height: 22px;
    padding: 2px 10px 2px 23px;
    margin-left: 10px;
    _margin-left: 5px;
    background-image: url(../images/tan.png);
    background-repeat: no-repeat;
    background-position: 0px 2px;
}
.onRight{
    vertical-align: middle;
    line-height: 22px;
    padding: 2px 10px 2px 23px;
    margin-left: 10px;
    _margin-left: 5px;
    background-image: url(../images/dui.png);
    background-repeat: no-repeat;
    background-position: 0px 2px;
}

二、JS

//发布快递专线（会员管理）
$(function () {
 //鼠标指针触发是验证出发地网点联系电话是否合法   
 $("#txtStartLinkPhone").focus(function () {
        $(this).next().show().removeClass("onError").removeClass("onright").addClass("ontan").html("请输入出发地网点联系电话");
    }).blur(function () {
        var patrn = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$|(^(13[0-9]|15[0|3|6|7|8|9]|18[8|9])\d{8}$)/;
        if ($(this).val() != "") {
            if (!patrn.exec($(this).val()))
                $(this).next().removeClass("ontan").removeClass("onright").addClass("onError").html("出发地网点联系电话输入格式不正确");
            else
                $(this).next().removeClass("ontan").removeClass("onError").addClass("onright").html(" ");
        }
        else
            $(this).next().removeClass("ontan").removeClass("onright").addClass("onError").html("出发地网点联系电话不能为空");
    });
});

//button按钮提交时验证输入的电话是否合法
function StartLinkPhone() {
    var patrn = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$|(^(13[0-9]|15[0|3|6|7|8|9]|18[8|9])\d{8}$)/;
    if ($("#txtStartLinkPhone").val() != "") {
        if (!patrn.exec($.trim($("#txtStartLinkPhone").val()))) {
            $(this).next().removeClass("ontan").removeClass("onright").addClass("onError").html("出发地网点联系电话输入格式不正确");
            return false;
        }
        else {
            $(this).next().removeClass("ontan").removeClass("onError").addClass("onright").html(" ");
            return true;
        }
    }
    else {
        $(this).next().removeClass("ontan").removeClass("onright").addClass("onError").html("出发地网点联系电话不能为空");
        return false;
    }
}

三、页面

<form id=form1>
<table cellspacing="10" cellpadding="10">
  <tr>
    <td class="td1">联系电话：<em class="red">*</em></td>
    <td class="td2"><input type="text" id="txtStartLinkPhone" name="txtStartLinkPhone" value="@expressline.StartLinkPhone"></td>
  </tr>
  <tr>
    <td class="td1"></td>
    <td class="td2"><input name="add" type="submit" value="添加" class="left btn3"></td>
  </tr>
</table>
</form>

@section Js{
    <script src="/js/expressline.js" type="text/javascript"></script>
    <script type="text/javascript">
            $(function () {
               $("#txtStartLinkPhone").after("<span></span>");
               $("#form1").submit(function () {
               if(!StartLinkPhone()) {
                   $("#txtStartLinkPhone").focus().blur();
                }
               else {
                    $.post("/member/publishexpressline?action=get", $("this").serializeArray(), function (json) {
                        if (json.code == 1) {
                            //成功
                            alert(json.msg);
                            window.location = "/Member/ExpressLineManage";
                        }
                        else {
                            //失败
                    alert(json.msg);
                        }
                    });
                }
                return false;
            }
        })
    </script>
}