jQuery/javascript实现网页注册的表单验证

简介: 1 2 3 4 注册表单验证 5 6 7 table{background-color:pink;width:80%;height:300px;} 8 td{text-align:center;} 9 10 11 $("document").
  1 <html>
  2 <head>
  3 <meta charset="utf-8">
  4 <title>注册表单验证</title>
  5 <script src="jquery.js"></script>
  6 <style type="text/css">
  7     table{background-color:pink;width:80%;height:300px;}
  8     td{text-align:center;}
  9 </style>
 10 <script language="javascript">
 11     $("document").ready(function(){
 12         $("#form1").submit(function(){
 13             var user=$("#user").val();
 14             var username=/^[a-z]{6,10}/i;
 15             if(user.length==0){
 16                 $("#error1").html("账号不可以为空");
 17                 return false;
 18             }else if(!username.test(user)){
 19                 $("#error1").html("请输入6-10的字母");
 20                 return false;
 21             }else{
 22                 $("#error1").html("输入正确");
 23             }
 24             
 25             var password=$("#pw").val();
 26             var password1=/^[0-9]{6,10}/;
 27             if(password.length==0){
 28                 $("#error2").html("密码不可以为空");
 29                 return false;
 30             }else if(!password1.test(password)){
 31                     $("#error2").html("请输入6-10位的数字密码");
 32                     return false;
 33                 }else{
 34                     $("#error2").html("输入正确");
 35                 }
 36             
 37             var name=$("#name").val();
 38             var name1=/^[a-z]{6,10}/i;
 39             if(name.length==0){
 40                 $("#error3").html("姓名不可以为空");
 41                 return false;
 42             }else if(!name1.test(name)){
 43                 $("#error3").html("请输入6-10位字母");
 44                 return false;
 45             }else{
 46                 $("#error3").html("输入正确");
 47             }
 48             
 49             
 50             var age=$("#ag").val();
 51             var age1=/^[1-9]{1}[0-9]{0,1}$/;
 52             if(age.length==0){
 53                 $("#error4").html("年龄不可以为空");
 54                 return false;
 55             }else if(!age1.test(age)){
 56                 $("#error4").html("请输入合法年龄");
 57                 return false;
 58             }else{
 59                 $("#error4").html("输入正确");
 60             }
 61             
 62             var email=$("#em").val();
 63             var email1=/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/;
 64             if(email.length==0){
 65                 $("#error5").html("email不可以为空");
 66                 return false;
 67             }else if(!email1.test(email)){
 68                 $("#error5").html("请输入合法电子邮件");
 69                 return false;
 70             }else{
 71                 $("#error5").html("输入正确");
 72             }
 73             
 74             var telephone=$("#tel").val();
 75             var telephone1=/^[1]{1}[0-9]{10}/;
 76             if(telephone.length==0){
 77                 $("#error6").html("电话不可以为空");
 78                 return false;
 79             }else if(!telephone1.test(telephone)){
 80                 $("#error6").html("请输入合法电话");
 81                 return false;
 82             }else{
 83                 $("#error6").html("输入正确");
 84             }
 85             
 86         });
 87     });
 88 </script>
 89 </head>
 90 <body>
 91 <center>
 92 <form action="" method="post" id="form1" name="form1">
 93     <h1>注册页面</h1>
 94     <table border="1px">
 95         <tr>
 96             <td>
 97                 账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:
 98                 <input type="text" name="admin" id="user"/>
 99                 <div id="error1" style="display:inline;color:red;"></div>
