jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2016-04-08 11:41
816 查看
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<title>title</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="http://www.d1net.com/statics/css/formguide/136/style.css">
<script src="http://www.d1net.com/statics/js/jquery.min.js"></script>
</head>
<body>
<div class="container">
<img src="http://www.d1net.com/statics/images/formguide/136/img01.jpg" alt="">
<div class="main">
<form method="post" name="form" id="form" action="URL">
<div class="box">
<div class="tip">
<span class="matter1">1.目前贵公司服务器规模有多少？</span>
<input type="text" value="" name="info[scale]" class="fn-tinput" placeholder="必填" required data-msg-required="不能为空"/>
</div>
</div>
<div class="box">
<div class="tip">
<p class="matter2">2.贵公司IT架构对云计算的使用现状是？</p>
</div>
<div class="options">
<span class="radios"><input name="info[statuss]" type="radio" value="完全传统IT架构" required >A. 完全传统IT架构</span>
<span class="radios"><input name="info[statuss]" type="radio" value="已经使用虚拟化">B. 已经使用虚拟化</span>
<span class="radios"><input name="info[statuss]" type="radio" value="已经开始云的使用">C. 已经开始云的使用</span>
<span for="info[statuss]" class="error"></span>
</div>
</div>
<div class="box">
<div class="tip">
<p class="matter2">3.如果贵公司当前已经使用虚拟化部署，正在使用的虚拟机的数量是多少台？</p>
</div>
<div class="options">
<span class="radios"><input name="info[Virtualization]" type="radio" value="0~200台" required>A．0~200台</span>
<span class="radios"><input name="info[Virtualization]" type="radio" value="200~500台" >B. 200~500台</span>
<span class="radios"><input name="info[Virtualization]" type="radio" value="大于1000台">C. 大于1000台</span>
<span for="info[Virtualization]" class="error"></span>
</div>
</div>
<div class="box">
<div class="tip">
<p class="matter2">4.如果已经开始使用云计算，哪些工作负载或应用已部署在云计算上？</p>
</div>
<div class="options">
<span class="radios"><input name="info[w_cloud]" type="checkbox" value="开发测试" required >A．开发测试</span>
<span class="radios"><input name="info[w_cloud]" type="checkbox" value="协同办公">B.协同办公</span>
<span class="radios"><input name="info[w_cloud]" type="checkbox" value="电子商务">C.电子商务</span>
<span class="radios"><input name="info[w_cloud]" type="checkbox" value="桌面云">D.桌面云</span>
<span class="radios"><input name="info[w_cloud]" type="checkbox" value="大数据">E. 大数据</span>
<span class="radios"><input name="info[w_cloud]" type="checkbox" value="存储备份">F. 存储备份</span>
<span class="radios"><input name="info[w_cloud]" type="checkbox" value="文件共享">G. 文件共享</span>
<span class="radios"><input name="info[w_cloud]" type="checkbox" value="行业业务应用">H.行业业务应用</span>
<span for="info[w_cloud]" class="error"></span>
</div>
</div>
<div class="box">
<div class="tip">
<p class="matter2">5.对于部署在云上的工作负载，请选择您所使用的云环境？（根据上题）</p>
</div>
<div class="options">
<span class="radios"><input name="info[environment]" type="radio" value="Public IaaS" >A.Public IaaS</span>
<span class="radios"><input name="info[environment]" type="radio" value="Private Cloud">B.Private Cloud</span>
<span class="radios"><input name="info[environment]" type="radio" value="PaaS">C.PaaS</span>
<span class="radios"><input name="info[environment]" type="radio" value="SaaS">D.SaaS</span>
<span class="radios"><input name="info[environment]" type="radio" value="托管云">E.托管云</span>
<span for="info[environment]" class="error"></span>
</div>
</div>
<div class="box">
<div class="tip">
<p class="matter2">6.未来1年还考虑将哪些工作负载或应用向云计算迁移?</p>
</div>
<div class="options">
<span class="radios"><input name="info[future]" type="checkbox" value="企业核心应用" >A.企业核心应用</span>
<span class="radios"><input name="info[future]" type="checkbox" value="人力资源管理">B.人力资源管理</span>
<span class="radios"><input name="info[future]" type="checkbox" value="供应链管理">C.供应链管理</span>
<span class="radios"><input name="info[future]" type="checkbox" value="客户关系管理">D.客户关系管理</span>
<span class="radios"><input name="info[future]" type="checkbox" value="财务管理">E. 财务管理</span>
<span class="radios"><input name="info[future]" type="checkbox" value="营销管理">F.营销管理</span>
<span class="radios"><input name="info[future]" type="checkbox" value="其他">G.其他</span>
<span for="info[future]" class="error"></span>
</div>
</div>
<div class="box">
<div class="tip">
<p class="matter2">7.未来2年，如下哪些模式符合贵公司IT发展策略?</p>
</div>
<div class="options">
<span class="radios"><input name="info[strategy]" type="checkbox" value="混合云" >A.混合云</span>
<span class="radios"><input name="info[strategy]" type="checkbox" value="私有云+传统IT">B.私有云+传统IT</span>
<span class="radios"><input name="info[strategy]" type="checkbox" value="全部迁移到公有云">C.全部迁移到公有云</span>
<span class="radios"><input name="info[strategy]" type="checkbox" value="开始使用Devops 技术">D.开始使用Devops 技术</span>
<span class="radios"><input name="info[strategy]" type="checkbox" value="IT运维外包">E.IT运维外包</span>
<span for="info[strategy]" class="error"></span>
</div>
</div>
<div class="box">
<div class="tip">
<p class="matter2">8.贵公司是否有计划购买云计算相关产品及解决方案？</p>
</div>
<div class="options">
<span
fb13
class="radios"><input name="info[plan_f]" type="radio" value="是 (1~3个月)" >A.是 (1~3个月)</span>
<span class="radios"><input name="info[plan_f]" type="radio" value="是 (4~6个月)">B.是 (4~6个月)</span>
<span class="radios"><input name="info[plan_f]" type="radio" value="是 (6~12个月)">C.是 (6~12个月)</span>
<span class="radios"><input name="info[plan_f]" type="radio" value="是 (1年以后)">D.是 (1年以后)</span>
<span class="radios"><input name="info[plan_f]" type="radio" value="不确定">E 不确定</span>
<span for="info[plan_f]" class="error"></span>
</div>
</div>
<div class="box">
<div class="tip">
<p class="matter2">9.如是，贵单位预计对此项目的投资规模为（以人民币计算）：</p>
</div>
<div class="options">
<span class="radios"><input name="info[predict]" type="radio" value="50万元以下" >A.50万元以下</span>
<span class="radios"><input name="info[predict]" type="radio" value="50万-100万">B.50万-100万</span>
<span class="radios"><input name="info[predict]" type="radio" value="100-500万元以内">C.100-500万元以内</span>
<span class="radios"><input name="info[predict]" type="radio" value="500万元以上">D.500万元以上</span>
<span class="radios"><input name="info[predict]" type="radio" value="尚未确定">E.尚未确定</span>
<span class="radios"><input name="info[predict]" type="radio" value="无">F.无</span>
<span for="info[predict]" class="error"></span>
</div>
</div>
<div class="box">
<div class="tip">
<p class="matter2">10.贵单位的预算资金状况是：</p>
</div>
<div class="options">
<span class="radios"><input name="info[Budget]" type="radio" value="正在申请" >A.正在申请</span>
<span class="radios"><input name="info[Budget]" type="radio" value="已申请到位">B.已申请到位</span>
<span class="radios"><input name="info[Budget]" type="radio" value="已申请未到位">C.已申请未到位</span>
<span class="radios"><input name="info[Budget]" type="radio" value="未申请">D.未申请</span>
<span class="radios"><input name="info[Budget]" type="radio" value="不详">E.不详</span>
<span for="info[Budget]" class="error"></span>
</div>
</div>
<div class="box" style="border-bottom: 1px solid #00b388;">
<div class="tip">
<p class="matter2">11.您当前合作的云计算厂商？(可多选)</p>
</div>
<div class="options">
<span class="radios"><input name="info[vendor]" type="checkbox" value="HP" >A.HP</span>
<span class="radios"><input name="info[vendor]" type="checkbox" value="IBM">B.IBM</span>
<span class="radios"><input name="info[vendor]" type="checkbox" value="华为">C.华为</span>
<span class="radios"><input name="info[vendor]" type="checkbox" value="VMware">D.VMware</span>
<span class="radios"><input name="info[vendor]" type="checkbox" value="微软">E.微软 </span>
<span class="radios"><input name="info[vendor]" type="checkbox" value="Dell">F.Dell</span>
<span class="radios" ><input name="info[vendor]" type="checkbox" value="其他OpenStack云方案供应商" id="white">G.其他OpenStack云方案供应商<input type="text" name="info[vendor_other]" id=""><span id="test1"></span></span>
<span for="info[vendor]" class="error"></span>
<script type="text/javascript">
$("#white").change(function(){
if($("#white").is(':checked')){
$("#test1").text("必填").css('color','#ff8d6d').css('font-size','16px');
if($("#test1").val()==''){ return false;alert('bitian');}
}
})
</script>
</div>
</div>
<div class="informations">
<div class="infor">
<span class="fields info">姓名： <input type="text" value="" name="info[name]" class="fn-tinput" placeholder="必填" required data-msg-required="不能为空"/></span>
<span class="fields info">部门： <input type="text" value="" name="info[bme]" class="fn-tinput" placeholder="必填" required data-msg-required="不能为空"/></span>
<span class="fields info">职位： <input type="text" value="" name="info[position]" class="fn-tinput" placeholder="必填" required data-msg-required="不能为空"/></span>
<span class="fields info">公司： <input type="text" value="" name="info[company]" class="fn-tinput" placeholder="必填" required data-msg-required="不能为空"/></span>
<span class="fields info">座机： <input type="text" value="" name="info[tel]" class="fn-tinput" placeholder="手机号" required data-rule-phone="true" data-msg-required="请输入座机号" data-msg-mobile="请输入正确格式" /></span>
<span class="fields info">手机： <input type="text" value="" name="info[phone]" class="fn-tinput" placeholder="手机号" required data-rule-mobile="true" data-msg-required="请输入手机号" data-msg-mobile="请输入正确格式" /></span>
<span class="fields mail">E-mail：<input type="email" value="" name="info[email]" class="fn-tinput" placeholder="请输入email地址" required data-rule-email="true" data-msg-required="请输入email地址" data-msg-email="请输入正确的email地址" /></span>
</div>
</div>
<div class="btns">
<input type="submit" value="提 交" class="btn" id="submitss" name="dosubmit" />
</div>
</form>
</div>
<img src="http://www.d1net.com/statics/images/formguide/136/img03.jpg" alt="">
</div>
<script src="http://www.d1net.com/statics/js/formguide/jquery.validate.js"></script>
<script>
$(function(){
//jquery.validate
$("#form").validate({
submitHandler: function() {
//验证通过后 的js代码写在这里
$("#form").ajaxSubmit();
}
})
//submitHandler: function(editform) {
// var options = {
// url : "",
// type : "post" ,
// dataType:'json',
// target : "#loader",
// error: function(){alert("服务器没有返回数据，可能服务器忙，请重试");},
// onwait : "正在处理信息，请稍候...",
// success: function(response){
//$("#loader").fadeIn(500).html(response.data).fadeOut(500);
// $('#editform').hide(2000);
// }
// };
// setTimeout((function(opt){
// return function(){
// $('#editform').ajaxSubmit(opt);
// }
// })(options), 300);
// return false;
// }
})
//下面是一些常用的验证规则扩展
/*-------------验证插件配置 懒人建站http://www.51xuediannao.com/-------------*/
//配置错误提示的节点，默认为label，这里配置成 span （errorElement:'span'）
$.validator.setDefaults({
errorElement:'span'
});
//配置通用的默认提示语
$.extend($.validator.messages, {
required: '必选',
equalTo: "请再次输入相同的值"
});
/*-------------扩展验证规则 懒人建站http://www.51xuediannao.com/-------------*/
//邮箱
jQuery.validator.addMethod("mail", function (value, element) {
var mail = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/;
return this.optional(element) || (mail.test(value));
}, "邮箱格式不对");
//电话验证规则
jQuery.validator.addMethod("phone", function (value, element) {
var phone = /^0\d{2,3}-\d{7,8}$/;
return this.optional(element) || (phone.test(value));
}, "电话格式如：0371-68787027");
//区号验证规则
jQuery.validator.addMethod("ac", function (value, element) {
var ac = /^0\d{2,3}$/;
return this.optional(element) || (ac.test(value));
}, "区号如：010或0371");
//无区号电话验证规则
jQuery.validator.addMethod("noactel", function (value, element) {
var noactel = /^\d{7,8}$/;
return this.optional(element) || (noactel.test(value));
}, "电话格式如：68787027");
//手机验证规则
jQuery.validator.addMethod("mobile", function (value, element) {
var mobile = /^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) || (mobile.test(value));
}, "手机格式不对");
//邮箱或手机验证规则
jQuery.validator.addMethod("mm", function (value, element) {
var mm = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) || (mm.test(value));
}, "格式不对");
//电话或手机验证规则
jQuery.validator.addMethod("tm", function (value, element) {
var tm=/(^1[3|4|5|7|8]\d{9}$)|(^\d{3,4}-\d{7,8}$)|(^\d{7,8}$)|(^\d{3,4}-\d{7,8}-\d{1,4}$)|(^\d{7,8}-\d{1,4}$)/;
return this.optional(element) || (tm.test(value));
}, "格式不对");
//年龄
jQuery.validator.addMethod("age", function(value, element) {
var age = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
return this.optional(element) || (age.test(value));
}, "不能超过120岁");
///// 20-60 /^([2-5]\d)|60$/
//传真
jQuery.validator.addMethod("fax",function(value,element){
var fax = /^(\d{3,4})?[-]?\d{7,8}$/;
return this.optional(element) || (fax.test(value));
},"传真格式如：0371-68787027");
//验证当前值和目标val的值相等 相等返回为 false
jQuery.validator.addMethod("equalTo2",function(value, element){
var returnVal = true;
var id = $(element).attr("data-rule-equalto2");
var targetVal = $(id).val();
if(value === targetVal){
returnVal = false;
}
return returnVal;
},"不能和原始密码相同");
//大于指定数
jQuery.validator.addMethod("gt",function(value, element){
var returnVal = false;
var gt = $(element).data("gt");
if(value > gt && value != ""){
returnVal = true;
}
return returnVal;
},"不能小于0 或空");
//汉字
jQuery.validator.addMethod("chinese", function (value, element) {
var chinese = /^[\u4E00-\u9FFF]+$/;
return this.optional(element) || (chinese.test(value));
}, "格式不对");
//指定数字的整数倍
jQuery.validator.addMethod("times", function (value, element) {
var returnVal = true;
var base=$(element).attr('data-rule-times');
if(value%base!=0){
returnVal=false;
}
return returnVal;
}, "必须是发布赏金的整数倍");
//身份证
jQuery.validator.addMethod("idCard", function (value, element) {
var isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//(15位)
var isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;//(18位)
return this.optional(element) || (isIDCard1.test(value)) || (isIDCard2.test(value));
}, "格式不对");
</script>
</body>
</html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<title>title</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="http://www.d1net.com/statics/css/formguide/136/style.css">
<script src="http://www.d1net.com/statics/js/jquery.min.js"></script>
</head>
<body>
<div class="container">
<img src="http://www.d1net.com/statics/images/formguide/136/img01.jpg" alt="">
<div class="main">
<form method="post" name="form" id="form" action="URL">
<div class="box">
<div class="tip">
<span class="matter1">1.目前贵公司服务器规模有多少？</span>
<input type="text" value="" name="info[scale]" class="fn-tinput" placeholder="必填" required data-msg-required="不能为空"/>
</div>
</div>
<div class="box">
<div class="tip">
<p class="matter2">2.贵公司IT架构对云计算的使用现状是？</p>
</div>
<div class="options">
<span class="radios"><input name="info[statuss]" type="radio" value="完全传统IT架构" required >A. 完全传统IT架构</span>
<span class="radios"><input name="info[statuss]" type="radio" value="已经使用虚拟化">B. 已经使用虚拟化</span>
<span class="radios"><input name="info[statuss]" type="radio" value="已经开始云的使用">C. 已经开始云的使用</span>
<span for="info[statuss]" class="error"></span>
</div>
</div>
<div class="box">
<div class="tip">
<p class="matter2">3.如果贵公司当前已经使用虚拟化部署，正在使用的虚拟机的数量是多少台？</p>
</div>
<div class="options">
<span class="radios"><input name="info[Virtualization]" type="radio" value="0~200台" required>A．0~200台</span>
<span class="radios"><input name="info[Virtualization]" type="radio" value="200~500台" >B. 200~500台</span>
<span class="radios"><input name="info[Virtualization]" type="radio" value="大于1000台">C. 大于1000台</span>
<span for="info[Virtualization]" class="error"></span>
</div>
</div>
<div class="box">
<div class="tip">
<p class="matter2">4.如果已经开始使用云计算，哪些工作负载或应用已部署在云计算上？</p>
</div>
<div class="options">
<span class="radios"><input name="info[w_cloud]" type="checkbox" value="开发测试" required >A．开发测试</span>
<span class="radios"><input name="info[w_cloud]" type="checkbox" value="协同办公">B.协同办公</span>
<span class="radios"><input name="info[w_cloud]" type="checkbox" value="电子商务">C.电子商务</span>
<span class="radios"><input name="info[w_cloud]" type="checkbox" value="桌面云">D.桌面云</span>
<span class="radios"><input name="info[w_cloud]" type="checkbox" value="大数据">E. 大数据</span>
<span class="radios"><input name="info[w_cloud]" type="checkbox" value="存储备份">F. 存储备份</span>
<span class="radios"><input name="info[w_cloud]" type="checkbox" value="文件共享">G. 文件共享</span>
<span class="radios"><input name="info[w_cloud]" type="checkbox" value="行业业务应用">H.行业业务应用</span>
<span for="info[w_cloud]" class="error"></span>
</div>
</div>
<div class="box">
<div class="tip">
<p class="matter2">5.对于部署在云上的工作负载，请选择您所使用的云环境？（根据上题）</p>
</div>
<div class="options">
<span class="radios"><input name="info[environment]" type="radio" value="Public IaaS" >A.Public IaaS</span>
<span class="radios"><input name="info[environment]" type="radio" value="Private Cloud">B.Private Cloud</span>
<span class="radios"><input name="info[environment]" type="radio" value="PaaS">C.PaaS</span>
<span class="radios"><input name="info[environment]" type="radio" value="SaaS">D.SaaS</span>
<span class="radios"><input name="info[environment]" type="radio" value="托管云">E.托管云</span>
<span for="info[environment]" class="error"></span>
</div>
</div>
<div class="box">
<div class="tip">
<p class="matter2">6.未来1年还考虑将哪些工作负载或应用向云计算迁移?</p>
</div>
<div class="options">
<span class="radios"><input name="info[future]" type="checkbox" value="企业核心应用" >A.企业核心应用</span>
<span class="radios"><input name="info[future]" type="checkbox" value="人力资源管理">B.人力资源管理</span>
<span class="radios"><input name="info[future]" type="checkbox" value="供应链管理">C.供应链管理</span>
<span class="radios"><input name="info[future]" type="checkbox" value="客户关系管理">D.客户关系管理</span>
<span class="radios"><input name="info[future]" type="checkbox" value="财务管理">E. 财务管理</span>
<span class="radios"><input name="info[future]" type="checkbox" value="营销管理">F.营销管理</span>
<span class="radios"><input name="info[future]" type="checkbox" value="其他">G.其他</span>
<span for="info[future]" class="error"></span>
</div>
</div>
<div class="box">
<div class="tip">
<p class="matter2">7.未来2年，如下哪些模式符合贵公司IT发展策略?</p>
</div>
<div class="options">
<span class="radios"><input name="info[strategy]" type="checkbox" value="混合云" >A.混合云</span>
<span class="radios"><input name="info[strategy]" type="checkbox" value="私有云+传统IT">B.私有云+传统IT</span>
<span class="radios"><input name="info[strategy]" type="checkbox" value="全部迁移到公有云">C.全部迁移到公有云</span>
<span class="radios"><input name="info[strategy]" type="checkbox" value="开始使用Devops 技术">D.开始使用Devops 技术</span>
<span class="radios"><input name="info[strategy]" type="checkbox" value="IT运维外包">E.IT运维外包</span>
<span for="info[strategy]" class="error"></span>
</div>
</div>
<div class="box">
<div class="tip">
<p class="matter2">8.贵公司是否有计划购买云计算相关产品及解决方案？</p>
</div>
<div class="options">
<span
fb13
class="radios"><input name="info[plan_f]" type="radio" value="是 (1~3个月)" >A.是 (1~3个月)</span>
<span class="radios"><input name="info[plan_f]" type="radio" value="是 (4~6个月)">B.是 (4~6个月)</span>
<span class="radios"><input name="info[plan_f]" type="radio" value="是 (6~12个月)">C.是 (6~12个月)</span>
<span class="radios"><input name="info[plan_f]" type="radio" value="是 (1年以后)">D.是 (1年以后)</span>
<span class="radios"><input name="info[plan_f]" type="radio" value="不确定">E 不确定</span>
<span for="info[plan_f]" class="error"></span>
</div>
</div>
<div class="box">
<div class="tip">
<p class="matter2">9.如是，贵单位预计对此项目的投资规模为（以人民币计算）：</p>
</div>
<div class="options">
<span class="radios"><input name="info[predict]" type="radio" value="50万元以下" >A.50万元以下</span>
<span class="radios"><input name="info[predict]" type="radio" value="50万-100万">B.50万-100万</span>
<span class="radios"><input name="info[predict]" type="radio" value="100-500万元以内">C.100-500万元以内</span>
<span class="radios"><input name="info[predict]" type="radio" value="500万元以上">D.500万元以上</span>
<span class="radios"><input name="info[predict]" type="radio" value="尚未确定">E.尚未确定</span>
<span class="radios"><input name="info[predict]" type="radio" value="无">F.无</span>
<span for="info[predict]" class="error"></span>
</div>
</div>
<div class="box">
<div class="tip">
<p class="matter2">10.贵单位的预算资金状况是：</p>
</div>
<div class="options">
<span class="radios"><input name="info[Budget]" type="radio" value="正在申请" >A.正在申请</span>
<span class="radios"><input name="info[Budget]" type="radio" value="已申请到位">B.已申请到位</span>
<span class="radios"><input name="info[Budget]" type="radio" value="已申请未到位">C.已申请未到位</span>
<span class="radios"><input name="info[Budget]" type="radio" value="未申请">D.未申请</span>
<span class="radios"><input name="info[Budget]" type="radio" value="不详">E.不详</span>
<span for="info[Budget]" class="error"></span>
</div>
</div>
<div class="box" style="border-bottom: 1px solid #00b388;">
<div class="tip">
<p class="matter2">11.您当前合作的云计算厂商？(可多选)</p>
</div>
<div class="options">
<span class="radios"><input name="info[vendor]" type="checkbox" value="HP" >A.HP</span>
<span class="radios"><input name="info[vendor]" type="checkbox" value="IBM">B.IBM</span>
<span class="radios"><input name="info[vendor]" type="checkbox" value="华为">C.华为</span>
<span class="radios"><input name="info[vendor]" type="checkbox" value="VMware">D.VMware</span>
<span class="radios"><input name="info[vendor]" type="checkbox" value="微软">E.微软 </span>
<span class="radios"><input name="info[vendor]" type="checkbox" value="Dell">F.Dell</span>
<span class="radios" ><input name="info[vendor]" type="checkbox" value="其他OpenStack云方案供应商" id="white">G.其他OpenStack云方案供应商<input type="text" name="info[vendor_other]" id=""><span id="test1"></span></span>
<span for="info[vendor]" class="error"></span>
<script type="text/javascript">
$("#white").change(function(){
if($("#white").is(':checked')){
$("#test1").text("必填").css('color','#ff8d6d').css('font-size','16px');
if($("#test1").val()==''){ return false;alert('bitian');}
}
})
</script>
</div>
</div>
<div class="informations">
<div class="infor">
<span class="fields info">姓名： <input type="text" value="" name="info[name]" class="fn-tinput" placeholder="必填" required data-msg-required="不能为空"/></span>
<span class="fields info">部门： <input type="text" value="" name="info[bme]" class="fn-tinput" placeholder="必填" required data-msg-required="不能为空"/></span>
<span class="fields info">职位： <input type="text" value="" name="info[position]" class="fn-tinput" placeholder="必填" required data-msg-required="不能为空"/></span>
<span class="fields info">公司： <input type="text" value="" name="info[company]" class="fn-tinput" placeholder="必填" required data-msg-required="不能为空"/></span>
<span class="fields info">座机： <input type="text" value="" name="info[tel]" class="fn-tinput" placeholder="手机号" required data-rule-phone="true" data-msg-required="请输入座机号" data-msg-mobile="请输入正确格式" /></span>
<span class="fields info">手机： <input type="text" value="" name="info[phone]" class="fn-tinput" placeholder="手机号" required data-rule-mobile="true" data-msg-required="请输入手机号" data-msg-mobile="请输入正确格式" /></span>
<span class="fields mail">E-mail：<input type="email" value="" name="info[email]" class="fn-tinput" placeholder="请输入email地址" required data-rule-email="true" data-msg-required="请输入email地址" data-msg-email="请输入正确的email地址" /></span>
</div>
</div>
<div class="btns">
<input type="submit" value="提 交" class="btn" id="submitss" name="dosubmit" />
</div>
</form>
</div>
<img src="http://www.d1net.com/statics/images/formguide/136/img03.jpg" alt="">
</div>
<script src="http://www.d1net.com/statics/js/formguide/jquery.validate.js"></script>
<script>
$(function(){
//jquery.validate
$("#form").validate({
submitHandler: function() {
//验证通过后 的js代码写在这里
$("#form").ajaxSubmit();
}
})
//submitHandler: function(editform) {
// var options = {
// url : "",
// type : "post" ,
// dataType:'json',
// target : "#loader",
// error: function(){alert("服务器没有返回数据，可能服务器忙，请重试");},
// onwait : "正在处理信息，请稍候...",
// success: function(response){
//$("#loader").fadeIn(500).html(response.data).fadeOut(500);
// $('#editform').hide(2000);
// }
// };
// setTimeout((function(opt){
// return function(){
// $('#editform').ajaxSubmit(opt);
// }
// })(options), 300);
// return false;
// }
})
//下面是一些常用的验证规则扩展
/*-------------验证插件配置 懒人建站http://www.51xuediannao.com/-------------*/
//配置错误提示的节点，默认为label，这里配置成 span （errorElement:'span'）
$.validator.setDefaults({
errorElement:'span'
});
//配置通用的默认提示语
$.extend($.validator.messages, {
required: '必选',
equalTo: "请再次输入相同的值"
});
/*-------------扩展验证规则 懒人建站http://www.51xuediannao.com/-------------*/
//邮箱
jQuery.validator.addMethod("mail", function (value, element) {
var mail = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/;
return this.optional(element) || (mail.test(value));
}, "邮箱格式不对");
//电话验证规则
jQuery.validator.addMethod("phone", function (value, element) {
var phone = /^0\d{2,3}-\d{7,8}$/;
return this.optional(element) || (phone.test(value));
}, "电话格式如：0371-68787027");
//区号验证规则
jQuery.validator.addMethod("ac", function (value, element) {
var ac = /^0\d{2,3}$/;
return this.optional(element) || (ac.test(value));
}, "区号如：010或0371");
//无区号电话验证规则
jQuery.validator.addMethod("noactel", function (value, element) {
var noactel = /^\d{7,8}$/;
return this.optional(element) || (noactel.test(value));
}, "电话格式如：68787027");
//手机验证规则
jQuery.validator.addMethod("mobile", function (value, element) {
var mobile = /^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) || (mobile.test(value));
}, "手机格式不对");
//邮箱或手机验证规则
jQuery.validator.addMethod("mm", function (value, element) {
var mm = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) || (mm.test(value));
}, "格式不对");
//电话或手机验证规则
jQuery.validator.addMethod("tm", function (value, element) {
var tm=/(^1[3|4|5|7|8]\d{9}$)|(^\d{3,4}-\d{7,8}$)|(^\d{7,8}$)|(^\d{3,4}-\d{7,8}-\d{1,4}$)|(^\d{7,8}-\d{1,4}$)/;
return this.optional(element) || (tm.test(value));
}, "格式不对");
//年龄
jQuery.validator.addMethod("age", function(value, element) {
var age = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
return this.optional(element) || (age.test(value));
}, "不能超过120岁");
///// 20-60 /^([2-5]\d)|60$/
//传真
jQuery.validator.addMethod("fax",function(value,element){
var fax = /^(\d{3,4})?[-]?\d{7,8}$/;
return this.optional(element) || (fax.test(value));
},"传真格式如：0371-68787027");
//验证当前值和目标val的值相等 相等返回为 false
jQuery.validator.addMethod("equalTo2",function(value, element){
var returnVal = true;
var id = $(element).attr("data-rule-equalto2");
var targetVal = $(id).val();
if(value === targetVal){
returnVal = false;
}
return returnVal;
},"不能和原始密码相同");
//大于指定数
jQuery.validator.addMethod("gt",function(value, element){
var returnVal = false;
var gt = $(element).data("gt");
if(value > gt && value != ""){
returnVal = true;
}
return returnVal;
},"不能小于0 或空");
//汉字
jQuery.validator.addMethod("chinese", function (value, element) {
var chinese = /^[\u4E00-\u9FFF]+$/;
return this.optional(element) || (chinese.test(value));
}, "格式不对");
//指定数字的整数倍
jQuery.validator.addMethod("times", function (value, element) {
var returnVal = true;
var base=$(element).attr('data-rule-times');
if(value%base!=0){
returnVal=false;
}
return returnVal;
}, "必须是发布赏金的整数倍");
//身份证
jQuery.validator.addMethod("idCard", function (value, element) {
var isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//(15位)
var isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;//(18位)
return this.optional(element) || (isIDCard1.test(value)) || (isIDCard2.test(value));
}, "格式不对");
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Jquery表单插件ajaxForm用法详解
- jQuery插件开发全解析
- JQuery学习笔记——基础知识和数组以及字符串操作
- jquery 添加插入元素技巧<前面和后面>
- jQuery.html()方法ie下不能设置html代码的问题
- JQuery的$();的使用以及和window.onload的区别
- jQuery 选择器
- jQuery学习笔记 —— 4. 动画
- jQuery学习笔记 —— 2. DOM操作和 3. 事件绑定
- jquery 一些简单代码
- JQuery Deferred 对象
- 『jQuery』.html(),.text()和.val()的概述及使用
- jQuery滚动条事件控制导航显示效果
- Jquery元素追加和删除
- jQuery - AJAX 简介
- jquery实现textarea 高度自适应
- jquery ajax无刷新更新页面
- 【JQuery UI】工具提示插件——tooltip
- jQuery之on
- jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)