菜单

xml实现表单验证功能的方法_jquery_脚本之家

2020年3月16日 - 首页

澳门太阳集团,本文实例讲述了jQuery扩展+xml实现表单验证功能的方法。分享给大家供大家参考,具体如下:

本文实例讲述了jQuery实现遍历XML节点和属性的方法。分享给大家供大家参考,具体如下:

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

用jquery遍历xml网上已经有很多, 但是看了好多文章,
对于不指定属性名称的遍历方法却没有

扩展提示信息,扩展验证方法

研究了一下, 好像jquery没有attributes. 还是要借助于原生态的JS

String.prototype.trim=function(){return this.replace;};//ie下解决trim 方法问题 { $.elementVal = new Array(); /** ******************************************************************************************************************************************** * ========自定义提示语============================================================================================================== * ========regex、如果有正则表达式的话=============================================================================================== * ========successMsg、验证成功时==================================================================================================== * ========errorMsg、验证失败时====================================================================================================== * promptMsg、提示语=================================================================================================================*********************** **/ $.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+*$/, //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; vf:function{ var num = 0; if ($.utilfun.regexcheck { num = 0; } else { num = 1; } return $.utilfun.showPrompt; } }, _null : {//判断是否为空 vf:function{ var num=0; if{ num=1; } return $.utilfun.showPrompt(num, obj,$.vfData["_null"]); } },//===================================================需要特殊判断的================================================================= _companyname : {// 机构名称验证 vf : function { var num = 1; for(var key in $.indexdata){ if{ num=0; break; } } return $.utilfun.showPrompt; } }, _firstpwd:{ vf : function { var num = 0; if ($.utilfun.regexcheck { $.firstpwd=obj.val; num = 0; }else{ num=1; } return $.utilfun.showPrompt; } }, _secondpwd:{ vf : function { var num = 0; var md5val=hex_md5; if ($.firstpwd!=obj.val&&$.firstpwd!="") { num = 1; }else{ $.val; } return $.utilfun.showPrompt; } }, _loginname:{//校验登录名的唯一性 vf : function { if($.verification._def.vf{//先验证格式 var params={type:1,value:obj.val}; var num=$.utilfun.ajaxvf("/registeruserverify.go",params); var msg={errorMsg : "用户名已存在!"}; return $.utilfun.showPrompt; } } }, _email : { vf : function {//校验邮箱的的唯一性 if($.verification._def.vf{//先验证格式 var params={type:2,value:obj.val}; var num=$.utilfun.ajaxvf("/registeruserverify.go",params); var msg={errorMsg : "此邮箱已经注册,请更换邮箱!"}; return $.utilfun.showPrompt; } } }, _phone:{ vf:function{//验证手机号的唯一性 if($.verification._def.vf{//先验证格式 var params={type:3,value:obj.val}; var num=$.utilfun.ajaxvf("/registeruserverify.go",params); var msg={errorMsg : "此手机号已经注册,请更换手机号!"}; return $.utilfun.showPrompt; } } },//===================================================能够直接用正则表达式判断的===================================================== _code:{ vf:function{ return $.verification._def.vf; } }, _captcha:{ vf:function{ return $.verification._def.vf; } }, _tel:{ vf:function{ return $.verification._def.vf; } } }; /** * ================================================================================================================================= * ================公共方法========================================================================================================= * ================================================================================================================================= */ $.utilfun = { // 显示提示信息 showPrompt : function { vfData = (vfData == null ? $.vfData[obj.fun] : vfData);//获取提示信息 var formElement = $.parent; try { switch  { case 0: formElement.html($.vfData.successhtml+(vfData.successMsg==null?"":vfData.successMsg)); return true; case 1: formElement.css; formElement.html($.vfData.errorhtml+vfData.errorMsg+""); return false; case 2: formElement.css; formElement.html($.vfData.pormpthtml+vfData.promptMsg); break; default: formElement.html; return true; } } catch  { } }, regexcheck : function {// 正则表达式验证 var regex = $.vfData[obj.fun].regex; if  return false; regex = new RegExp; return regex.test; return regex.test; }, createElementJson : function {// 根据表单的属性创建json对象以便以调用 var json = eval(" + "'," + "'id':'" + obj.attr + "'," + "'regex':'" + obj.attr + "'," + "'fun':'" + obj.attr + "','must':'" + obj.attr; return json; }, getFormElement : function {// 把需要验证的表单元素加到数组中 $.elementVal = new Array(); obj.find.each { $.elementVal.push($.utilfun.createElementJson; }, 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; console.info; if{//给错误的表单元素添加锚点 $.attr("href","#"+elementJson.id); } vfresult=vfresult&&elementvfresult; } return vfresult; }, evalmodth : function { var funpakger = "$.verification."; var thispakger = obj.fun; var thismodth = ".vf"; var themodth = funpakger + thispakger + thismodth; return eval; }, doverification : function {// 执行验证方法 if{//为必填项时 var valisnull=$.verification._null.vf; if(valisnull&&obj.fun != "undefined"){//如果有验证方法的话 if($.utilfun.defaultverification{ return $.utilfun.evalmodth; } }else { if{ return false; }else{ return true; } } }else{//不为必填项时 if(obj.fun != "undefined"){//如果有验证方法的话 if{ if($.utilfun.defaultverification{ return $.utilfun.evalmodth; } }else{ $.utilfun.showPrompt(3, obj,$.vfData["_null"]); return true; } }else{ return true; } } }, defaultverification : function {// 必须验证的方法 var vfresult = true; // vfresult = $.verification._null.vf;//添加每个表单必须检验的方法 return vfresult; }, ajaxvf:function{//需要接口请求验证的 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{ var xmlobj= $.xml; var result= $.getnode("CODE",xmlobj.find; if{ num=1; } } }); return num; } }; /** * =============================================================================================================== * ========== 验证入口 ================================================================================= * =============================================================================================================== * * */ $.fn.regattrs = function() { $.utilfun.getFormElement; var vfresult=$.utilfun.verification{ $; }else{ $; } }; /* * 单个验证 */ $.fn.regattr = function.blur { var elementJson = $.utilfun.createElementJson; $.utilfun.doverification; $.find("input[type!='password']").keyup { var elementJson = $.utilfun.createElementJson; $.utilfun.doverification; }; /* * 获取光表时提示 */ $.fn.prompt = function.focus { var elementJson = $.utilfun.createElementJson; if  { $.utilfun.showPrompt; }; /** * =============================================================================================================== * ========== 解决xml加载问题 ================================================================================= * =============================================================================================================== * * */ $.xml=function{ var xmlobj=null; if{ var xml; xml = new ActiveXObject; xml.async = false; xml.loadXML; }else{ xmlobj=$; } return xmlobj; }; //获取节点 $.getnode=function{ var nodevalue=obj.children; return nodevalue; };};

