js验证

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 }