文档章节

好用的前端验证jquery,validate.js

wsl_Mr
 wsl_Mr
发布于 2013/04/19 16:26
字数 1125
阅读 137
收藏 0
点赞 0
评论 0


 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqueryVidate</title>
<link rel="stylesheet" type="text/css" href="common/css/style.css"/>
<link rel="stylesheet" type="text/css" href="common/css/litsoft_global_style.css"/>
<link rel="stylesheet" type="text/css" href="common/css/litsoft_menu_style.css"/>
<link rel="stylesheet" type="text/css" href="common/css/uploadify.css"/>
<link rel="stylesheet" type="text/css" href="common/css/jquery.validate.css"/>
<link rel="stylesheet" type="text/css" href="common/css/other.css"/>
<script type="text/javascript"  src="common/js/jquery-1.6.js"></script>
<script type="text/javascript"  src="common/js/jquery.validate.js"></script>
<script type="text/javascript"  src="common/js/jquery.metadata.js"></script>
<script type="text/javascript"  src="common/js/i18n.js"></script>
<script type="text/javascript"  src="common/js/jquery.uploadify.v2.1.4.js"></script>
<script type="text/javascript"  src="common/js/swfobject.js"></script>
<script type="text/javascript"  src="common/js/tool.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
     jQuery("#addressForm").validate();  //开启监听
  //jqueryVidate自定义规则方法
  jQuery.validator.addMethod("validateFaxe", function(value, element) {
     var valFlag=true;
     var queryFaxes=document.getElementById('queryFaxes').value;
     if(queryFaxes!=null&&queryFaxes.length>0){
    var reg =/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
    if(!reg.test(queryFaxes)){ 
     valFlag=false;
    }  
     }
     return valFlag;
  },"格式不符合规范");
 
   //单位电话验证
  jQuery.validator.addMethod("validateCompanyPhone", function(value, element) {
    var valFlag=true;
    var queryCompanyPhone=document.getElementById('queryCompanyPhone').value;
      if(queryCompanyPhone!=null&&queryCompanyPhone.length>0){
    var reg =/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
    if(!reg.test(queryCompanyPhone)){ 
     valFlag=false;
    }  
     }
     return valFlag;
  },"格式不符合规范");
  //家庭电话验证
  jQuery.validator.addMethod("validateHousePhone", function(value, element) {
    var valFlag=true;
    var queryHousePhone=document.getElementById('queryHousePhone').value;
      if(queryHousePhone!=null&&queryHousePhone.length>0){
    var reg =/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
    if(!reg.test(queryHousePhone)){ 
     valFlag=false;
    }  
     }
     return valFlag;
  },"格式不符合规范");
  
  //邮编验证
  jQuery.validator.addMethod("validatePoseCode", function(value, element) {
    var valFlag=true;
    var queryPoseCode=document.getElementById('queryPoseCode').value;
      var reg =/^[1-9][0-9]{5}$/;
    if(queryPoseCode!=null&&queryPoseCode.length>0){
    
    if(!reg.test(queryPoseCode)) {  
     valFlag=false;
     }  
     }
       return valFlag;
     },"格式不符合规范");
 
  });
 
   function addcontractelectronfile(queueId,fileinfoid){
       $Upl(" <input type='hidden' value='"+fileinfoid+"' class='oa_input_standard'  name='fileinfoid'/></input>").insertAfter(queueId+" .cancel"); 
   }

 
 
</script>
<script type="text/javascript">
    jQuery.noConflict();
    var $Upl = jQuery;
    $Upl(document).ready(function() {
        $Upl("#uploadify").uploadify({
            'uploader'       : 'common/images/uploadify.swf',
            'script'         : 'http://10.1.40.175:9080/WY_BJFW/servlet/UploadFileServlet',
            'cancelImg'      : 'common/images/cancel.png',
            'folder'         : 'uploads',
            'queueID'        : 'custom-queue',
            'fileDesc'   : '支持格式:doc、pdf、txt',
            'fileExt'   : '*.doc;*.pdf;*.txt',
            'auto'           : true,
            'multi'          : false,
            'removeCompleted': false,
            'sizeLimit'      : 10485799,
            'simUploadLimit' : 1,
            'buttonText'     : '添加',
            'onCancel'   : function(event,queueId,fileObj,data) {//取消单个事件
             $Upl("#fileSize").val(data.allBytesTotal);
   },
            'onSelectOnce'   : function(event,data) {//选择文件事件
            $Upl("#fileSize").val(data.allBytesTotal);
   },
    'onComplete'  : function(event,queueId,fileObj,response,data) {//完成一次上传事件
    var filePN = response.split(";");//取回后台传来的值
    if(filePN[4]!=""){
      $Upl("#uploadify" +queueId).find(".hcicsContent").text(filePN[4]);
     }
   addcontractelectronfile('#uploadify'+queueId,filePN[0],filePN[1],filePN[2],filePN[3],filePN[4]);
   },

   'onAllComplete'  : function(event,data) {//完成所有文件上传事件
     $Upl("#fileSize").val("0");//所有上传完成重置剩余文件大小
   }

   });  
    });
