本文实例讲述了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(); /** ******************************************************************************************************************************************** * ========自定义提示语============================================================================================================== * ========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();//获取光标是提示信息 });
PS:这里再为大家提供几款关于xml操作的在线工具供大家参考使用:
在线XML/JSON互相转换工具:
http://tools.maopiaopiao.com/code/xmljson
在线格式化XML/在线压缩XML:
http://tools.maopiaopiao.com/code/xmlformat
XML在线压缩/格式化工具:
http://tools.maopiaopiao.com/code/xml_format_compress
XML代码在线格式化美化工具:
http://tools.maopiaopiao.com/code/xmlcodeformat
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery操作xml技巧总结》、《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。