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 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 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
You might like
将数组写入txt文件 var_export
2009/04/21 PHP
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
js计算精度问题小结
2013/04/22 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
Python 的内置字符串方法小结
2016/03/15 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Django 实现图片上传和下载功能
2020/12/31 Python
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
九州传奇上机题
2014/07/10 面试题
在校生钳工实习自我鉴定
2013/09/19 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
开学第一天的感想
2015/08/10 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
golang操作rocketmq的示例代码
2022/04/06 Golang