一、实现的效果图：
二、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>
}