黑马程序员技术交流社区

标题: 学习笔记之input元素 [打印本页]

作者: 南国之南 时间: 2016-7-9 20:57
标题: 学习笔记之input元素
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="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>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2