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


Posted in Javascript onDecember 25, 2016

本文实例讲述了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();//获取光标是提示信息
});
Javascript 相关文章推荐
jquery api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
JavaScript的Module模式编程深入分析
Aug 13 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
js实现图片切换(动画版)
Dec 25 #Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 #Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 #Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 #Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 #Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 #Javascript
web 屏蔽BackSpace键实例代码
Dec 24 #Javascript
You might like
PHP $_FILES函数详解
2011/03/09 PHP
php后门URL的防范
2013/11/12 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
PHP中的session安全吗?
2016/01/22 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
vue-router权限控制(简单方式)
2018/10/29 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
详解Python迭代和迭代器
2016/03/28 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
结构工程研究生求职信
2013/10/13 职场文书
企业军训感言
2014/02/08 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
2014年新生军训方案
2014/05/01 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
焦点访谈观后感
2015/06/11 职场文书
六五普法心得体会2016
2016/01/21 职场文书