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

  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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端架构

IntelliJ IDEA For Mac 快捷键,重点标注常用需记忆的

⌘⌥← / ⌘⌥→ 退回 / 前进到上一个操作的地方 Ctrl + Alt + ← Ctrl + Alt + →

642
来自专栏DeveWork

WordPress 中变量$allowedposttags 添加自定义HTML属性

在使用Options Framework 的时候,发现如果输入的textarea 如果是HTML 代码,一些标签的属性会被过滤(比如说date-*)属性。查看了...

1845
来自专栏木制robot技术杂谈

常用命令行快捷键

1235
来自专栏更流畅、简洁的软件开发方式

QuickPager asp.net 分页控件、表单控件等自定义控件下载 和介绍 【2009.09.07更新】

最新下载地址: 自然框架的源代码、Demo、数据库、配置信息管理程序下载(2010.01.25更新) QuickControl web控件集包含的控件 Qu...

2036
来自专栏xingoo, 一个梦想做发明家的程序员

使用gcc编译gdb调试

gcc 在linux系统中,默认是没有安装gcc编译器的,可以通过命令 rpm -q | grep gcc  来查看。安装命令为: yum -y install...

1957
来自专栏Java技术分享

基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用

在上篇《基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理》介绍了Bootstrap开发框架的一些基础性概括,包括总体界面...

2665
来自专栏小特工作室

Navi.Soft31.开发工具(含下载地址)

1系统简介 1.1功能简述 在软件开发过程中,我们需要经常对字符串、文件、数据库操作。有时需要浏览Json格式串,有时需要浏览Xml格式串,有时需要读取txt或...

2199
来自专栏从零开始学 Web 前端

从零开始学 Web 之 HTML5(三)网络监听,全屏,文件读取,地理定位接口,应用程序缓存

于是就变成了 webkitRequestFullScreen(), mozRequestFullScreen(), msRequestFullScreen()。...

573
来自专栏葡萄城控件技术团队

AngularJS入门教程1--配置环境

首先需要下载AngualrJS,下载地址 https://angularjs.org/ 官方网站提供2种下载使用AngularJS方法: angularjs_e...

1865
来自专栏开源优测

python selenium2 常用方法

完整路径 C:\Python27\Lib\site-packages\selenium\webdriver\remote\webdrive...

3104

扫码关注云+社区