引入相关js和css
<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>
common.css
/*通用设置*/
*{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;
}
}
利用JS提交表单的几种方法和验证
第一种方式：表单提交，在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>