</script>
</head>

<body>
 <div class="topbar">通讯录管理 &gt; 添加</div>
 <div class="conbox">
 <div class="tag">添加通讯录信息</div>
   <form id="addressForm" name="addressForm" method="post" action="" >
   <table class="stable tp0" cellSpacing="0" cellPadding="0"  border="0" >
    <tr  >
        <td width="15%" align="right">姓名:</td>
        <td width="35%" align="left">
            <input type="text" class="inbox width_p60 required" id="queryName" name="addressBook.name"  maxlength="50" />
            <font style="color:red;">*<span id = "sname"></span></font>
        </td>
        <td width="15%" align="right">性别:</td>
        <td width="35%" align="left">
            <select class="inbox" id="querySexCode" name="addressBook.sexCode">
            <option value="男">男</option>
            <option value="女">女</option>
            </select>
        </td>
    </tr>
    <tr >
        <td width="15%" align="right">分组:</td>
        <td width="35%" align="left">
             <select class="inbox" id="queryGroupingName" name="addressBook.addressGrouping.groupingID">
                 <option value="">请选择</option>
                 <option value="分组一"></option>
                 <option value="分组二"></option>
             </select>
         </td>
        <td width="15%" align="right">工作单位:</td>
        <td width="35%" align="left">
            <input type="text" class="inbox width_p60 required" id="queryOrganization" name="addressBook.organization"  />
            <font style="color:red;">*<span id = "sorganization"></span></font>
        </td>
    </tr>
    <tr >
        <td width="15%" align="right">职务:</td>
        <td width="35%" align="left">
             <select class="inbox" id="queryDutyCode" name="addressBook.dutyCode">
                 <option value="">请选择</option><option value="领导">领导</option>
                 <option value="秘书">秘书</option><option value="同事">同事</option>
                 <option value="朋友">朋友</option>
             </select>
         </td>
        <td width="15%" align="right">手机:</td>
        <td width="35%" align="left">
            <input type="text" class="inbox width_p60 required"  id="queryMobilePhone" name="addressBook.mobilePhone"  />
            <font style="color:red;">*<span id ="smobilePhone"></span></font>
        </td>
    </tr>
    <tr >
        <td width="15%" align="right">传真:</td>
        <td width="35%" align="left">
            <input type="text" class="inbox  width_p60 validateFaxe" id="queryFaxes" name="addressBook.faxes"  maxlength="50"/>
            <font style="color:red;"><span id="sfaxes"></span></font>
        </td>
        <td width="15%" align="right">单位电话:</td>
        <td width="35%" align="left">
        <input type="text" class="inbox  width_p60 validateCompanyPhone"  id="queryCompanyPhone" name="addressBook.companyPhone"/>
        <font style="color:red;"><span id="scompanyPhone"></span></font></td>
    </tr>
    <tr >
        <td width="15%" align="right">住宅电话:</td>
        <td width="35%" align="left">
            <input type="text" class="inbox  width_p60 validateHousePhone"  id="queryHousePhone" name="addressBook.housePhone" />
            <font style="color:red;"><span id="shousePhone"></span></font>
        </td>
        <td width="15%" align="right">家庭住址:</td>
        <td width="35%" align="left">
         <input type="text" class="inbox  width_p60" id="queryAddress" name="addressBook.address"  maxlength="100"/>
        </td>
    </tr>
    <tr >
        <td width="15%" align="right">邮编:</td>
        <td width="35%" align="left">
            <input type="text" class="inbox  width_p60 validatePoseCode"  id="queryPoseCode" name="addressBook.poseCode"  maxlength="50"/>
            <font style="color:red;"><span id="sposeCode"></span></font>
        </td>
        <td width="15%" align="right">电子邮箱:</td>
        <td width="35%" align="left">
            <input type="text" class="inbox  width_p60  email" id="queryEmail" name="addressBook.email"  maxlength="50"/>
            <font style="color:red;"><span id="semail"></span></font>
        </td>
    </tr>
    <tr>
       
         <td width="15%" align="left" colspan="4" style="padding-left:158px" >
             <input type="hidden" id="fileSize" value="0"/>
            <div id="custom-queue"></div>
             附件:<input id="uploadify" type="file" name="Filedata"  />
          
         </td>
           
    </tr>
    <tr >
     <td colspan="4" align="center">
     <input type="hidden" id="buttonuse" value="0"/>
     <input type="submit" value="保 存" class="btn"  />
     <input type="button" value="返 回" class="btn" onclick="javascript:goActionWithTarget('0','addreessBook_list.action','');"/>
     </td>
    </tr>    
  </table>
  </form>
  </div>
</body>
</html>

© 著作权归作者所有

共有 人打赏支持
wsl_Mr
粉丝 9
博文 70
码字总数 26504
作品 0
海淀
jQuery之validate验证表单

访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的 以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便 vali...

codingcoge
05/19
0
0
2011年12月最新JQuery插件汇总

jQuery的工具提示插件 Tipped jQuery表格插件 colResizable jQuery虚拟键盘插件 jQuery keyboard Minimit Gallery 用于显示相册、幻灯片、卷帘等效果 jQuery 幻灯效果显示插件 Diapo jQuery...

