String.prototype.trim=function(){return this.replace(/(^/s*)|(/s*$)/g,"");};//ie下解決trim 方法問題(function($) {  $.elementVal = new Array();  /**   ********************************************************************************************************************************************   * ========自定義提示語==============================================================================================================   * ========regex、如果有正則表達式的話===============================================================================================   * ========successMsg、驗證成功時====================================================================================================   * ========errorMsg、驗證失敗時======================================================================================================   * promptMsg、提示語=================================================================================================================***********************    **/  $.vfData = {    errorhtml:'<img src="images/cuo_biao.png"> ',    successhtml:'<img src="images/dui_biao.png" /> ',    pormpthtml:'<img src="images/tishi_biao.png"> ',    _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+"<a id='"+obj.id+"' name='"+obj.id+"'></a>");          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加載問題  =================================================================================   * ===============================================================================================================   *   * */  $.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));

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>表單驗證</title>=====引入=======表單驗證 js</head><body><!-- 錨點 --><a id="aaa" name="aaa"></a><!-- 錨點 --><div id="content">  <div class="content_top">    <div class="register_jigou">機構用戶注冊</div>    <div class="content_top_login">我已經注冊，現在就<a href="/zzlc/jsp/login/login.jsp">登錄</a></div>  </div>  <!-- 表單開始  -->  <form id="regform" method="post" action="/userregister.go">    <div class="form_item">      <span class="label fl">機構簡稱：</span>      <div class="item_input fl">        <input disabled="disabled" autocomplete="off" id="reg_companysimplename" name="JGJC_SV" type="text" class="text" />        <input type="hidden" autocomplete="off" id="reg_companysimplename_form" name="JGJC_SV"/>      </div>      <p class="dui fl"></p>    </div>    <div class="form_item">      <span class="label fl">組織機構代碼：</span>      <div class="item_input fl">        <input disabled="disabled" autocomplete="off"  id="reg_companycode" name="ZZJGDM_SV"  type="text" class="text" />        <input type="hidden" autocomplete="off" id="reg_companycode_form" name="ZZJGDM_SV"/>        <a name="ZCDZ_SV"></a>      </div>      <p class="cuo fl"></p>    </div>    <div class="form_item">      <span class="label fl">機構類別：</span>      <div class="item_input fl" >        <input disabled="disabled" autocomplete="off" id="reg_companytype" name="DWLX_SV" type="text" class="text"/>        <input type="hidden" autocomplete="off" id="reg_companytype_form" name="DWLX_SV"/>      </div>      <p class="dui fl"></p>    </div>    <div class="form_item">      <span class="label fl">注冊地址：</span>      <div class="item_input fl">        <input disabled="disabled" autocomplete="off" id="reg_regaddress" name="ZCDZ_SV" type="text" class="text" />        <input type="hidden" autocomplete="off" id="reg_regaddress_form" name="ZCDZ_SV"/>      </div>      <p class="dui fl"></p>    </div>    <h3>個人信息</h3>    <div class="form_item">      <span class="label fl"><b>*</b>登錄名：</span>      <div class="item_input fl">        <input id="reg_loginname" fun="_loginname" value="wangjunadmin" name="YHM" must="true" type="text" class="text" />      </div>      <p class="dui fl"></p>    </div>    <input id="YHMM" value="" type="hidden" name="YHMM"></input>    <div class="form_item">      <span class="label fl"><b>*</b>登錄密碼：</span>      <div class="item_input fl">        <input id="reg_pwd" autocomplete="off" value="" type="password" fun="_firstpwd" must="true" class="text" />      </div>      <p class="dui fl"></p>    </div>    <div class="form_item">      <span class="label fl"><b>*</b>密碼確認：</span>      <div class="item_input fl">        <input md5="" autocomplete="off" id="reg_secondpwd" value="" fun="_secondpwd" must="true" type="password" class="text" />      </div>      <p class="dui fl"></p>    </div>    <div class="form_item">      <span class="label fl"><b>*</b>姓名：</span>      <div class="item_input fl">        <input name="XM" id="reg_name" value="" must="true" type="text" class="text" />      </div>      <p class="dui fl"></p>    </div>    <div class="form_item">      <span class="label fl"><b>*</b>性別：</span>      <div class="item_input fl" style="text-align: center;">      <input  type="hidden" class="text" value="男" name="XB_SV" id="XB_SV"/>        <select name="XB" id="reg_sex">          <option value="1">男</option>          <option value="2">女</option>          </select>      </div>      <p class="dui fl"></p>    </div>    <div class="form_item">      <span class="label fl"><b>*</b>電話：</span>      <div class="item_input fl">        <input name="DH" must="true" value="010-888888888" id="reg_tel" fun="_tel" type="text" class="text" />      </div>      <p class="dui fl"></p>    </div>    <div class="form_item">      <span class="label fl"><b>*</b>手機：</span>      <div class="item_input fl">        <input name="PHONE" must="true" value="18610740826" id="reg_phone" fun="_phone"  type="text" class="text" />      </div>      <p class="dui fl"></p>    </div>    <div class="form_item">      <span class="label fl"><b>*</b>電子郵箱：</span>      <div class="item_input fl">        <input id="reg_email" fun="_email" value="wj_dreamfly@163.com" name="MAIL" must="true" type="text" class="text" />      </div>      <p class="dui fl"></p>    </div>    <div class="form_item">      <span class="label fl"><b>*</b>聯系地址：</span>      <div class="item_input fl">        <input id="reg_homeaddress" name="LXDZ" type="text" value="朝陽區" must="true" class="text" />      </div>      <p class="dui fl"></p>    </div>    <div class="form_item">      <span class="label fl"><b>*</b>部門：</span>      <div class="item_input fl">        <input id="reg_emp" name="BM" type="text" value="信息部" must="true" class="text" />      </div>      <p class="dui fl"></p>    </div>    <div class="form_item">      <span class="label fl"><b>*</b>職務：</span>      <div class="item_input fl">        <input id="reg_duty" name="ZW" type="text" value="開發" must="true" class="text" />      </div>      <p class="dui fl"></p>    </div>    <div class="form_item">      <span class="label fl" style="color:#FFF">。</span>      <div class="login_btn fl">        <a href="javascript:void(0)" id="submit">        <span style="width:270px; line-height:3em; text-align: center; background-image:url(images/regbut1216.png); display:block;color: white; ">提交</span>        </a>      </div>    </div>  </form> <!-- 表單結束  -->    <a href="#aaa" id="point"></a></div><div id="footer"></div></body></html>$(document).ready(function() {  $("#point").click();//用錨點自動定位第一個驗證失敗的表單  $("#submit").click(function() {//提交按鈕    $("#regform").regattrs();//注冊方法自動驗證表單中所有的元素  });  $("input").regattr();//失去光標時驗證  $("input").prompt();//獲取光標是提示信息});