好用的前端验证jquery,validate.js
<!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">通讯录管理 > 添加</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>