表单验证=====引入=======表单验证 js  机构用户注册 我已经注册,现在就登录    $.ready { $;//用锚点自动定位第一个验证失败的表单 $.click {//提交按钮 $.regattrs();//注册方法自动验证表单中所有的元素 }); $;//失去光标时验证 $;//获取光标是提示信息});
//用于缩进, 根据节点级别var M_DOT = 1;//递归函数, 用于遍历XML, 同时打印出来function fn{ //定义一个变量, 用于缩进 var dotString = ""; //根据缩进量, 得到缩进的长度 for(j = 1; j <= M_DOT; j++){ dotString += ""; } //jquery不支持attributes属性集, 转为原生js, 并赋给myObj变量 var myObj = obj[0].attributes; //打印缩进 $.append //打印属性集nodeName, nodeValue为原生JS, 分别表示为属性的名称, 和属性值 $.each.append[0].nodeName) + "=<u>" +  + "</u>" ); }) //打印节点的文本 //$.append + "</b><br/>"); //打印换行 $.append; //判断DOM有无子DOM if{ //如果有, 遍历之 obj.children{ //缩进量加一 M_DOT++; //递归遍历子DOM fn; //缩进量加一 M_DOT--; }) }else{ //如果没有子DOM, 返回false return false; }}//程序入口$.ready { //ajax获取xml数据, 详细用法见jquery手册 $.get('config.xml', function.find.length; //找到xml顶级结点. :就是查找第一个DOM. 详细说明见jquery手册 //find, children(), each, 以及后面用到的 append 等请查阅jquery手册 $.children{ //找到顶级结点的子结点, 并把子结点对象传给fn函数 fn;

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

附一个XML文件

在线XML/JSON互相转换工具:

请取名config.xml放在和以上js同目录下, 并都放在站点中

在线格式化XML/在线压缩XML:

  李华 男 1978.9.12 92 Java Oracle C Sharp SQL Server   李寻欢 男 1981.4.19 58 UML C Sharp XML SQL Server 

XML在线压缩/格式化工具:

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

XML代码在线格式化美化工具:

在线XML/JSON互相转换工具:

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

在线格式化XML/在线压缩XML:

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

XML在线压缩/格式化工具:

xml代码在线格式化美化工具:

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图