html5 input类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">

        /*
         *valueMissing：是否空值,配合required属性使用
         *typeMismatch：类型是否匹配，配合email、number、url等类型使用
         *patternMismatch：是否匹配成功正则表达式，配合pattern属性使用
         *toolong ：是否超过指定长度，配合maxlength使用
         *rangeUnderflow ：判断当前元素值是否小于min，与min属性配合，不与max比较
         *rangeOverflow ：判断当前元素值是否大于max，与max属性配合，不与min比较
         *stepMismatch ：判断当前元素值是否符合step要求，与step属性配合
         */
        function validateText(obj){ 
            if(obj.validity.valueMissing){      
                obj.setCustomValidity("此项不能为空！！！"); 
            }else if(obj.validity.patternMismatch){

                obj.setCustomValidity("只能输入a-z之间的字母！！！");           
            }else{
                //当字段正确时需要把错误提示信息去掉
                obj.setCustomValidity("");  
            }
        }

        //获取颜色值
        function getColor(){
            var color=document.getElementById("color").value;
            alert(color);   //结果：#00ffff
        }


        //获取日期值
        function getDate(){
            var date=document.getElementById("date").value;
            alert(date);  //结果：2017-2-23
        }

        //获取时间值
        function getTime(){
            var time=document.getElementById("time").value;
            alert(time);  //结果：04:32
        }

        //获取日期时间值(UTC)
        function getDatetime(){
            var datetime=document.getElementById("datetime").value;
            alert(datetime);  //结果：谷歌暂时不可用
        }

        //获取本地日期时间值
        function getDatetimeLocal(){
            var datetimeLocal=document.getElementById("datetimeLocal").value;
            alert(datetimeLocal);  //结果：2017-2-23T12:45
        }

        //获取月值
        function getMonth(){
            var month=document.getElementById("month").value;
            alert(month);  //结果：2017-2
        }

        //获取周值
        function getWeek(){
            var week=document.getElementById("week").value;
            alert(week);  //结果：2017-W12
        }


    </script>
</head>
<body>
    <form action="1.php" method="post">
        <br><br>
        <label>文本：</label>
        <!-- autofocus:是否开启自动获取焦点，默认为关闭off -->
        <!-- autocomplete:是否保存已提交表单的值，在下次填写表单时自动提示曾经输入的值，默认为开启on -->
        <!-- required:指定该项必填，当不加required属性时默认不必填 -->
        <!-- placeholder:当输入字段为空时显示提示信息，并会在字段获得焦点时消失 -->
        <!-- pattern:使用正则表达式校验字段是否符合要求 -->
        <input type="text" id="text" autofocus="on" autocomplete="off"   required placeholder="请输入文本" pattern="^[a-z]+$"    onblur="validateText(this);">


        <!-- 颜色选择器 -->
        <!-- 当颜色发生改变时会触发onchange事件 -->
        <!-- 可通过样式改变颜色显示框的宽高，但无法改变弹出的颜色选择器的宽高 -->
        <!-- 谷歌浏览器中[版本 51.0.2704.106 m,测试时间：2017-3-4]，弹出颜色选择器后点击[大正方形]那块区域无法改变颜色，只有先点击[基本颜色]或[自定义颜色]或[超长方形渐变色]改变了第一次颜色后，第二次才能正常使用[大正方形]改变颜色 -->
        <label>颜色：</label><input type="color" id="color" onchange="getColor();" style="width: 100px;height: 30px;"  >

        <br><br>
        <label>日期：</label><input type="date" id="date"  onblur="getDate()">
        <br><br>
        <label>时间：</label><input type="time" id="time" onblur="getTime();">
        <br><br>
        <!-- 世界协调时间、UTC+8=北京时间 -->
        <label>日期时间(UTC)：</label><input type="datetime" id="datetime" onblur="getDatetime()">
        <br><br>

        <!-- 当地时间 -->
        <label>日期时间(本地)：</label><input type="datetime-local" id="datetimeLocal" onblur="getDatetimeLocal()">
        <br><br>

        <label>月份：</label><input type="month" id="month" onblur="getMonth();">
        <br><br>
        <label>周：</label><input type="week" id="week" onblur="getWeek();">
        <br><br>


        <label>邮件：</label><input type="email" id="email" >
        <br><br>
        <label>数字：</label><input type="number" id="number">
        <br><br>
        <label>滑块：</label><input type="range" id="range">
        <br><br>
        <label>搜索：</label><input type="search" id="search">
        <br><br>
        <label>电话号码：</label><input type="tel" id="tel">
        <br><br>

        <label>网址：</label><input type="url" id="url">
        <br><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>
猜你喜欢
