Jquery表单验证插件-JSFormChecker
本帖最后由 lanxigang 于 2013-01-28 14:01:31 编辑 用起来挺简单，需要的话可以试试
需要和Jquery一块使用
/* JQuery.plugin ： 表单数据格式验证
* Author: Devin Lan @ long long ago
* API: 如下
* 鸣谢: 感谢jQuery
* Example:
* <!--需要进行数据验证Form：
*1、添加formCheck属性即可
*2、Form要求有id属性
*formCheck=
*realTime:即时验证
*onSubmit:提交表单时验证
*msgModes=
*alertMsg: alert方式显示消息
*aftInputMsg: 对应表单后面直接显示消息
*-->
* <form id="form1" formCheck="realTime|onSubmit" msgModes="alertMsg|aftInputMsg">
* <!--
*需要验证表单元素，可以添加dataType、errorMsg、passMsg、valueFn
*1、dataType:数据格式，枚举$.regEx或者自动以正则。可选
*2、errorMsg:未通过验证是消息。可选
*3、passMsg: 通过验证时的消息。可选
*4、valueFn: 获取表单值自定义方法。可选
*接口：string Interface(id)
*FckEditor编辑器的话请填写：$.fckValue-->
*<!--未实现：msgMethod：消息展示方法 (object o,string msg)-->
* <input
dataType="$.regEx|你自己的正则"
errorMsg="<font color=red>错误消息</font>"
passMsg="<font color=red>错误消息</font>"
[valueFn="你自己的方法"]/>
*<textarea id="Light" name="Light"
valueFn="$.fckValue"
datatype="NotEmpty"
errormsg="请填写"
*style="display: none;"></textarea>
*<!--每组radio 或者 checkbox 只需再其中一项做设置即可-->
*<input type="radio"
dataType="NotEmpty"
errormsg="请选择性别" name="sex" id="sex" value="男"/>
* <input type="radio" name="sex" id="radio2" value="女" />女
* </form>
* Exception:
*
* 1、Error: Error: Syntax error, unrecognized expression: #
* 原因: form没有设置Id
*/
(function ($) {
//常用正则表达式库 可以自己添加
$.regEx = {
notempty: "\\S+",
number: "^\\d+$",
date: "^\\d{4}-\\d{1,2}-\\d{1,2}$",
money: "^(\\d+\\.)?\\d+$",
//下面几个正则没有经过验证
chinese: "\[\\u4e00-\\u9fa5\]",
html: "<(.*)>.*<\/\1>|<(.*) \/>",
email: "^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$",
url: "http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?",
username: "^[a-zA-Z][a-zA-Z0-9_]{4,15}$",
sdate: "^(?:(?!0000)[0-9]{4}(-)(?:(?:0?[1-9]|1[0-2])(-)(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])(-)(?:29|30)|(?:0?[13578]|1[02])(-)31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)(-)0?2(-)29)$",
tel: "(d+-)?(d{4}-?d{7}|d{3}-?d{8}|^d{7,8})(-d+)?",
ip: "^(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$",
qq: "^[1-9]*[1-9][0-9]*$",
idcard: "\d{15}|\d{18}",
mobile: "^0{0,1}(13[0-9]|14[0-9]|15[0-9]|18[7-9])[0-9]{8}$"
};
$.isRegEx = function (str) {
for (var it in $.regEx) {
if (it == str)
return true;
}
return false;
};
$.fckValue = function (id) {
var oEditor = FCKeditorAPI.GetInstance(id);
return oEditor.GetXHTML(false);
};
$.fckFocus = function (id) {
var oEditor = FCKeditorAPI.GetInstance(id);
oEditor.Focus();
};
//表单验证方法
$.formCheck = function (obj) {
var returnVal = true;
var msgModes = $(obj).attr("msgModes") == undefined ? "aftInputMsg" : $(obj).attr("msgModes");
$("#" + obj.id + " [dataType]").each(function (index, it) {
returnVal = $(it).inputCheck(true);
if (!returnVal) {
if ($("#" + obj.id + " iframe[src*='InstanceName=" + it.id + "']").length > 0) {
$.fckFocus(it.id);
} else {
it.focus();
}
return false;
}
});
return returnVal;
};
$.fn.radioOrCheckBoxCheck = function () {
//把不带有dataType对象转换成带有dataType配置的选项
$("#" + this.parents("form").attr("id") + " input[name=" + this[0].name + "][dataType]").inputCheck(true);
};
$.fn.inputCheck = function (passMsgShow) {
var val = "";
var isFck = false;
var msgModes = this.parents("form").attr("msgModes") == undefined ? "aftInputMsg" : this.parents("form").attr("msgModes");
try {
var re;
if (!$.isRegEx(this.attr("dataType").toLowerCase())) {
re = new RegExp(this.attr("dataType"));
} else {
re = new RegExp(eval("$.regEx." + this.attr("dataType").toLowerCase()));
}
if (typeof (this.attr("valueFn")) != "undefined") {
val = eval(this.attr("valueFn") + "('" + this.attr("id") + "')");
} else {
switch (this[0].type.toLowerCase()) {
case "text":
case "select-one":
case "select-multiple":
case "textarea":
case "password":
case "email":
case "number":
val = this.val();
break;
case "checkbox":
case "radio":
$("#" + this.parents("form").attr("id") + " input[name=" + this[0].name + "]:checked").each(function (i, t) {
val += $(t).val() + ",";
});
break;
default:
break;
}
}
returnVal = val != null && re.test(val);
if (returnVal && !passMsgShow)
return returnVal;
if (msgModes.toLowerCase() == "alertmsg") {
$.alertMsg(this[0], returnVal);
} else {
$.aftInputMsg(this[0], returnVal);
}
return returnVal;
} catch (e) {
alert(e.message);
return false;
}
}
//两个提示消息的展示方式，可以自己重写
//alert()
$.alertMsg = function (object, checkResult) {
var msg;
if (checkResult) {
msg = $(object).attr("passMsg") == undefined ? "" : $(object).attr("passMsg");
} else {
msg = $(object).attr("errorMsg") == undefined ? "" : $(object).attr("errorMsg");
}
if (msg != "") alert(msg);
};
//在表单后面展示
$.aftInputMsg = function (object, checkResult) {
var $obj = $(object).parent().find("span[id$=Msg]");
if ($obj.length == 0)
$.create(object);
$obj = $(object).parent().find("span[id$=Msg]");
if (checkResult) {
$obj.html(($(object).attr("passMsg") == undefined) ? "" : $(object).attr("passMsg"));
} else {
$obj.html(($(object).attr("errorMsg") == undefined) ? "" : $(object).attr("errorMsg"));
}
};
$.addEvent = function () {
$("form[formCheck]").submit(function () { return $.formCheck(this); });
$("form[formCheck='realTime'] [dataType]").each(
function (index, object) {
if (object.type.toLowerCase() == "checkbox" || object.type.toLowerCase() == "radio") {
$("#" + $(object).parents("form").attr("id") + " input[name=" + object.name + "]").blur(
function () {
$(this).radioOrCheckBoxCheck();
}
);
} else {
$(object).blur(function () { $(this).inputCheck(true); });
}
});
//注册FckEditor编辑器失去焦点的事件
$("form[formCheck='realTime'] iframe[src*='InstanceName']").each(function () {
var regex = new RegExp(/(?:InstanceName=)(.+)&/gi);
var InstanceName = regex.exec(this.src)[1];
if ($(this).prevAll("textarea[id='" + InstanceName + "'][dataType]").length > 0) {
$(this).blur(function () {
$(this).prevAll("textarea[id='" + InstanceName + "'][dataType]").inputCheck(true);
});
}
});
};
$.create = function (object) {
var span = document.createElement("span");
span.id = $(object).attr("id") + "Msg";
$(object).parent().append(span);
}
})(jQuery);
//页面加载完毕 注册onsubmit事件
$(document).ready(function () {
$.addEvent();
});
