HTML JS 数据校验

熊孩纸阅读：925 2020-10-18 22:04:22 评论：0

用到了html字符串校验，这里记录一下。

 1 <html> 
 2     <head> 
 3         <script type="text/javascript"> 
 4             function on_click(){ 
 5                 var email = document.getElementById("input1").value.trim(); 
 6                 var telph = document.getElementById("input2").value.trim(); 
 7          
 8                 if(email == "" ||telph == ""){ 
 9                     alert("The email or telph is blank!!!"); 
10                     return false; 
11                 } 
12                  
13                 if (email.indexOf("@") == -1){ 
14                     alert("an @ is not in an email !!!"); 
15                     return false; 
16                 } 
17                  
18                 var re = /^([0-9]{3}-)?[0-9]{3}-[0-9]{4}$/; 
19                 if (re.test(telph) == false){ 
20                     alert("telph number is not match xxx-xxxx or xxx-xxx-xxxx") 
21                     return false; 
22                 } 
23                  
24                 alert("ok, email:" + email + ", telephone:" + telph); 
25                 return true; 
26             } 
27         </script> 
28     </head> 
29      
30     <body> 
31         email: <input id = "input1"> </input> <br>    <!--必须有@--> 
32         telph: <input id = "input2"> </input> <br>    <!--必须满足xxx-xxxx or xxx-xxx-xxxx--> 
33         <button type="button" onclick=on_click()>test</button> 
34     </body> 
35 </html>

如图：

校验两个字段均不能为空

校验email字段必须包含@

校验telph字段必须满足正则表达式

标签:CSS 前端 HTML5

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。