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

相关文章

来自专栏小古哥的博客园

HTML5复习整理

一、推出的目标 web浏览器兼容性低;文档结构不明确;web应用程序的功能受限 二、语法的改变 内容类型(html或htm);DOCTYPE声明简化;指定字符编...

3437
来自专栏lonelydawn的前端猿区

一款轻量级树形控件EasyTreeview

使用方法 引入 <link rel="stylesheet" type="text/css" href="./css/index.min.css"> <div ...

3539
来自专栏web前端-

rem和em小插曲

1.对em来说,它的大小是相对于父层font-size来改变,但是如果其自身有font-size属性的话,em会优先考虑自身的font-size;

842
来自专栏Golang语言社区

厚土Go学习笔记 | 19. slice和数组很像,但是slice可以添加元素

slice中文可以称为“切片”。是Go语言为处理同类型数据序列提供的一个高效且方便的方式。是在数组上抽象的一个数据类型。 切片的使用相当的广泛。 切片可以直接赋...

3747
来自专栏Google Dart

AngularDart Material Design 输入 顶

Selector: <material-input:not(material-input[multiline])>

1204
来自专栏liulun

学习WPF——元素绑定

概念 从源对象提取一些信息,并用这些信息设置目标对象的属性 示例 image.png image.png 数据绑定表达式使用XAML的标记扩展(因此具有花括号)...

2106
来自专栏HTML5学堂

2016.07 第2周 群问题分享

HTML+CSS 移动端中1px的边框如何实现 2016.07.04~2016.07.08 核心概念: viewport、CSS3属性 参考答案: 一、通过设置...

2856
来自专栏禹都一只猫博客

Go语言简介 — 特性

851
来自专栏河湾欢儿的专栏

Vue.js基础特性

计算属性 computed 与data,el,methods属性一样,都是vm实例的属性(选项) 理解其大致意思即可

991
来自专栏Google Dart

AngularDart4.0 指南- 模板语法二 顶

Class绑定语法类似于属性(property)绑定。 以前缀类开始,可选地跟一个点(.)和一个CSS类的名字替代括号内的元素属性:[class.class-n...

882

扫码关注云+社区