晨曦之光
2012/02/24
0
0
angular.js,backbone.js,ember.js区别

1 backbone. 对于初学者来说,我非常建议首先学习backbone 而不是jQuery. 因为jQuery提供的功能是操作DOM和Ajax数据传输. 而Backbone的功能和目的仅仅是提供一个javascript的MVC 实际针对Web...

造化玉碟
2014/04/05
0
2
自定义jQuery插件Step by Step

自定义jQuery插件Step by Step 1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是R...

wolf_su
2013/07/04
0
0
基于cropper.js的图片上传和裁剪

项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求。 功能: 1:点击选择图片...

祈澈姑娘
05/17
0
0
validation4jj-web数据验证

统一前端与后台的数据验证,由后台设置验证规则,映射成jquery validation框架的验证,前端减少数据验证的代码编写,提高在数据验证上开发的效率;错误样式统一,后台验证未通过时,使用jqu...

HeAntai
2013/01/29
0
0
jQuery 再探 event , jQuery 对于 DOM 的跨浏览器封装。

Javascript再探 event 事件。 我们知道浏览器中有很多的差异性,比如对于 浏览器中的 event 事件进行处理的方式, IE 明显的就和别的浏览器不一样。所以后来诞生了风靡前端的 jQuery 库。我原...

香吉士
2012/06/12
0
0
了解jQuery技巧来提高你的代码

1.测试并提升你的jQuery选择器水平 这个jQuery选择器实验室非常酷,它能在线免费使用,当然你也能下来到本地离线使用。这个测试页面包含复杂的HTML组合字段,然后你能尝试预定义使用各种jQu...

i33
2012/09/25
0
0
Zepto 使用中的一些注意点

前段时间完成了公司一个产品的 HTML5 触屏版,开发中使用了 Zepto 这个著名的 DOM 操作库。 为什么不是 jQuery 呢?因为 jQuery 的目标是兼容所有主流浏览器,这就意味着它的大量代码对移动端...

panpanhtai
2014/06/24
0
3
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
07/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

TensorFlow 线性回归 拟合

用tf 对 一次函数进行拟合 效果 loss 简单实现如下 import tensorflow as tfimport numpy as npimport matplotlib.pyplot as plt# 保存显示数据plotdata = {"batchsize": [], "los...

阿豪boy
8分钟前
0
0
JupyterLab安装地图插件

JupyterLab安装地图插件 (本文所述软件还在发展之中,欢迎加入开源项目,提供建议、测试和开发。) 在Jupyter中进行数据分析时,往往需要将数据叠加到地图上。简单的可以利用matplotlib/ec...

openthings
17分钟前
0
0
Coding and Paper Letter(八)

资源整理 1 Coding: 1.Python项目,由Allen Downey撰写的Think Python第二版的LaTeX源代码和支持代码。 ThinkPython2 2.R语言包h3jsr,h3jsr使用V8的神奇力量通过其javascript绑定提供对Ube...

胖胖雕
25分钟前
0
0
skiplist跳跃表

插入删除log(N) TODO

梦想游戏人
26分钟前
1
0
利用世界杯,读懂 Python 装饰器

Python 装饰器是在面试过程高频被问到的问题,装饰器也是一个非常好用的特性, 熟练掌握装饰器会让你的编程思路更加宽广,程序也更加 pythonic。 今天就结合最近的世界杯带大家理解下装饰器。...

p柯西
40分钟前
0
0
Xshell登录阿里云服务器ECS

Xshell登录阿里云服务器ECS 1. 参考资料: 1). 《阿里云服务器怎么用?阿里云服务器使用教程》 链接:http://www.cr173.com/html/50758_1.html 2). eagle-zhang的CSDN博客《Xshell连接不上阿...

SuShine
49分钟前
1
0
IDEA中的HTTP Client Editor测试API

在前后端分离项目,前后端通过api进行通信。如果用postman免费版进行api测试的话,由于无法保存测试脚本到文件,不方便前端查看。 你可以选择付费版。也可以利用IDEA自带的HTTP Client Edito...

hutaishi
52分钟前
0
0
解决“只能通过Chrome网上应用商店安装该程序”的方法

摘要 : 最近有些用户反映某个Chrome插件在安装的时候,提示“只能通过Chrome网上应用商店安装该程序”,为了解决这一问题,Chrome插件网带来了相关的解决方法。 某些用户在Chrome插件网下载了...

沧海一刀
53分钟前
0
0
通过UNIX域套接字传递文件描述符

  传送文件描述符是高并发网络服务编程的一种常见实现方式。Nebula 高性能通用网络框架即采用了UNIX域套接字传递文件描述符设计和实现。本文详细说明一下传送文件描述符的应用。 1. TCP服务...

Bwar
56分钟前
0
0
python操作Excle

# -*- coding: utf-8 -*-from openpyxl import load_workbook, Workbook#index:第几个sheet页,第一个sheet页的index为0def readExcle(filename,index): # 加载excle文件 wb = l......

淺陌离殇
58分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部