<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/common.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/dialog/dialog.js"></script>
/*通用设置*/
*{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */-o-box-sizing: border-box; -ms-box-sizing: border-box;}
html{font:12px/1.5 Tahoma,Arial,"SimSun",sans-serif;background:
body{margin-bottom: 100px;}
a{text-decoration:none;text-indent:0}
.footer{position: absolute;bottom: 0;width: 100%;}
.container{position:relative;margin:0 auto;width:1000px}
.cls-txt{margin-bottom:20px;padding:0 20px;text-align:justify;text-justify:inter-ideograph;font-size:14px;line-height:1.7}
.main-con{padding:10px;}
/*panel样式*/
.panel{border:1px solid
.panel-act{border:1px solid
/*左右浮动*/
.pull-left{float: left;}
.pull-right{float: right;}
/*清除浮动*/
.clearfix:after{content:' ';display:block;clear:both;visibility:hidden;line-height:0;height:0}
/*分页组件*/
.pagebar{padding:20px;overflow:hidden}
.pager{float:right}
.pager li{float:left;height:24px;line-height:24px;color:
.pager li a{padding:0 10px;color:inherit}
.pager li a:hover{background:
.pager .current{background:
/*标题栏*/
.top{width:100%;background:
.topbar{height:30px;background:
.topbar .left-bar{float:left}
.topbar .right-bar{float:right}
.topbar .right-bar a{color:
.topbar .right-bar a:hover{cursor:pointer;text-decoration:none;color:
.qrcode-drop-menu{position:relative;margin-left:10px;}
.qrcode-drop-menu-link{color:
.qrcode-box{display:none;position:absolute;top:29px;left:-38px;z-index:999;background:
.qrcode-box h4{border-bottom:1px solid
.qrcode-box img{display:block;margin:15px;}
.qrcode-box:before,
.qrcode-box:after{content:'';position:absolute;top:-16px;left:50%;margin-left:-8px;width:0;height:0;border-width:8px;border-style:solid;border-color:transparent transparent
.qrcode-box:after{top:-15px;border-bottom:8px solid
.icons{display:inline-block;width:16px;height:16px;vertical-align:middle;background: url(../images/icons2.png) no-repeat;}
/*一级导航*/
.navbar{height:75px;border-bottom:2px solid
.navbar .logo-box{width:300px;line-height:75px;height:75px;}
.navbar .logo-box strong{font-size:16px;color:
.navbar .logo{height:100%;cursor:pointer;padding:10px 8px 8px;}
.navbar .logo img{max-height:56px;width:auto;}
.navbar ul{height:75px;line-height:75px;margin-right:0}
.navbar ul li{float:left;font-size:16px;padding:0 15px;height:73px}
.navbar ul li:hover{border-bottom:3px solid
.navbar ul .active{border-bottom:3px solid
.nav a{color:
/*二级导航*/
.subnav{height:40px;line-height:40px;background:
.subnav ul{overflow:hidden;}
.subnav ul li{float:left}
.subnav a{padding:0 25px;color:
.subnav .active{background:
/*三级导航*/
.thirdnav{margin-top:10px;padding:10px 0;}
.thirdnav ul li{float:left;line-height:26px;border:1px solid
.thirdnav a{padding:0 25px;color:inherit}
.thirdnav .active{background:
/*页脚*/
.footer{height:100px;text-align:center;color:
.footer ul{display:inline-block;}
.footer ul li{float:left;padding:10px 20px;}
.footer ul li a{cursor:pointer;color:
/*表单样式*/
.form-content{clear:both;padding:0 50px 20px}
.form-content dl{font-size:12px;overflow:hidden;height:auto;display:block;padding:10px 0}
.form-content dd,.form-content dt{float:left}
.form-content dt{display:block;line-height:27px;text-align:left;width:100px;padding-left:20px}
.form-content dt font{color:
.form-content dd{display:block;line-height:27px}
.form-content p{color:
.inputArea,.inputText{border:1px solid;border-color:
.inputText{height:28px;width:180px}
/*input:focus,textarea:focus{border:1px solid;border-color:
label.error,span.error{color:
input.error{border:1px solid
/*下拉框*/
.combox{border:1px solid;border-color:
/*.combox:hover{border:1px solid;border-color:
/*按钮样式*/
.btn-grey,.btn-red{background:
.btn-grey{background:
/*按钮margin*/
.mg50{margin-left:50px;}
.mg100{margin-left:100px;}
.mg150{margin-left:150px;}
/*列宽*/
.w50{width:50px;}
.w80{width:80px;}
.w100{width:100px;}
.w135{width:137px;}
.w150{width:150px;}
.w200{width:200px;}
.w300{width:300px;}
.w500{width:500px;}
/*列表样式*/
.list-head{height:44px;line-height:44px;border-top:1px solid
.list-cnt dd,.list-cnt dt,.list-head dd,.list-head dt{float:left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.list-cnt dl{border-bottom:1px solid
.list-cnt dl:hover{background:
.list-cnt .item-check{margin-right:-2em;position:absolute;left:6px;top:13px}
.list-cnt dl a,.list-cnt dl span,.list-cnt dl button{text-indent:0;display:inline;}
.act-btn{margin-right:10px;text-decoration:underline;color:
.list-cnt button{margin-right:10px;font-size:12px;height:20px;width:36px;text-align:center;font-family:Tahoma,Arial,"SimSun",sans-serif;border:1px solid
.list-cnt button:hover{cursor:pointer;border-color:
/*弹窗样式*/
/*.categoryBox_wrap{background:rgba(256,256,256,0.2);padding:10px;width:622px;position:relative;}*/
.categoryBox{width:602px; background:
.categoryBox_head{line-height:30px;background:
.categoryBox_head h3{color:
.categoryBox_main{padding:15px;}
.categoryBox_inner{border:1px solid
.categoryBox_title{border-bottom:1px solid
.categoryBox_title p{float:left;width:285px;padding-left:10px;}
.categoryBox_title p:first-child{border-right:1px solid
.categoryBox_cnt{overflow:hidden;}
.categoryBox_l,.categoryBox_r{float:left;width:285px;height:336px;overflow-y:scroll;}
.categoryBox_footer{padding:5px 0px 10px;text-align:center;}
.categoryBox_footer button{margin:0 5px;}
/*返回顶部*/
.to-top{background:
/*autocomplete*/
.autocomplete-suggestions{overflow:auto;border:1px solid
.autocomplete-suggestion{overflow:hidden;padding:2px 5px;white-space:nowrap;}
.autocomplete-no-suggestion{padding:2px 5px;}
.autocomplete-selected{background:
.autocomplete-suggestions strong{color:
.autocomplete-group{padding:2px 5px;}
.autocomplete-group strong{display:block;border-bottom:1px solid
/*大礼包*/
.bonus-wrap{position:relative;width:473px;height:516px;background: url(../images/bonus/bonus.png); text-align: center;display: none;}
.bonus-wrap .bonus-btn{background:
.bonus-wrap .star{position:absolute;top:-100px;left:-80px;width:625px;height: 312px;background: url(../images/bonus/star.png);}
.bonus-wrap .wl{position:absolute;bottom:-61px;left:-55px;width:228px;height: 134px;background: url(../images/bonus/widget-1.png);}
.bonus-wrap .wr{position:absolute;bottom:-71px;right:-68px;width:211px;height: 201px;background: url(../images/bonus/widget-2.png);}
<input class="inputText required" type="text" id="address" name="address"
value="${info.info.address}" onblur="CheckCampanyAddress()"/>
<label id="address-error" class="error" for="address"></label>
//公司地址校验
function CheckCampanyAddress() {
var address = $("#address").val();
if (trim(address).length==0) {
$("#address-error").html("请输入公司名称!");
$("#address").addClass("error");
isCheckCompanyAddress = false;
return false;
} else {
$("#address-error").html("");
$("#address").removeClass("error");
isCheckCompanyAddress = true;
return true;
}
}
//删除左右两端的空格
function trim(str){
return str.replace(/(^s*)|(s*$)/g, "");
}
在表单添加onSubmit属性
<form id="companyInfo" method="post" action="addCompany" enctype="multipart/form-data" onsubmit="return vailCompanyInfo()">
相关的校验方法
// 校验表单信息是否完整
function vailCompanyInfo(){
var address = $("#address").val();
var scale = $("#boleScaleBox option:selected").val();
var property = $("#bolePropertyBox option:selected").val();
var industry = $("#industry1").val();
// alert("address="+address+"///"+"scale="+scale+"property="+property+"industry="+industry);
if (trim(address).length>0 && scale>0 && property>0 && trim(industry).length>0){
return true;
}else{
AlertMini('alt1', "请完善公司信息!", 'error.gif', 2);
return false;
}
}
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功
<script type="text/javascript">
function validate(obj) {
if (confirm("提交表单?")) {
alert(obj.value);
return true;
} else {
alert(obj.value);
return false;
}
}
</script>
<body>
<form action="http://www.baidu.com" onsubmit="return validate(document.getElementByIdx_x('myText'));"> <!—参数的这种写法注意下-->
<input type="text" id="myText"/>
<input type="submit" value="submit"/>
</form>
</body>
第二种方式:通过button按钮来触发表单提交事件onclick="submitForm();",会忽略掉其他标签中的属性,比如form标签中的onsubmit属性就失效了。这时为了进行表单验证,可以将验证代码放在submitForm();方法中进行验证。
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
function submitForm() {
if (validate()) {
document.getElementByIdx_x("myForm").submit();
}
}
</script>
<body>
<form action="http://www.baidu.com" id="myForm">
<input type="text"/>
<input type="button" value="submitBtn" onclick="submitForm();"/> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->
</form>
</body>
第三种方式:将onsubmit事件放在submit标签中,而不是form标签中,此时表单验证失效,点击提交按钮表单直接提交
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
</script>
<body>
<form action="http://www.baidu.com">
<input type="text"/>
<input type="submit" value="submit" onsubmit="return validate()"/>
</form>
</body>
第四种方式:为submit按钮添加上onclick事件,其中该事件用于表单提交的验证,功能类似于在form标签中增加了onsubmit事件一样
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
</script>
<body>
<form action="http://www.baidu.com">
<input type="text"/>
<input type="submit" value="submit" onclick="return validate()"/>
</form>
</body>
第五种方式:
<body>
<form action="http://www.baidu.com" id="myForm">
<input type="text"/>
<input type="button" value="submitBtn" id="myBtn"/>
</form>
</body>
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
通过button按钮来触发表单提交事件onclick="submitForm();",会忽略掉其他标签中的属性,比如form标签中的onsubmit属性就失效了。这时为了进行表单验证,可以将验证代码放在submitForm();方法中进行验证
function submitForm() {
if (validate()) {
document.getElementByIdx_x("myForm").submit();
}
}
document.getElementByIdx_x("myBtn").onclick = submitForm;
</script>