$(document).ready(function () {
$(":submit,:image").each(function () {
$(this).click(function () {
var $bool = true;
var group = $(this).attr("group");
$(":input,select").each(function () {
var $classValue = $(this).attr("class");
//同组显示且在固定语法内
if (group == $(this).attr("group") && $classValue != undefined) {
var $classStr = $classValue.split(' ');
$(this).change(function () {
$bool = $initializeSet(this, $classValue, $bool);
});
$bool = $initializeSet(this, $classValue, $bool);
}
});
return $bool;
});
});
//初始化内容
function $initializeSet($id, $classValue, $boolean) {
var $bool = $boolean;
var $classStr = $classValue.split(' ');
for (var i = 0; i < $classStr.length; i++) {
var $className = $classStr[i].toString(); //获得样式表名
var $fontId = "#p_" + $($id).attr("id");
var $value = $.trim($($id).val()); //去空格获得当前验证标签的值
if ($className == "qp_null_select") {
$setRemove($fontId, $id);
var $opthionValue = "0";
var $prompt = $($id).attr("prompt"); //提示内容
if ($($id).attr("oValue") != undefined) {
$opthionValue = $($id).attr("oValue");
}
if ($prompt == undefined) {
$prompt = "请选择...";
}
var $promptInfo = $promptMessage($id, $prompt);
if ($($fontId).html() == null) {
$setAdd($id, $promptInfo);
}
if ($value == $opthionValue) {
$bool = false;
}
else {
$($fontId).remove();
$($id).removeClass(" class2");
}
}
if ($className == "qp_null") {
$setRemove($fontId, $id);
var $prompt = $($id).attr("prompt"); //提示内容
if ($prompt == undefined) {
$prompt = "请输入此字段!";
}
var $promptInfo = $promptMessage($id, $prompt);
if ($($fontId).html() == null) {
$setAdd($id, $promptInfo);
}
if ($value == "") {
$bool = false;
}
else {
$($fontId).remove();
$($id).removeClass(" class2");
}
}
if ($className == "qp_compare" && $value != "") {
$setRemove($fontId, $id);
var $prompt = $($id).attr("promptCompare"); //提示内容
var $compareId = $($id).attr("compareId"); //获得比较标签的样式名;
var $compareValue = $.trim($("." + $compareId).val()); //获得比较标签的值 并去掉空格
var $promptInfo = $promptMessage($id, $prompt);
if ($($fontId).html() == null) {
$setAdd($id, $promptInfo);
}
if ($value != $compareValue) {
$bool = false;
}
else {
$setRemove($fontId, $id);
}
}
//此处添加要验证的正则表达式($regexStr正则的值);
else if ($value != "") {
switch ($className) {
case "qp_number":
var $regexStr = /^[0-9]*$/;
$bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
break;
case "qp_ratio":
var $regexStr = /^[0-9]{1,2}$/;
$bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
break;
case "qp_email":
var $regexStr = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
$bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
break;
case "qp_userName": //6-16位汉字、数字、字母、下划线
var $regexStr = /^[a-zA-Z0-9_\u4e00-\u9fa5]{6,16}$/;
$bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
break;
case "qp_admin": //2-16位汉字、数字、字母、下划线
var $regexStr = /^[a-zA-Z0-9_\u4e00-\u9fa5]{2,16}$/;
$bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
break;
case "qp_pwd": //必须字母开头 6-16位数字、字母、下划线
var $regexStr = /^[a-zA-Z][a-zA-Z0-9_]{5,16}$/;
$bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
break;
case "qp_mobile": //手机号码
var $regexStr = /(^((0[1,2]{1}\d{1}-?\d{8})|(0[3-9]{1}\d{2}-?\d{7,8}))$)|(^0?(13[0-9]|15[0-35-9]|18[0236789]|14[57])[0-9]{8}$)/;
$bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
break;
case "qp_qq": //qq号码
var $regexStr = /^[1-9]*[1-9][0-9]*$/;
$bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
break;
case "qp_postCode": //邮政编码
var $regexStr = /^[1-9][0-9]{5}$/;
$bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
break;
case "qp_img": //图片格式
var $regexStr = /.+(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png)$/;
$bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
break;
case "qp_pwnumber":
var $regexStr = /0|(^[1-9]+\d*$)/;
$bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
break;
case "qp_money":
var $regexStr = /^-?(0|\d+)(\.\d+)?$/;
$bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
break;
case "qp_date":
var $regexStr = /((((0[0-9])(([02468][48])|([13579][26]))-0?2-29))|(((0[0-9])(([2468][048])|([13579][26]))-0?2-29))|(((0[1-9])(([02468][048])|([13579][26]))-0?2-29))|((([1-9][0-9])(([02468][048])|([13579][26]))-0?2-29))|((0[0-9][0-9][1-9])|(0[0-9][1-9][0-9])|(0[1-9][0-9][0-9])|([1-9][0-9][0-9][0-9]))-((((0?[1-9])|(1[0-2]))-((0?[1-9])|(1[0-9])|(2[0-8])))|((((0?[13578])|(1[02]))-31)|(((0?[1,3-9])|(1[0-2]))-(29|30)))))/;
$bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
break;
}
}
}
return $bool;
}
/*-验证正则的内容
**-1.显示的标签对象
**-2.当前的标签对象
**-3.正则表达式
**-4.当前标签的值
**-5.验证是否成功-*/
function $regexContent($fontId, $id, $regexStr, $value, $boolen) {
var $bool = $boolen;
$setRemove($fontId, $id);
var $regex = $regexStr;
var $prompt = $($id).attr("promptRegex"); //提示内容
if ($prompt == undefined) {
$prompt = "输入格式不正确!";
}
var $promptInfo = $promptMessage($id, $prompt);
if ($($fontId).html() == null) {
$setAdd($id, $promptInfo);
}
if (!$regex.test($value)) {
$bool = false;
}
else {
$setRemove($fontId, $id);
}
return $bool;
}
//设置显示提示内容
function $setAdd($id, $promptInfo) {
$($id).after($promptInfo);
$($id).attr("class", $($id).attr("class") + " class2");
}
//设置移除提示内容
function $setRemove($fontId, $id) {
if ($($fontId).attr("id") != undefined) {
$($fontId).remove();
$($id).removeClass(" class2");
}
}
//返回带样式的提示信息 --1.当前标签对象 2.提示信息
function $promptMessage($id, $promptMess) {
var $promptInfo = "<font id=\"p_" + $($id).attr("id") + "\" class='promptMessage'> *" + $promptMess + "</font>"; ;
return $promptInfo;
}
});
支持分组验证 支持扩展
<asp:TextBox ID="txb_EMail" promptRegex="正确格式:xx@bb.com" runat="server" class="qp_null qp_email qp_exist text r3"></asp:TextBox>
<asp:ImageButton ID="btn_Register" runat="server" ImageUrl="~/images/loginreg_smt.png" class="sub" />
注意 只对 input标签 type为 submit 和 image的按钮有效 想其他也有效 可以在按钮点击事件中扩展 prompt的属性为提示内容(可自定义修改) promptRegex的属性为正则
验证提示内容(可自定义修改) 也可以自定义规则 进行验证
有不足之处 多多指教