HTML JS 数据校验

简介: 用到了html字符串校验,这里记录一下。 1 2 3 4 function on_click(){ 5 var email = document.

用到了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字段必须满足正则表达式

 

相关文章
|
9天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
7天前
|
缓存 JavaScript 前端开发
js和html代码一定要分离吗
JavaScript(JS)和HTML代码的分离虽非绝对必要,但通常被推荐
|
7天前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
|
1月前
|
JSON 前端开发 JavaScript
使用html,css,js 实现一个龙年春节祝福卡片效果
使用html,css,js 实现一个龙年春节祝福卡片效果
39 4
|
1月前
|
前端开发
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
|
29天前
|
JavaScript 算法 前端开发
学习 node.js 六 Markdown 转为 html,zlib
【8月更文挑战第19天】
11 0
|
1月前
|
JavaScript 前端开发
JavaScript 改变 HTML 元素
JavaScript 改变 HTML 元素
39 0
|
1月前
|
前端开发 JavaScript
JavaScript 获取 HTML 元素方法
JavaScript 获取 HTML 元素方法
35 0
|
1月前
|
前端开发 JavaScript
前端 JavaScript 与 HTML 怎么实现交互
前端 JavaScript 与 HTML 怎么实现交互
|
1月前
|
存储 缓存 前端开发
如何将 JavaScript 添加到 HTML 页面
如何将 JavaScript 添加到 HTML 页面
38 0