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 条评论
登录 后参与评论

相关文章

来自专栏deepcc

js判断手机浏览器

3268
来自专栏九彩拼盘的叨叨叨

location 对象详解

Location 对象包含有关当前 URL 的信息。 可通过 window.location 属性来访问。

752
来自专栏Django中文社区

博客文章详情页

首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按钮,应该跳转到文章的详情页面来阅读文章的详细内容。现在让我们来开发博客的详...

3497
来自专栏智能合约

PHP魔术方法之__set()和__get()

1223
来自专栏用户2442861的专栏

Python 编码转换与中文处理

python 中的 unicode是让人很困惑、比较难以理解的问题. 这篇文章 写的比较好,utf-8是 unicode的一种实现方式,unicode、gb...

892
来自专栏Golang语言社区

Go 语言结构

o Hello World 实例 Go 语言的基础组成有以下几个部分: 包声明 引入包 函数 变量 语句 & 表达式 注释 接下来让我们来看下简单的代码,该代码...

3427
来自专栏开源优测

21条自动化测试过程中遭遇的问题及解决思路

1、找不到元素,脚本报“NoSuchElementException:Unable to find element”,或者"定位到了,不能操作,点击无效"

1363
来自专栏程序员的诗和远方

SASS用法介绍

SASS是一种CSS预处理器提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。 安装SASS SASS需要ruby支持,还...

4058
来自专栏杨逸轩 ' sBlog

如何将Pjax整合进网站,实现全站无刷新加载?

2689
来自专栏xcywt

《Linux命令行与shell脚本编程大全》第十七章 创建函数

可以将shell脚本代码放进函数中封装起来,这样就能在脚本中的任何地方多次使用它了。 17.1 基本的脚本函数 函数:是一个脚本代码块,可以为其命名并在代码中任...

17810

扫码关注云+社区