多个表单验证

当页面中有很多的 input 框或者select框去验证的时候，如果一个个的去验证会很麻烦，代码也会比较繁琐。这里可以用到each来遍历，这样代码就很简洁啦。

（1）HTML代码部分：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>供货商</title>
    <link href="../css/ShopListAdd.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="container">
    <!--头部开始-->
    <div class="header-wrap">
        <div class="header">
            <a href="##">首页</a>
            >
            <a href="##">店铺管理</a>
            >
            <a href="##">店铺列表</a>
        </div>
        <P>店铺添加</P>
    </div>
    <!--头部结束-->

    <div class="content">
        <p>店铺信息</p>

        <form id="dianpuForm" method="post" action="">
            <div class="txt-wrap">
                <div class="left row">
                    <div class="test1"><i>*</i>招牌名</div>
                    <div class="test1"><i>*</i>商户LOGO</div>
                    <div class="test1"><i>*</i>营业执照名称</div>
                    <div class="test1"><i>*</i>营业执照号码</div>
                    <div class="test1"><i>*</i>营业执照到期时间</div>
                    <div class="test1"><i>*</i>营业执照图片</div>
                    <div class="test1"><i>*</i>税务登记证图片</div>
                    <div class="test1"><i>*</i>经纬度</div>
                    <div class="test1"><i>*</i>商户认证级别</div>
                    <div class="test1"><i>*</i>地址</div>
                    <div class="test1"><i>*</i>详情地址</div>
                    <div class="test1"><i>*</i>所属行业</div>
                    <div class="test1"><i>*</i>法人姓名</div>
                    <div class="test1"><i>*</i>法人身份证</div>
                    <div class="test1"><i>*</i>法人身份证图片</div>
                    <div class="test1"><i>*</i>法人身份证到期时间</div>
                    <div class="test1"><i>*</i>组织机构代码证号码</div>
                    <div class="test1"><i>*</i>组织机构代码证图片</div>
                    <div class="test1"><i>*</i>代码证到期日期</div>
                    <div class="test1"><i>*</i>营业时间</div>
                    <div class="test1"><i>*</i>固定电话</div>
                    <div class="test1 refer"><i>*</i>商户简介</div>
                </div>

                <!--文本框内容 开始-->
                <div class="right row">
                    <div class="test2 txt-com">
                        <input id="StoreAddTxt1" style="margin-top: 44px" type="text" onkeydown="KeyDown(event)"/>

                        <div id="Prompt1" class="txt-com hint"><i>招牌名不能为空！</i></div>
                    </div>

                    <div class="test2 txt-com">
                        <input type="text" name="filetext1">
                        <input id="myfile1" style="display: none" type="file" name="file">
                        <label class="UpLoad"  for="myfile1" >上传</label>
                        <div id="Prompt2" class="txt-com hint"><i>商户LOGO不能为空！</i></div>
                    </div>

                    <div class="test2 txt-com">
                        <input id="StoreAddTxt3" type="text" onkeydown="KeyDown(event)"/>

                        <div id="Prompt3" class="txt-com hint"><i>营业执照名称不能为空！</i></div>
                    </div>

                    <div class="test3 txt-com">
                        <input id="StoreAddTxt4" type="text" onkeydown="KeyDown(event)"/>

                        <div id="Prompt4" class="txt-com hint"><i>营业执照号码不能为空！</i></div>
                    </div>

                    <div class="test4 txt-com">
                        <input id="StoreAddTxt5" type="text" class="date date-text1 laydate-icon" onclick="laydate()"
                               onkeydown="KeyDown(event)"/>

                        <div id="Prompt5" class="txt-com hint"><i>营业执照到期时间不能为空！</i></div>
                    </div>

                    <div class="test2 txt-com">
                        <input type="text" name="filetext2">
                        <input id="myfile2" style="display: none" type="file" name="file">
                        <label class="UpLoad"  for="myfile2" >上传</label>
                        <!--<input id="StoreAddTxt6" type="text" onkeydown="KeyDown(event)"/>
                        <input class="UpLoad" type="button" value="上传"/>-->

                        <div id="Prompt6" class="txt-com hint"><i>营业执照图片不能为空！</i></div>
                    </div>

                    <div class="test2 txt-com">
                        <!--<input id="StoreAddTxt7" type="text" onkeydown="KeyDown(event)"/>
                        <input class="UpLoad" type="button" value="上传"/>-->
                        <input type="text" name="filetext3">
                        <input id="myfile3" style="display: none" type="file" name="file">
                        <label class="UpLoad"  for="myfile3" >上传</label>

                        <div id="Prompt7" class="txt-com hint"><i>税务登记证图片不能为空！</i></div>
                    </div>

                    <div class="test4 txt-com">
                        <input id="StoreAddTxt8" type="text" onkeydown="KeyDown(event)"/>

                        <div id="Prompt8" class="txt-com hint"><i>经纬度不能为空！</i></div>
                    </div>

                    <div class="test5 txt-com">
                        <select id="StoreAddTxt9" class="set1" style="font-size:16px;margin-top: 23px;color: #2e3440;"
                                onkeydown="KeyDown(event)">
                            <option selected="selected" value="">请选择</option>
                            <option value="1">请选择1</option>
                            <option value="2">请选择2</option>
                        </select>

                        <div id="Prompt9" class="txt-com hint"><i>商户认证级别不能为空！</i></div>
                    </div>

                    <div class="test6 txt-com">
                        <select id="StoreAddTxt10-1" name="province" class="province set-com"
                                style="font-size:16px;margin-top: 22px;color: #2e3440;padding: 0 65px 0 15px;"
                                onkeydown="KeyDown(event)"></select>
                        <select id="StoreAddTxt10-2" name="city" class="city set-com"
                                style="font-size:16px;margin-top: 22px;color: #2e3440;padding: 0 65px 0 15px;"
                                onkeydown="KeyDown(event)"></select>
                        <select id="StoreAddTxt10-3" name="district" class="district set-com"
                                style="font-size:16px;margin-top: 22px;color: #2e3440;padding: 0 65px 0 15px;"
                                onkeydown="KeyDown(event)"></select>

                        <div id="Prompt10" class="txt-com hint"><i>地址不能为空！</i></div>
                    </div>

                    <div class="test7 txt-com">
                        <input id="StoreAddTxt11" type="text" onkeydown="KeyDown(event)"/>

                        <div id="Prompt11" class="txt-com hint"><i>详情地址不能为空！</i></div>
                    </div>

                    <div class="test5 txt-com">
                        <select id="StoreAddTxt12" class="set1" style="font-size:16px;margin-top: 23px;color: #2e3440;"
                                onkeydown="KeyDown(event)">
                            <option selected="selected" value="">请选择</option>
                            <option value="1">请选择1</option>
                            <option value="2">请选择2</option>
                        </select>

                        <div id="Prompt12" class="txt-com hint"><i>所属行业不能为空！</i></div>
                    </div>

                    <div class="test4 txt-com">
                        <input id="StoreAddTxt13" type="text" onkeydown="KeyDown(event)"/>

                        <div id="Prompt13" class="txt-com hint"><i>法人姓名不能为空！</i></div>
                    </div>


                    <div class="test4 txt-com">
                        <input id="StoreAddTxt14" type="text" onkeydown="KeyDown(event)"/>

                        <div id="Prompt14" class="txt-com hint"><i>法人身份证不能为空！</i></div>
                    </div>
                    <div class="test2 txt-com">
                        <input type="text" name="filetext4">
                        <input id="myfile4" style="display: none" type="file" name="file">
                        <label class="UpLoad"  for="myfile4" >上传</label>
                        <!--<input id="StoreAddTxt15" type="text" onkeydown="KeyDown(event)"/>
                        <input class="UpLoad" type="button" value="上传"/>-->

                        <div id="Prompt15" class="txt-com hint"><i>法人身份证图片不能为空！</i></div>
                    </div>

                    <div class="test4 txt-com">
                        <input id="StoreAddTxt16" type="text" class="date date-text1 laydate-icon" onclick="laydate()"
                               onkeydown="KeyDown(event)"/>

                        <div id="Prompt16" class="txt-com hint"><i>法人身份证证到期时间不能为空！</i></div>
                    </div>

                    <div class="test4 txt-com">
                        <input id="StoreAddTxt17" type="text" onkeydown="KeyDown(event)"/>

                        <div id="Prompt17" class="txt-com hint"><i>组织机构代码证号码不能为空！</i></div>
                    </div>

                    <div class="test2 txt-com">
                        <input type="text" name="filetext5">
                        <input id="myfile5" style="display: none" type="file" name="file">
                        <label class="UpLoad"  for="myfile5" >上传</label>
                        <!--<input id="StoreAddTxt18" type="text" onkeydown="KeyDown(event)"/>
                        <input class="UpLoad" type="button" value="上传"/>-->

                        <div id="Prompt118" class="txt-com hint"><i>组织机构代码证图片不能为空！</i></div>
                    </div>

                    <div class="test4 txt-com">
                        <input id="StoreAddTxt19" type="text" class="date date-text1 laydate-icon" onclick="laydate()"
                               onkeydown="KeyDown(event)"/>

                        <div id="Prompt19" class="txt-com hint"><i>代码证到期日期不能为空！</i></div>
                    </div>

                    <div class="test4 txt-com">
                        <input id="StoreAddTxt20" type="text" class="date date-text1 laydate-icon" onclick="laydate()"
                               onkeydown="KeyDown(event)"/>

                        <div id="Prompt20" class="txt-com hint"><i>营业时间不能为空！</i></div>
                    </div>

                    <div class="test8 txt-com">
                        <input id="StoreAddTx21-1" class="test8-1" type="text" onkeydown="KeyDown(event)"/>
                        <i style="font-size: 16px;margin: 0 5px;">—</i>
                        <input id="StoreAddTxt21-2" class="test8-2" type="text" onkeydown="KeyDown(event)"/>

                        <div id="Prompt21" class="txt-com hint"><i>固定电话不能为空！</i></div>
                    </div>

                    <div class="test9 txt-com">
                    <textarea id="StoreAddTxt22" cols="40" rows="8" name="textarea" id="textarea"
                              onkeydown="KeyDown(event)"></textarea>

                        <div id="Prompt22" class="txt-com hint"><i>商户简介不能为空！</i></div>
                    </div>

                    <!--提交按钮开始-->
                    <div class="footer-btn">
                        <input class="save-btn" type="button" value="保存"/>
                        <input class="sub-btn" type="button" value="提交审核"/>
                    </div>
                    <!--提交按钮结束-->
                </div>
                <!--文本框内容 结束-->
            </div>
        </form>
        <!---->
    </div>
