一个休假申请页对input标签各种属性的用法案例（手机端） 

<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>休假申请</title>
    <script src="jquery-1.11.1.min.js"></script>
    <style>
        body{margin: 0;padding: 0;}
        html,body{ font-size:14px; height:100%;}
        dl{
            width: 220px;
            height: auto;
            margin: 30px auto;
        }
        dl dt span{
            color: red;
        }
        dl dd{
            width: 100%;
            margin: 4px 0 12px;
        }
        dl dd select,input{
            width: 100%;
            height:2em;
            border-radius: 0;
            padding:0;
            margin:0;
            background-color: transparent;
        }
        footer{
            width: 100%;
        }
        button.submit{
            width: 150px;
            height: 2em;
            line-height: 2em;
            display: block;
            margin: 0 auto 20px;
            border-radius: 4px;
            border: none;
            font-weight: bold;
            color:#fff;
            background-color:#4d8fd8;
            font-size:14px;
        }
    </style>
</head>
<body>
    <dl>
        <dt>休假类别<span>*</span></dt>
        <dd>
            <select id="leaveCategory" style="width:217px;">
                <s:if test="typeList!=null && typeList.size()>0">
                    <s:iterator value="typeList" status="s">
                        <option value="<s:property value="timeItemCode"/>"> <s:property value="timeItemName"/> </option>
                    </s:iterator>
                </s:if>
            </select>
        </dd>
        <dt>休假开始日期时间<span>*</span></dt>
        <dd><input type="datetime-local" id="beginTime" style="width:215px;" /></dd>
        <dt>休假结束日期时间<span>*</span></dt>
        <dd><input type="datetime-local" id="endTime" style="width:215px;" /></dd>
        <dt>假期联系电话</dt>
        <dd><input type="tel" id="ownTel" maxlength="13" style="width:216px;" /></dd>
        <dt>休假事由</dt>
        <dd><input type="text" id="reason" maxlength="100" style="width:216px;" /></dd>
        <dt>工作交接人（请输入手机号）</dt>
        <dd><input type="tel" id="handoverTel" maxlength="20" style="width:216px;" /></dd>
        <dt>工作交接情况</dt>
        <dd><input type="text" id="situation" maxlength="100" style="width:216px;" /></dd>
        <dt>备注</dt>
        <dd><input type="text" id="note" maxlength="200" style="width:216px;" /></dd>
    </dl>
    <footer><button class="submit" onclick="submit()">提交</button></footer>

    <script>
        function submit(){
            var leaveCategory = $('#leaveCategory').val();
            if(!leaveCategory){
                alert("休假类别不能为空");
                return
            }
            var beginTime = $('#beginTime').val().substr(0,16);　　//时间只取值到分
            if(!beginTime){
                alert("休假开始日期时间不能为空");
                return
            }
            var endTime = $('#endTime').val().substr(0,16);
            if(!endTime){
                alert("休假结束日期时间不能为空");
                return
            }
            if(beginTime>=endTime){
                alert("休假结束日期时间必须大于休假开始日期时间");
                return
            }
            var ownTel = $('#ownTel').val();
            var reason = $('#reason').val();
            var handoverTel = $('#handoverTel').val();
            var situation = $('#situation').val();
            var note = $('#note').val();

            $.ajax({
                url: '',
                type: 'post',
                data: {
                    timeItemCode : leaveCategory,
                    beginTime : beginTime,
                    endTime : endTime,
                    ownTel : ownTel,
                    reason : reason,
                    handoverTel : handoverTel,
                    situation : situation,
                    note : note
                },
                dataType: 'json',
                success: function(res){},
                error: function(){}
            })
        }
    </script>
</body>
</html>

 

 

posted @ 2019-06-25 15:16  Fourteen  阅读(168)  评论(0)  编辑  收藏  举报