本文实例讲述了jQuery扩展+xml实现表单验证功能的方法。分享给大家供大家参考，具体如下：
此处表单验证jQuery 引用jquery.1.8.2.js,md5.js
扩展提示信息,扩展验证方法(如果有正则表达式的话可以用默认方法)
rush:js;">
String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");};//ie下解决trim 方法问题
(function($) {
$.elementVal = new Array();
/**
********************************************************************************************************************************************
* ========自定义提示语==============================================================================================================
* ========regex、如果有正则表达式的话===============================================================================================
* ========successMsg、验证成功时====================================================================================================
* ========errorMsg、验证失败时======================================================================================================
* promptMsg、提示语=================================================================================================================***********************
**/
$.vfData = {
errorhtml:'
',pormpthtml:'
");
return false;
case 2:
formElement.css("color","green");
formElement.html($.vfData.pormpthtml+vfData.promptMsg);
break;
default:
formElement.html("");
return true;
}
} catch (e) {
}
},regexcheck : function(obj) {// 正则表达式验证
var regex = $.vfData[obj.fun].regex;
if (regex == null)
return false;
regex = new RegExp(regex);
return regex.test(obj.val.trim());
return regex.test(obj.val);
},createElementJson : function(obj) {// 根据表单的属性创建json对象以便以调用
var json = eval("({'val':'" + obj.val() + "'," + "'id':'"
+ obj.attr("id") + "'," + "'regex':'" + obj.attr("regex")
+ "'," + "'fun':'" + obj.attr("fun") + "','must':'"
+ obj.attr("must") + "'})");
return json;
},getFormElement : function(obj) {// 把需要验证的表单元素加到数组中
$.elementVal = new Array();
obj.find("input[id*='reg_']").each(function() {
$.elementVal.push($.utilfun.createElementJson($(this)));
});
},verification : function() {// 遍历验证
var size = $.elementVal.length;
var vfresult=true;
for (var i = size - 1; i >= 0; i--) {
var elementJson = $.elementVal[i];
var elementvfresult=$.utilfun.doverification(elementJson);
console.info(elementJson.id);
if(!elementvfresult){//给错误的表单元素添加锚点
$("#point").attr("href","#"+elementJson.id);
}
vfresult=vfresult&&elementvfresult;
}
return vfresult;
},evalmodth : function(obj) {
var funpakger = "$.verification.";
var thispakger = obj.fun;
var thismodth = ".vf(obj)";
var themodth = funpakger + thispakger + thismodth;
return eval(themodth);
},doverification : function(obj) {// 执行验证方法
if(obj.must == "true"){//为必填项时
var valisnull=$.verification._null.vf(obj);
if(valisnull&&obj.fun != "undefined"){//如果有验证方法的话
if($.utilfun.defaultverification(obj)){
return $.utilfun.evalmodth(obj);
}
}else {
if(obj.val.trim()==""){
return false;
}else{
return true;
}
}
}else{//不为必填项时
if(obj.fun != "undefined"){//如果有验证方法的话
if(obj.val.trim()!=""){
if($.utilfun.defaultverification(obj)){
return $.utilfun.evalmodth(obj);
}
}else{
$.utilfun.showPrompt(3,$.vfData["_null"]);
return true;
}
}else{
return true;
}
}
},defaultverification : function(obj) {// 必须验证的方法
var vfresult = true;
// vfresult = $.verification._null.vf(obj);//添加每个表单必须检验的方法
return vfresult;
},ajaxvf:function(url,params){//需要接口请求验证的
var num=0;
$.ajax({
type :"post",url : url,dataType:"xml",async : false,data : params,// contentType : "application/x-www-form-urlencoded; charset=utf-8",success:function(data){
var xmlobj= $.xml(data);
var result= $.getnode("CODE",xmlobj.find("RETURNINFO"));
if("0"!=result){
num=1;
}
}
});
return num;
}
};
/**
* ===============================================================================================================
* ========== 验证入口 =================================================================================
* ===============================================================================================================
*
* */
$.fn.regattrs = function() {
$.utilfun.getFormElement($(this));
var vfresult=$.utilfun.verification();
if(vfresult){
$(this).submit();
}else{
$("#point")[0].click();
}
};
/*
* 单个验证
*/
$.fn.regattr = function() {
$(this).blur(function() {
var elementJson = $.utilfun.createElementJson($(this));
$.utilfun.doverification(elementJson);
});
$(this).find("input[type!='password']").keyup(function() {
var elementJson = $.utilfun.createElementJson($(this));
$.utilfun.doverification(elementJson);
});
};
/*
* 获取光表时提示
*/
$.fn.prompt = function() {
$(this).focus(function() {
var elementJson = $.utilfun.createElementJson($(this));
if (elementJson.must) {
$.utilfun.showPrompt(2,elementJson);
}
});
};
/**
* ===============================================================================================================
* ========== 解决xml加载问题 =================================================================================
* ===============================================================================================================
*
* */
$.xml=function(data){
var xmlobj=null;
if(window.ActiveXObject){
var xml;
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.loadXML(data);
xmlobj=$(xml);
}else{
xmlobj=$(data);
}
return xmlobj;
};
//获取节点
$.getnode=function(key,obj){
var nodevalue=obj.children(key).text();
return nodevalue;
};
}(jQuery));
',pormpthtml:'");
return false;
case 2:
formElement.css("color","green");
formElement.html($.vfData.pormpthtml+vfData.promptMsg);
break;
default:
formElement.html("");
return true;
}
} catch (e) {
}
},regexcheck : function(obj) {// 正则表达式验证
var regex = $.vfData[obj.fun].regex;
if (regex == null)
return false;
regex = new RegExp(regex);
return regex.test(obj.val.trim());
return regex.test(obj.val);
},createElementJson : function(obj) {// 根据表单的属性创建json对象以便以调用
var json = eval("({'val':'" + obj.val() + "'," + "'id':'"
+ obj.attr("id") + "'," + "'regex':'" + obj.attr("regex")
+ "'," + "'fun':'" + obj.attr("fun") + "','must':'"
+ obj.attr("must") + "'})");
return json;
},getFormElement : function(obj) {// 把需要验证的表单元素加到数组中
$.elementVal = new Array();
obj.find("input[id*='reg_']").each(function() {
$.elementVal.push($.utilfun.createElementJson($(this)));
});
},verification : function() {// 遍历验证
var size = $.elementVal.length;
var vfresult=true;
for (var i = size - 1; i >= 0; i--) {
var elementJson = $.elementVal[i];
var elementvfresult=$.utilfun.doverification(elementJson);
console.info(elementJson.id);
if(!elementvfresult){//给错误的表单元素添加锚点
$("#point").attr("href","#"+elementJson.id);
}
vfresult=vfresult&&elementvfresult;
}
return vfresult;
},evalmodth : function(obj) {
var funpakger = "$.verification.";
var thispakger = obj.fun;
var thismodth = ".vf(obj)";
var themodth = funpakger + thispakger + thismodth;
return eval(themodth);
},doverification : function(obj) {// 执行验证方法
if(obj.must == "true"){//为必填项时
var valisnull=$.verification._null.vf(obj);
if(valisnull&&obj.fun != "undefined"){//如果有验证方法的话
if($.utilfun.defaultverification(obj)){
return $.utilfun.evalmodth(obj);
}
}else {
if(obj.val.trim()==""){
return false;
}else{
return true;
}
}
}else{//不为必填项时
if(obj.fun != "undefined"){//如果有验证方法的话
if(obj.val.trim()!=""){
if($.utilfun.defaultverification(obj)){
return $.utilfun.evalmodth(obj);
}
}else{
$.utilfun.showPrompt(3,$.vfData["_null"]);
return true;
}
}else{
return true;
}
}
},defaultverification : function(obj) {// 必须验证的方法
var vfresult = true;
// vfresult = $.verification._null.vf(obj);//添加每个表单必须检验的方法
return vfresult;
},ajaxvf:function(url,params){//需要接口请求验证的
var num=0;
$.ajax({
type :"post",url : url,dataType:"xml",async : false,data : params,// contentType : "application/x-www-form-urlencoded; charset=utf-8",success:function(data){
var xmlobj= $.xml(data);
var result= $.getnode("CODE",xmlobj.find("RETURNINFO"));
if("0"!=result){
num=1;
}
}
});
return num;
}
};
/**
* ===============================================================================================================
* ========== 验证入口 =================================================================================
* ===============================================================================================================
*
* */
$.fn.regattrs = function() {
$.utilfun.getFormElement($(this));
var vfresult=$.utilfun.verification();
if(vfresult){
$(this).submit();
}else{
$("#point")[0].click();
}
};
/*
* 单个验证
*/
$.fn.regattr = function() {
$(this).blur(function() {
var elementJson = $.utilfun.createElementJson($(this));
$.utilfun.doverification(elementJson);
});
$(this).find("input[type!='password']").keyup(function() {
var elementJson = $.utilfun.createElementJson($(this));
$.utilfun.doverification(elementJson);
});
};
/*
* 获取光表时提示
*/
$.fn.prompt = function() {
$(this).focus(function() {
var elementJson = $.utilfun.createElementJson($(this));
if (elementJson.must) {
$.utilfun.showPrompt(2,elementJson);
}
});
};
/**
* ===============================================================================================================
* ========== 解决xml加载问题 =================================================================================
* ===============================================================================================================
*
* */
$.xml=function(data){
var xmlobj=null;
if(window.ActiveXObject){
var xml;
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.loadXML(data);
xmlobj=$(xml);
}else{
xmlobj=$(data);
}
return xmlobj;
};
//获取节点
$.getnode=function(key,obj){
var nodevalue=obj.children(key).text();
return nodevalue;
};
}(jQuery));
调用方式
代码：