</div>
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../laydate/laydate.js" type="text/javascript"></script>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.area.js" type="text/javascript"></script>
<script src="../js/supplier-Add.js" type="text/javascript" charset="GBK"></script>
</body>
</html>

View Code

（2）CSS代码部分：

* {
    margin: 0;
    padding: 0;
}

body, html {
    font-family: "Microsoft Yahei";
}

a{
    cursor: pointer;
}
a:link {
    text-decoration: none;
    color: #2e3440
}

a:active {
    text-decoration: none;
    color: #2e3440
}

a:hover {
    text-decoration: none;
    color: #2e3440
}

a:visited {
    text-decoration: none;
    color: #2e3440
}

.container {
    position: relative;
    margin: 0 auto;
    min-width: 900px;
}

.header {
    padding: 30px 2%;
    font-size: 14px;
}

.header-wrap p {
    color: #2e3440;
    font-size: 18px;
    padding-left: 2%;
    margin-bottom: 30px;
}

.content{
   /* position: relative;*/
    padding: 0 2%;
    border-radius: 5px;
    min-width: 900px;
    color: #2e3440;
}
.content p{
    font-size: 16px;
    padding: 15px 30px;
    background-color: #e2e3e7;
    color: #2e3440;
    border-radius: 5px 5px 0 0;
    /*border: 1px solid #e0e0e0;*/
}