100             </td>
101         </tr>
102         <tr>    
103             <td>
104                 密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:
105                 <input type="password" name="password" id="pw"/>
106                 <div id="error2" style="display:inline;color:red;"></div>
107             </td>
108         </tr>
109         <tr>        
110             <td>
111                 姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:
112                 <input type="text" name="name1" id="name"/>
113                 <div id="error3" style="display:inline;color:red;"></div>
114             </td>
115         </tr>
116         <tr>
117             <td>
118                 年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄:
119                 <input type="text" name="age" id="ag"/>
120                 <div id="error4" style="display:inline;color:red;"></div>
121             </td>
122         </tr>
123         <tr>
124             <td>
125                 性别:
126                 <input type="radio" name="sex" value="boy"/>男
127                 <input type="radio" name="sex" value="girl"/>女    
128             </td>
129         </tr>
130         <tr>
131             <td>
132                 电子邮件:<input type="text" name="email" id="em"/>
133                 <div id="error5" style="display:inline;color:red;"></div>
134             </td>
135         </tr>
136         <tr>        
137             <td>
138                 电话号码:<input type="text" name="telephone" id="tel"/>
139                 <div id="error6" style="display:inline;color:red;"></div>
140             </td>
141         </tr>
142         <tr>    
143             <td align="center">
144                     <input type="submit" value="注册"/>
145                     
146             </td>
147             
148         </tr>
149     </table>
150 </form>    
151 </center>
152 </body>
153 </html>

  1 <html>
  2 <head>
  3 <meta charset="utf-8">
  4 <title>正则表达式表单验证</title>    
  5     <style type="text/css">
  6         table{background-color:yellow;border:2px blue solid;}
  7     </style>
  8 </head>    
  9 <body>
 10 <center>
 11     <form action="login.html" method="post" onsubmit="return isForm()">
 12         <h1>注册页面</h1>
 13         <table border="1px" width="350px" height="400px">
 14             <tr>
 15                 <td>
 16                     账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:
 17                     <input type="text" name="username" id="user"/>
 18                     <div id="error1" style="display:inline;color:red;"></div>
 19                 </td>
 20             </tr>
 21             <tr>
 22                 <td>
 23                     密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:
 24                     <input type="password" name="password" id="pw"/>
 25                     <div id="error2" style="display:inline;color:red;"></div>
 26                 </td>
 27             </tr>
 28             <tr>
 29                 <td>
 30                     姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:
 31                     <input type="text" name="name1" id="name"/>
 32                     <div id="error3" style="display:inline;color:red;"></div>    
 33                 </td>
 34             </tr>
 35             <tr>
 36                 <td>
 37                     性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:
 38                     <input type="radio" name="sex" value="boy"/>男
 39                         <input type="radio" name="sex" value="girl"/>女        
 40                 </td>
 41             </tr>
 42             <tr>
 43                 <td>
 44                     年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄:
 45                     <input type="text" name="age" id="ag"/>
 46                     <div id="error4" style="display:inline;color:red;"></div>
 47                 </td>
 48             </tr>
 49             <tr>
 50                 <td>
 51                     电子邮件:<input type="text" name="email" id="em"/>
 52                     <div id="error5" style="display:inline;color:red;"></div>
 53                 </td>
 54             </tr>
 55             <tr>
 56                 <td>
 57                     电话号码:<input type="text" name="telephone" id="tel"/>
 58                     <div id="error6" style="display:inline;color:red;"></div>
 59                 </td>
 60             </tr>
 61             <tr>
 62                 <td align="center">
 63                     <input type="submit" value="注册"/>
 64                 </td>
 65             </tr>
 66         </table>
 67     </form>
 68     <script language="javascript">
 69         function isForm(){
 70             var username=document.getElementById("user").value;
 71             var password=document.getElementById("pw").value;
 72             var name=document.getElementById("name").value;
 73             var age=document.getElementById("ag").value;
 74             var email=document.getElementById("em").value;
 75             var telephone=document.getElementById("tel").value;
 76             
 77             
 78             var error1=document.getElementById("error1");
 79             var error2=document.getElementById("error2");
 80             var error3=document.getElementById("error3");
 81             var error4=document.getElementById("error4");
 82             var error5=document.getElementById("error5");
 83             var error6=document.getElementById("error6");
 84             
 85             var username1=/^[a-z]{6,10}/i;
 86             var password1=/^[0-9]{6,10}/;
 87             var name1=/^[a-z]{6,10}/i;
 88             var age1=/^[1-9]{1}[0-9]{0,1}$/;
 89             var email1=/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/;
 90             var telephone1=/^[1]{1}[0-9]{10}/;
 91             
 92             
 93             
 94             if(!username1.test(username)){
 95                 alert("请输出6-10位字母");
 96                 return false;
 97             }
 98             error1.innerHTML="输入正确";
 99             if(!password1.test(password)){
100                 alert("请输入6-10的数字密码");
101                 return false;
102             }
103             error2.innerHTML="输入正确";
104             if(!name1.test(name)){
105                 alert("请输入6-10位字母");
106                 return false;
107             }
108             error3.innerHTML="输入正确";
109             if(!age1.test(age)){
110                 alert("请输入合法的年龄");
111                 return false;
112             }
113             error4.innerHTML="输入正确";
114             if(!email1.test(email)){
115                 alert("请输入合法电子邮件");
116                 return false;
117             }
118             error5.innerHTML="输入正确";
119             if(!telephone1.test(telephone)){
120                 alert("请输人电话联系方式");
121                 return false;
122             }
123             error6.innerHTML="输入正确";
124             return true;
125         }
126     
127     </script>
128 </center>    
129 </body>
130 </html>

