js表单简单验证(手机号邮箱)
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>
执行效果展示图:
①验证空值:
②验证手机号码位数不对:
③验证手机号格式内容不对(存在非数字内容!):
好看请赞,养成习惯:) 本文来自博客园,作者:靠谱杨, 转载请注明原文链接:https://www.cnblogs.com/rainbow-1/p/13941845.html
欢迎来我的51CTO博客主页踩一踩 我的51CTO博客
文章中的公众号名称可能有误,请统一搜索:靠谱杨的秘密基地