.content .txt-wrap{
    position: relative;
    /*border: 1px solid pink;*/
    font-size: 0;
    text-align:center;
    height: 2370px;
    border: 1px solid #e0e0e0;
    border-radius: 0 0 5px 5px;
    margin-bottom: 60px;
}
.txt-wrap .left{
    float: left;
    width: 30%;
    height :50%;
    /*min-width: 200px;*/
}
.txt-wrap .left .refer{
    margin-bottom: 119px;
}
.txt-wrap .right{
    float: right;
    height: 50%;
    position: absolute;
    left: 30%;
    right: 0;
    top: 0;
}
.txt-wrap .row{
    font-size: 16px;
}
.txt-wrap .left .test1{
    margin-top: 41px;
    padding: 14px 15px;
   /* border-bottom: 1px solid transparent;*/
    text-align: right;
    color: #2e3440;
}
.txt-wrap .left .test1 i{
    color: red;
    font-size: 16px;
    margin-right: 5px;
    vertical-align: sub;
    font-style: normal;
}
.txt-wrap .right .txt-com{
    text-align: left;
    margin-left: 5px;
    font-size: 0;
}
.txt-wrap .right .txt-com input{
    padding: 14px 15px;
    margin-top: 20px;
    border: 1px solid #d4d4d4;
    border-radius: 5px;
    outline: none;
    height: 20px;
    font-size: 16px;
    /*border-bottom: 1px solid deeppink;*/
}
.txt-wrap .right .txt-com select{
    padding: 0 15px;
    margin-top: 20px;
    border: 1px solid #d4d4d4;
    border-radius: 5px;
    outline: none;
    height: 47px;
}
.txt-wrap .right .txt-com i{
    font-style: normal;
}
.txt-wrap .right .txt-com .xz1{
    position: absolute;
    left: 168px;
    top: 506px;
    color: #2e3440;
    font-size: 16px;
    padding: 0 5px;
}
.txt-wrap .right .txt-com .xz2{
    position: absolute;
    left: 168px;
    top: 776px;
    color: #2e3440;
    font-size: 16px;
    padding: 0 5px;
}
.right .test2 input{
    width: 430px;
    color: #2e3440;
}
.right .test3 input{
    width: 320px;
    color: #2e3440;
}
.right .test4 input{
    width: 180px;
    color: #2e3440;
}
.right .test5 .set1{
    width: 210px;
    /*在选择框的最右侧中间显示小箭头图片*/
    background: url("../images/select2.png") no-repeat scroll right center transparent;
    color: #2e3440;
}
.right .test6 .set-com{
    margin-right: 10px;
    /*在选择框的最右侧中间显示小箭头图片*/
    background: url("../images/select2.png") no-repeat scroll right center transparent;
    color: #2e3440;
}
.right .test7 input{
    width: 460px;
    color: #2e3440;
}
.right .test8 .test8-1{
    width: 45px;
    color: #2e3440;
}
.right .test8 .test8-2{
    width: 120px;
    color: #2e3440;
}
.right .test9 textarea{
    width: 400px;
    height: 100px;
    padding: 14px 15px;
    margin-top: 20px;
    border: 1px solid #d4d4d4;
    border-radius: 5px;
    outline: none;
    font-size: 16px;
    color: #2e3440;
    resize: none;
}
.footer-btn {
    /*border: 1px solid red;*/
    font-size: 0;
    padding-top: 90px;
    padding-bottom: 90px;
    text-align: left;
    cursor: pointer;
}
.footer-btn input{
    width: 140px;
    height: 46px;
    font-size: 16px;
    border-radius: 5px;
    color: #FFFFFF;
    margin: 0 50px 0 5px;
    outline: none;
    cursor: pointer;
}
.footer-btn .save-btn{
    background-color: #68b1fb;
    border: 1px solid #68b1fb;

}
.footer-btn .sub-btn{
    background-color: #e75c2f;
    border: 1px solid #e75c2f;

}
.UpLoad{
    width: 90px !important;
    height: 48px !important;
    background-color: #fe890c !important;
    border: 1px solid #fe890c;
    color: #FFFFFF !important;
    margin-left: 15px;
    cursor: pointer;
    font-size: 16px;
    /* width: 80px; */
    line-height: 48px;
    display: inline-block;
    border-radius: 5px;
    text-align: center;
}
/*select公共样式 开始*/
select {
    /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
    border: 1px solid  #000;

    /*很关键：将默认的select选择框样式清除*/
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;

    /*为下拉小箭头留出一点位置，避免被文字覆盖*/
    padding-right: 14px;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
/*select公共样式 结束*/

/*提示内容样式调整 开始*/
.hint{
    color: red;
    font-size: 0;
    padding-top: 5px;
    visibility: hidden;
}
.hint i{
    font-size: 14px;
}

/*提示内容样式调整 开始*/

View Code

（3）JS代码部分：

/*表单验证*/
function validateForm() {
    var result = true;
    var count = 0;
    //input验证
    var $input = $("input[type!='button']");
    $.each($input, function (i, item) {
        var val = $(item).val();
        if (val == "" || val == null || val == undefined) {
            $(item).siblings(".hint").css("visibility", "visible");
            count++;
        } else {
            $(item).siblings(".hint").css("visibility", "hidden");
        }
    });
    //select验证
    var $select = $("select");
    $.each($select, function (i, item) {
        var val = $(item).children("option:selected").val();
        if (val == "" || val == null || val == undefined) {
            $(item).siblings(".hint").css("visibility", "visible");
            count++;
        } else {
            $(item).siblings(".hint").css("visibility", "hidden");
        }
    });
    //textarea验证
    var $textarea = $("textarea");
    $.each($textarea, function (i, item) {
        var val = $(item).val();
        if (val == "") {
            $(item).siblings(".hint").css("visibility", "visible");
            count++;
        } else {
            $(item).siblings(".hint").css("visibility", "hidden");
        }
    });
    if (count > 0)
        result = false;
    return result;
}

View Code

这里验证的是表单非空

这里也是一段js代码（点击保存按钮后，返回给后台）

/*提交表单*/
$(".sub-btn").click(function () {
    //表单校验是否成功
    var flag = validateForm();
    if (flag) {
        $.ajax({
            url: '',
            type: 'post',
            dataType: 'json',
            data: new FormData($("form")[0]),
            async: false,/*默认情况是true,false表示不异步请求*/
            beforesend:function(){
                /*在发送请求之前需要做的处理*/
            },
            success: function () {

            }
        });
    } else {
        alert("表单校验失败");
    }
});

View Code

posted @ 2017-04-05 17:47 三高娘子阅读(275) 评论(0) 收藏举报

三高娘子

多个表单验证

公告