A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 南国之南 中级黑马   /  2016-7-9 20:57  /  1451 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

input元素中新增表单验证效果,在输入的内容不符合给定格式时弹出信息提示

AsNumber属性:可以利用该属性制作简易的计算器
<script>
                function fun(){
                        var n1=document.getElementById("num1").valueAsNumber;
                        var n2=document.getElementById("num2").valueAsNumber;
                        var n3=document.getElementById("greetings");
                        var result=document.getElementById("result");
                        // if(n3.value=="+")
                                result.valueAsNumber=n1+n2;
                        // }
                        // else if (n3.value=="-"){
                                // result.valueAsNumber=n1-n2;
                        // }
                        // else if (n3.value=="*"){
                        //         result.valueAsNumber=n1*n2;
                        // }
                        // else(n3.value=="/"){
                        //         result.valueAsNumber=n1/n2;
                        // }


                }
        </script>
        <form >
                <input type="number" id="num1" value="50" min="10" max="100" step="5">
                <!-- <input type="text" name="greeting" list="greetings">
                        <datalist id="greetings" style="display:none">
                                <option value="+">+</option>
                                <option value="-">-</option>
                                <option value="*">*</option>
                                <option value="/">/</option>
                        </datalist> -->
                        +
                <input type="number" id="num2"  value="50" min="10" max="100" step="5">
                =
                <input type="number" id="result" readonly>
                <input type="button" value="计算" onclick="fun()">       
        </form>



color属性:制作一个简易的颜色选择器并用改颜色选择器来设置网页背景色
<input type="color" onchange="document.body.style.backgroundColor=document.getElementById('currentColor').textContent=this.value;"
        <span id="currentColor"></span>




output属性:制作一个滚动条,滚动条后面的数字跟随滚动条变化
<script>
        function num_change(){
                var number=document.getElementById("range").value;
                document.getElementById("output").value=number;
        }
        </script>
        <form id="testform">
                <input id="range" type="range" value="10" min="0" max="100" step="5" onclick="num_change()">
                <output id="output">10</output>
        </form>


表单的验证:下面会以Email验证为例
<script>
        function check(){
                var email=document.getElementById("email");
                if(email.value==""){
                        alert("请输入email地址");
                        return false;
                }
                else if(!email.checkValidity()){
                        alert("请输入正确的email地址");
                        return false;
                }
        }
        </script>
        <form id="testform" onsubmit="check()" novalidate="true">
                <labal for="email">Email</labal>
                <input type="email" name="email" id="email">
                <br />
                <input type="submit" value="提交">
        </form>

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马