1.错误验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/hello.js"></script> </head> <body> <h1>My First JavaScript</h1> <p>Please input a number between 5 and 10:</p> <input id="demo" type="text"> <button type="button" onclick="myFunction()">Test Input</button> <p id="mess"></p> </body> </html>
js代码
1 /** 2 * Created by ouym on 2017/6/16. 3 */ 4 5 function myFunction() { 6 try { 7 var x = document.getElementById("demo").value; 8 if (x == "") throw "empty"; 9 else if (isNaN(x)) throw "not a number"; 10 else if (x > 10) throw "too high"; 11 else if (x < 5) throw "too low"; 12 else throw x; 13 } 14 catch (err) { 15 var y = document.getElementById("mess"); 16 if (x >= 5 && x <= 10) 17 y.innerHTML = "Right: " + x + "."; 18 else 19 y.innerHTML = "Error: " + err + "."; 20 } 21 }
运行效果
2.表单验证两种方式
1通过button按钮的Onclick事件验证表单
2通过form表单的onsubmit="return xx()"的形式验证
方式1
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript" src="js/hello.js" ></script> 7 </head> 8 <body> 9 10 <h1>通过button按钮的Onclick事件验证表单</h1> 11 <form action="test.html" method="post" id="form1"> 12 <input type="text" id="form_text" /> 13 </form> 14 <button onclick="form_check()">提交</button> 15 16 </body> 17 </html> 18 19 <script> 20 function form_check(){ 21 var form_text=document.getElementById("form_text").value; 22 if(form_text!="1"){ 23 alert("请输入1"); 24 return false; 25 } 26 else{ 27 document.getElementById("form1").submit(); 28 } 29 } 30 </script>
运行效果
输入为1时，点击提交button，页面跳转；输入不为1时，点击提交button，页面不会跳转；这里表单都会得到验证。
但是不通过提交button，直接回车时，表单里的内容不管是不是1，页面都会跳转。这里表单不会得到验证。why？
此时的回车就是扮演了input type="submit"按钮的作用，无论html代码中是否有这个按钮。所以这里表单提交没有通过button按钮。
方式2
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--<script type="text/javascript" src="js/hello.js" ></script>--> 7 </head> 8 <body> 9 10 <h1>通过form表单的onsubmit="return xx()"的形式验证</h1> 11 <form action="test.html" method="post" onsubmit="return form_check()"> 12 <input type="text" id="form_text" /> 13 <input type="submit" value="提交" /> 14 </form> 15 16 </body> 17 </html> 18 19 <script> 20 function form_check(){ 21 var form_text=document.getElementById("form_text").value; 22 if(form_text!="1"){ 23 alert("请输入1"); 24 return false; 25 } 26 else{ 27 return true; 28 } 29 } 30 </script>
运行效果
这种形式，直接回车表单也会验证。所以推荐使用onsubmit的方式。
3.简单邮箱验证
html代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript" src="js/hello.js"></script> 7 </head> 8 <body> 9 <form action="submitpage.htm"onsubmit="return validate_form(this);" method="post"> 10 Email: <input type="text" name="email" size="30"> 11 <input type="submit" value="Submit"> 12 </form> 13 </body> 14 </html>
js代码
1 function validate_email(field,alerttxt) 2 { 3 with (field) 4 { 5 apos=value.indexOf("@") 6 dotpos=value.lastIndexOf(".") 7 if (apos<1||dotpos-apos<2) 8 {alert(alerttxt);return false} 9 else {return true} 10 } 11 } 12 13 function validate_form(thisform) 14 { 15 with (thisform) 16 { 17 if (validate_email(email,"Not a valid e-mail address!")==false) 18 {email.focus();return false} 19 } 20 }