表单校验js

最新推荐文章于 2024-02-22 18:23:22 发布

码农张晓

最新推荐文章于 2024-02-22 18:23:22 发布

阅读量685

点赞数

分类专栏： js&jQuery

本文链接：https://blog.csdn.net/qq_35661734/article/details/53216544

版权

js&jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

引入相关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:#fff;overflow-y:scroll;min-height: 100%;position: relative;}
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 #ddd;margin:10px 0;padding:30px 50px;position:relative}
.panel-act{border:1px solid #ddd;margin-top:10px;padding:10px;position:relative}

/*左右浮动*/
.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:#333;margin-left:5px}
.pager li a{padding:0 10px;color:inherit}
.pager li a:hover{background:#da2416;color:#fff}
.pager .current{background:#da2416;color:#fff}

/*标题栏*/
.top{width:100%;background:#fff}
.topbar{height:30px;background:#2e333c;line-height:30px;color:#999}
.topbar .left-bar{float:left}
.topbar .right-bar{float:right}
.topbar .right-bar a{color:#999}
.topbar .right-bar a:hover{cursor:pointer;text-decoration:none;color:#fff}

.qrcode-drop-menu{position:relative;margin-left:10px;}
.qrcode-drop-menu-link{color:#999;}
.qrcode-box{display:none;position:absolute;top:29px;left:-38px;z-index:999;background:#fff;padding:10px;border:1px solid #b3b3b3;width:150px;}
.qrcode-box h4{border-bottom:1px solid #d8d8d8;text-align:center;font-size:16px;line-height:1;padding:10px 0 14px;}
.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 #b3b3b3 transparent;}
.qrcode-box:after{top:-15px;border-bottom:8px solid #fff;}
.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 #da2416;font-family:Tahoma,Arial,"Microsoft YaHei",sans-serif}
.navbar .logo-box{width:300px;line-height:75px;height:75px;}
.navbar .logo-box strong{font-size:16px;color:#e80c00;font-weight:normal;}
.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 #da2416;color:#da2416;cursor:pointer}
.navbar ul .active{border-bottom:3px solid #da2416;color:#da2416}
.nav a{color:#000}

/*二级导航*/
.subnav{height:40px;line-height:40px;background:#eee;margin-top:10px;border-top:3px solid #ddd;border-right:1px solid #ddd;border-left:1px solid #ddd;}
.subnav ul{overflow:hidden;}
.subnav ul li{float:left}
.subnav a{padding:0 25px;color:#333}
.subnav .active{background:#fff;color:#da2416;font-weight:bold}

/*三级导航*/
.thirdnav{margin-top:10px;padding:10px 0;}
.thirdnav ul li{float:left;line-height:26px;border:1px solid #da2416;}
.thirdnav a{padding:0 25px;color:inherit}
.thirdnav .active{background:#da2416;color:#fff;}

/*页脚*/
.footer{height:100px;text-align:center;color:#999;border-top:1px solid #eee}
.footer ul{display:inline-block;}
.footer ul li{float:left;padding:10px 20px;}
.footer ul li a{cursor:pointer;color:#999;}

/*表单样式*/
.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:#da2416;margin-left:-10px;float:left}
.form-content dd{display:block;line-height:27px}
.form-content p{color:#999;font-size:12px;line-height:36px}
.inputArea,.inputText{border:1px solid;border-color:#abadb3 #dbdfe6 #e3e9ef #e2e3ea;padding:5px;font-size:12px}
.inputText{height:28px;width:180px}
/*input:focus,textarea:focus{border:1px solid;border-color:#64aabc #a9d7e3 #a9d7e3 #64aabc}*/
label.error,span.error{color:#F03;padding:0 5px}
input.error{border:1px solid #F03}

/*下拉框*/
.combox{border:1px solid;border-color:#abadb3 #dbdfe6 #e3e9ef #e2e3ea;width:180px;height:28px;}
/*.combox:hover{border:1px solid;border-color:#64aabc #a9d7e3 #a9d7e3 #64aabc}*/

/*按钮样式*/
.btn-grey,.btn-red{background:#da2416;color:#fff;padding:0 15px;border-radius:3px;height:28px;line-height:28px;vertical-align:middle;cursor:pointer;}
.btn-grey{background:#666;}
/*按钮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 #ddd;border-bottom:1px solid #ddd;overflow:hidden;font-weight:700;color:#555;background:#f1f1f1;margin-top:10px;text-indent:2em}
.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 #ebebeb;line-height:40px;overflow:hidden;text-indent:2em;position:relative}
.list-cnt dl:hover{background:#eee;}
.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:#002878;font-size:12px;}
.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 #666;border-color:#ccc #999 #999 #ccc;}
.list-cnt button:hover{cursor:pointer;border-color:#999 #ccc #ccc #999;}

/*弹窗样式*/
/*.categoryBox_wrap{background:rgba(256,256,256,0.2);padding:10px;width:622px;position:relative;}*/
.categoryBox{width:602px; background:#fff;}
.categoryBox_head{line-height:30px;background:#d6222f;}
.categoryBox_head h3{color:#fff;font-size:12px;padding:0 15px;}
.categoryBox_main{padding:15px;}
.categoryBox_inner{border:1px solid #d9d9d9;}
.categoryBox_title{border-bottom:1px solid #d9d9d9;line-height:26px;overflow:hidden;}
.categoryBox_title p{float:left;width:285px;padding-left:10px;}
.categoryBox_title p:first-child{border-right:1px solid #d9d9d9;}
.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;}

#provinceList .item,#cityList .item,#industryList1 .item,#industryList2 .item,#positionList1 .item{line-height:24px;position:relative;padding-left:10px;}
#provinceList .item:hover,#cityList .item:hover,#industryList1 .item:hover,#industryList2 .item:hover,#positionList1 .item:hover{background:#eee;cursor:pointer;}
#positionList2 .item{line-height:24px;position:relative;border-bottom:1px solid #eee;}
#positionList2 .item:hover{cursor:pointer;}
#positionList2 .link{width:100%;padding-left:10px;}
#positionList2 .submenu{padding-left:10px;display:none;background:#eee;}
#positionList2 .item:after{content:'';position:absolute;right:10px;top:7px;height:6px;width:6px;border-bottom:1px solid #999;border-right:1px solid #999;transform:rotate(45deg);}
#positionList2 .open:after{top:10px;transform:rotate(-135deg);}

/*返回顶部*/
.to-top{background:#da2416;color:#fff;padding:15px;}

/*autocomplete*/
.autocomplete-suggestions{overflow:auto;border:1px solid #999;background:#fff;box-shadow:1px 4px 3px rgba(50,50,50,.64);cursor:default;}
.autocomplete-suggestion{overflow:hidden;padding:2px 5px;white-space:nowrap;}
.autocomplete-no-suggestion{padding:2px 5px;}
.autocomplete-selected{background:#f0f0f0;}
.autocomplete-suggestions strong{color:#000;font-weight:700;}
.autocomplete-group{padding:2px 5px;}
.autocomplete-group strong{display:block;border-bottom:1px solid #000;color:#000;font-weight:700;font-size:1pc;}

/*大礼包*/
.bonus-wrap{position:relative;width:473px;height:516px;background: url(../images/bonus/bonus.png); text-align: center;display: none;}
.bonus-wrap .bonus-btn{background: #fbda30;border:1px solid #eb6100;font-size:32px;font-family:"Microsoft Yahei";color:#df3121;padding:0 60px;margin-top: 390px;box-shadow: 0 0 0 5px #fbda30;border-radius:3px;line-height: 1.3;cursor:pointer;}
.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>

码农张晓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单校验js

引入相关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
复制链接

扫一扫