jQuery扩展+xml实现表单验证功能的方法

本文实例讲述了jQuery扩展+xml实现表单验证功能的方法。分享给大家供大家参考，具体如下：

此处表单验证jQuery 引用jquery.1.8.2.js,md5.js

扩展提示信息,扩展验证方法(如果有正则表达式的话可以用默认方法)

String.prototype.trim=function(){return this.replace(/(^s*)|(s*$)/g,"");};//ie下解决trim 方法问题
(function($) {
  $.elementVal = new Array();
  
  $.vfData = {
    errorhtml:' ',
    successhtml:' ',
    pormpthtml:' ',
    _null : {
      //successMsg : "",
      errorMsg : "不能为空！",
      promptMsg : "不能为中文"
    },
    _firstpwd:{
      regex:/^[a-z0-9_-]{6,18}$/,
      //successMsg : "",
      errorMsg : "密码格式不正确！",
      promptMsg : "6-16位字符(字母或数字),区分大小写"
    },
    _code:{
      regex:/^[a-z0-9_-]{6,18}$/,
      //successMsg : "",
      errorMsg : "机构代码不正确！",
      promptMsg : "机构代码为自填项！"
    },
    _secondpwd:{
      //successMsg : "",
      errorMsg : "两次密码不一致！,请确保初次密码格式正确",
      promptMsg : "请再次输入密码"
    },
    _email : {
      regex:/^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/,
      //successMsg : "",
      errorMsg : "邮箱地址格式不正确！",
      promptMsg : "邮箱格式为www@xxx.com"
    },
    _companyname : {
      //successMsg : "",
      errorMsg : "没有你输入的机构！",
      promptMsg : "请在所在的机构中选择"
    },
    _phone:{
      regex :/^1[3|4|5|8][0-9]d{4,8}$/,
      successMsg : "",
      errorMsg : "你输入的手机号格式不正确！",
      promptMsg : "输入你的的手机号码！"
    },
    _tel:{
      //regex :/^[0][1-9]{2,3}[-][1-9]{1}[0-9]{8}$/,
      regex :/^[0-9]{3,4}[-]?[0-9]{9}$/,
      successMsg : "",
      errorMsg : "你输入的电话格式不正确！",
      promptMsg : "格式固定 例如 010-88888888！"
    },
    _loginname:{
      regex:/^[a-zA-Z]{1,1}[a-z0-9A-Z]{5,16}$/,
      successMsg : "",
      errorMsg : "你输入的用户名格式不正确！",
      promptMsg : "6-12位字符(字母、数字、汉字),首位必须为字母,区分大小写"
    },
    _captcha:{
      regex:/^[a-z0-9A-Z]{4}$/,
      successMsg : "",
      errorMsg : "你输入的验证码格式不正确！",
      promptMsg : "请输入验证码！"
    }
  };
   
  $.firstpwd="";
  $.verification = {
    // 提示信息 0:正常、1:错误 、2:提示
    _def:{//如果没有自定义的验证的话直接调用就可以了$.verification._def(obj);
      vf:function(obj){
 var num = 0;
 if ($.utilfun.regexcheck(obj)) {
   num = 0;
 } else {
   num = 1;
 }
 return $.utilfun.showprompt(num, obj);
      }
    },
    _null : {//判断是否为空
      vf:function(obj){
 var num=0;
 if(obj.val.trim() == ""){
   num=1;
 }
 return $.utilfun.showprompt(num, obj,$.vfData["_null"]);
      }
    },
//===================================================需要特殊判断的=================================================================
    _companyname : {// 机构名称验证
      vf : function(obj) {
 var num = 1;
 for(var key in $.indexdata){
   if(obj.val.trim()==key){
     num=0;
     break;
   }
 }
 return $.utilfun.showprompt(num, obj);
      }
    },
    _firstpwd:{
      vf : function(obj) {
 var num = 0;
 if ($.utilfun.regexcheck(obj)) {
   $.firstpwd=obj.val;
   num = 0;
 }else{
   num=1;
 }
return $.utilfun.showprompt(num, obj);
      }
    },
    _secondpwd:{
      vf : function(obj) {
 var num = 0;
 var md5val=hex_md5(obj.val);
 if ($.firstpwd!=obj.val&&$.firstpwd!="") {
   num = 1;
 }else{
   $("#YHMM").val(md5val.toUpperCase());
 }
 return $.utilfun.showprompt(num, obj);
      }
    },
    _loginname:{//校验登录名的唯一性
      vf : function(obj) {
 if($.verification._def.vf(obj)){//先验证格式
   var params={type:1,value:obj.val};
   var num=$.utilfun.ajaxvf("/registeruserverify.go",params);
   var msg={errorMsg : "用户名已存在！"};
   return $.utilfun.showprompt(num, obj,msg);
 }
      }
    },
    _email : {
      vf : function(obj) {//校验邮箱的的唯一性
 if($.verification._def.vf(obj)){//先验证格式
   var params={type:2,value:obj.val};
   var num=$.utilfun.ajaxvf("/registeruserverify.go",params);
   var msg={errorMsg : "此邮箱已经注册,请更换邮箱！"};
   return $.utilfun.showprompt(num, obj,msg);
   }
      }
    },
    _phone:{
      vf:function(obj){//验证手机号的唯一性
 if($.verification._def.vf(obj)){//先验证格式
   var params={type:3,value:obj.val};
   var num=$.utilfun.ajaxvf("/registeruserverify.go",params);
   var msg={errorMsg : "此手机号已经注册,请更换手机号！"};
   return $.utilfun.showprompt(num, obj,msg);
   }
      }
    },
//===================================================能够直接用正则表达式判断的=====================================================
    _code:{
      vf:function(obj){
 return $.verification._def.vf(obj);
      }
    },
    _captcha:{
      vf:function(obj){
 return $.verification._def.vf(obj);
      }
    },
    _tel:{
      vf:function(obj){
 return $.verification._def.vf(obj);
      }
    }
  };
  
  $.utilfun = {
    // 显示提示信息
    showprompt : function(re, obj, vfData) {
      vfData = (vfData == null ? $.vfData[obj.fun]
   : vfData);//获取提示信息
      var formElement = $("#" + obj.id).parent().parent().find("p");
      try {
 switch (re) {
 case 0:
   formElement.html($.vfData.successhtml+(vfData.successMsg==null?"":vfData.successMsg));
   return true;
 case 1:
   formElement.css("color", "red");
   formElement.html($.vfData.errorhtml+vfData.errorMsg+"");
   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, obj,$.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=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));

调用方式

=====引入=======表单验证 js






  
    机构用户注册
    我已经注册，现在就登录
  
  
  
 
    




$(document).ready(function() {
  $("#point").click();//用锚点自动定位第一个验证失败的表单
  $("#submit").click(function() {//提交按钮
    $("#regform").regattrs();//注册方法自动验证表单中所有的元素
  });
  $("input").regattr();//失去光标时验证
  $("input").prompt();//获取光标是提示信息
});

PS：这里再为大家提供几款关于xml操作的在线工具供大家参考使用：

在线XML/JSON互相转换工具：
http://tools.jb51.net/code/xmljson

在线格式化XML/在线压缩XML：
http://tools.jb51.net/code/xmlformat

XML在线压缩/格式化工具：
http://tools.jb51.net/code/xml_format_compress

XML代码在线格式化美化工具：
http://tools.jb51.net/code/xmlcodeformat

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery操作xml技巧总结》、《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。