目录
相关文章
|
11天前
|
JavaScript
网页CAD(JS Vue 预览dwg)如何二次开发常用的CAD编辑功能
```markdown # CAD网页编程概览 - 使用mxcad库,实现CAD操作如删除、复制、镜像、移动和旋转。 - `erase()`方法删除实体,`clone()`配合`transformBy()`用于复制和编辑。 - `mirror()`和`transformBy(setMirror)`执行镜像操作,基于参考线。 - `move()`和`transformBy(setToTranslation)`实现移动功能。 - `rotate()`和`transformBy(setToRotation)`进行旋转,支持角度输入。 ```
网页CAD(JS Vue 预览dwg)如何二次开发常用的CAD编辑功能
|
10天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
1月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的旅游网页附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的旅游网页附带文章和源代码部署视频讲解等
17 2
基于ssm+vue.js+uniapp小程序的旅游网页附带文章和源代码部署视频讲解等
|
18天前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战
|
24天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
28天前
|
JavaScript 前端开发 Android开发
kotlin安卓在Jetpack Compose 框架下使用webview , 网页中的JavaScript代码如何与native交互
在Jetpack Compose中使用Kotlin创建Webview组件,设置JavaScript交互:`@Composable`函数`ComposableWebView`加载网页并启用JavaScript。通过`addJavascriptInterface`添加`WebAppInterface`类,允许JavaScript调用Android方法如播放音频。当页面加载完成时,执行`onWebViewReady`回调。
|
1月前
|
Web App开发 监控 JavaScript
破解动态网页:如何用JavaScript获取自动消失的联想词
【6月更文挑战第2天】在获取动态加载的联想词时,遇到问题:输入搜索词后弹出的联想词框在失去焦点时消失,使得直接定位HTML元素困难。解决方案包括: 1. 查找DOM节点:在弹框出现时记录其类名或ID,然后通过JavaScript获取元素HTML内容。但由于元素加载有延迟,需在输入框获取焦点后延迟执行,例如使用`setTimeout`。 2. 使用`MutationObserver`监视DOM变化:创建观察者监听特定类的元素出现,当元素加载时打印其HTML。为避免获取旧内容,回调函数中使用`setTimeout`确保DOM完全渲染。
22 3
|
8天前
|
JavaScript
JS【实战】跨域的网页链接跳转
JS【实战】跨域的网页链接跳转
6 0
|
10天前
|
JavaScript 数据安全/隐私保护
node.js 命令行的命令注册和配置工具(最新版) commander.js 实用教程(含自研脚手架的创建流程)
node.js 命令行的命令注册和配置工具(最新版) commander.js 实用教程(含自研脚手架的创建流程)
13 0
|
11天前
|
移动开发 前端开发 JavaScript