js表单简单验证（手机号邮箱）

rainbow-1 2022-01-01 原文

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <script type="text/javascript">
 7             function on_click(){
 8                 var email = document.getElementById("input1").value.trim();
 9                 var telph = document.getElementById("input2").value.trim();
10 
11                 if(email == "" ||telph == ""){
12                     alert("The email or telph is blank!!!");
13                     return false;
14                 }
15 
16                 if (email.indexOf("@") == -1){
17                     alert("an @ is not in an email !!!");
18                     return false;
19                 }
20 
21                 var re = /^([0-9]{3}-)?[0-9]{3}-[0-9]{4}$/;
22                 if (re.test(telph) == false){
23                     alert("telph number is not match xxx-xxxx or xxx-xxx-xxxx")
24                     return false;
25                 }
26 
27                 alert("ok, email:" + email + ", telephone:" + telph);
28                 return true;
29             }
30         </script>
31 </head>
32 
33 <body>
34     email:
35     <input id="input1"></input>
36     <br>
37     <!--必须有@-->
38     telph:
39     <input id="input2"></input>
40     <br>
41     <!--必须满足xxx-xxxx or xxx-xxx-xxxx-->
42     
43     <button type="button" onclick=on_click()>test</button>
44 </body>
45 </html>

电话号码的验证：

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <script type="text/javascript">
 7             function isValidate(myform){
 8                 var tel=myform.tel.value;
 9                 if(tel.length==0){
10                     alert("手机号码不能是空值！");
11                     tel.focus();
12                     return false;
13                     }
14                 else if(tel.length!=11){
15                     alert("请输入有效位数的手机号码！")
16                     tel.focus();
17                     return false;
18                 }
19                 var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
20                 if(!myreg.test(tel)) { 
21                    alert("请输入正确格式的手机号码！"); 
22                     return false; 
23                   } 
24             }
25         </script>
26 </head>
27 <body>
28     <form method="post" name="myform" action="" >
29     <tr>
30     
31         <td>
32             <font size="3" color="#112266" >手机号码：</font><br>
33             <input type="text" name="tel" value="">
34         </td>
35     </tr>
36     </form>
37     <button type="button" onclick=isValidate(myform)>test</button>
38 </body>
39 </html>