4.10号 表单验证
<form action="1.html" method="post"> 用户名:<input type="text" name="y" id="y" /> 密码:<input type="password" name="p" id="p" /> 确认密码:<input type="password" name="qp" id="qp"/> 年龄:<input type="text" name="n" id="n" /> 手机号:<input type="text" name="s" id="s" /> <input type="submit" value="提交" onclick="return Ti()" /> </form> </body> <script type="text/javascript"> //非空验证 function Ti() { //获取文本框的值,判断是否为空 var y = document.getElementById("y").value; if(y=="") { alert("用户名为空"); return false; } else { return true; } } //相等验证 function Ti() { var p = document.getElementById("p").value; var qp = document.getElementById("qp").value; if(p==qp) { //相等的提交 return true; } else { //不相等的 alert("输入的密码不一致"); return false; } } //范围验证 function Ti() { //18-30 var n = document.getElementById("n").value; if(n>18 && n<30) { return true; } else { alert("年龄不符"); return false; } } //正则验证 function Ti() { var s = document.getElementById("s").value; var z = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/; if(s.match(z)==null) { alert("手机号不正确"); return false; } else { return true; } }
套在一起用:用 if 嵌套做,条件不正确的话弹出,正确的话执行下一步。
<form action="清明作业.html" method="post"> 用户名: <input type="text" name="y" id="y" /><br /> 密码: <input type="password" name="p" id="p" /><br /> 确认密码:<input type="password" name="qp" id="qp"/><br /> 年龄: <input type="text" name="n" id="n" /> <br /> 手机号: <input type="text" name="s" id="s" /><br />; <input type="submit" value="提交" onclick="return Ti()" /> </form> </body> <script type="text/javascript"> function Ti() { var y=document.getElementById("y").value; if (y=="") { alert("请输入用户名"); y空是时候弹出 return false; } else y输入东西的时候执行下一步 { var p= document.getElementById("p").value; var qp = document.getElementById("qp").value; if (p!=qp) { alert("密码不一致"); return false; } else { var n= document.getElementById("n").value; if ( n<18 || n>30 ) { alert("年龄不符"); return false; } else { var s = document.getElementById("s").value; var z = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/; if(s.match(z)==null) { alert("手机号错误"); return false; } else { return true; } return true; } return true; } return true; } } </script>
posted on 2018-04-10 16:31 sunyexiang 阅读(184) 评论(1) 编辑 收藏 举报