首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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();//获取光标是提示信息
});

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

- Author -

碉堡猫

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
vue filters的使用详解
Jun 11 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
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
IIS(7) 远程控制(1) Windows server 2019(5) https(7) Windows server 2016(6) 远程登录(2) Windows server 2008(5) 动静分离(1) Telnet(1) http(6)
You might like
php版微信小店API二次开发及使用示例
2016/11/12 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
vue实现在线预览pdf文件和下载（pdf.js）
2019/11/26 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
详解python实现数据归一化处理的方式：（0,1）标准化
2019/07/17 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
python Tornado框架的使用示例
2020/10/19 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
英国最大的体育&时尚零售公司：JD Sports
2017/12/13 全球购物
FLOS美国官网：意大利高级照明工艺的传奇
2018/08/07 全球购物
英国景点门票网站：attractiontix
2019/08/27 全球购物
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店：MyToys.ru
2019/10/14 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
银行优秀员工事迹材料
2014/05/29 职场文书
2014中考励志标语
2014/06/05 职场文书
2014最新离职证明范本
2014/09/12 职场文书
异地年检委托书范本
2014/09/24 职场文书
汉字听写大会观后感
2015/06/12 职场文书
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android