一个简单的注册页面

最新推荐文章于 2023-03-18 23:29:08 发布
最新推荐文章于 2023-03-18 23:29:08 发布
阅读量888 收藏
点赞数
分类专栏： html 文章标签： class xmlhttprequest input function 电话 email
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuowensheng/article/details/7800287
版权

一个简单的注意页面

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<title>用户注册</title>
<style type="text/css">
<!--
form.cmxform label.error, label.error {color: red;}
.STYLE1 {
	font-size: 18px;
	font-weight: bold;
	color: #0066FF;
}
.STYLE2 {
	
	font-weight: bold;
	font-size: 14px;
}
.STYLE3 {color: #FFFFFF}
.STYLE4 {
	font-size: 16px;
	font-weight: bold;
}
.STYLE5 {color: #FF0000}
.STYLE6 {color: #EEEEEE}
-->
</style>

<script>


//jq验证框架 用自己的写的正则表达式的嵌入方法
$().ready(function() {
jQuery.validator.addMethod("checkphone", function(value, element) {       
    var tel = /^\d{3,4}-?\d{7,9}$/;    //电话号码格式010-12345678   
     return this.optional(element) || (tel.test(value));       
 }, "请正确填写您的电话号码 例：010-12345678");   



 $("#signupForm").validate({
        rules: {
   organization: "required",
   organizationid: "required",
    manage: "required",
	postcode:{
	rangelength:[6,6],
	digits:true,
	required:true
	},
    phone: {
	checkphone:true,
	required:true
	},
	 name: "required",
telephone: {
required: true,
checkphone:true
},
address:   "required",
mobilephone: {
	required:true,
	digits:true,
	rangelength:[11,11]
	},
username:{
 required:true,
  minlength:6
 },
   email: {
    required: true,
    email: true
   },
   password: {
    required: true,
    minlength: 8
   },
  repassword: {
    required: true,
    minlength: 8,
    equalTo: "#password"
   }
  },
        messages: {
  organization: "请输入机构名称",
  organizationid: "请输入机构代码",
  manage: "请输入负责人",
  phone: {
   required:"请输入联系电话",
  digits:"只能输入数字"
  },
  name: "请输入管理员姓名",
  telephone: "请输入联系电话",
  address:"请输入机构地址",
  mobilephone:{
  required:"请输入移动电话",
   digits:"只能输入数字",
  rangelength:"手机只能是11位"   
  },
    username: {
	 required: "请输入用户名",
	 minlength: "用户名至少6个字符"
	},
	postcode:{
	 required:"请输入邮编",
	 digits:"只能输入数字",
	rangelength:"邮政编码只能是6位"
	},
   email: {
    required: "请输入Email地址",
    email: "请输入正确的email地址"
   },
   password: {
    required: "请输入密码",
    minlength: jQuery.format("密码不能小于8个字符")
   },
   repassword: {
    required: "请输入确认密码",
    minlength: "确认密码不能小于8个字符",
    equalTo: "两次输入密码不一致不一致"
   }
  }
    });
});
</script>

<script>
var flag="true";
var xmlHttp;
function checkcode(){
var yanzheng=document.getElementById("yanzheng").value; 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("浏览器不支持")
 return
 }
var url="check.php";
url=url+"?y="+yanzheng;
url=url+"&sid="+Math.random();

xmlHttp.onreadystatechange=stateChanged0;
xmlHttp.open("GET",url,true);
xmlHttp.send();
}
function stateChanged0() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
   var yanzheng=xmlHttp.responseText;
   if (yanzheng==1){
   alert("验证码错误！");
   flag="false";
 //  document.signupForm.yanzheng.select();
   }
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}
</script>

<script>
var xmlHttp;
function checkuser(){
var username=document.getElementById("username").value; 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("浏览器不支持")
 return
 }
var url="check.php";
url=url+"?q="+username;
url=url+"&sid="+Math.random();

xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send();
}


function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
   var username=xmlHttp.responseText;
   if (username==1){
   alert("用户名已存在！");
   document.signupForm.username.select();
   }
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}
</script>
</head>
<body bgcolor="#6C7487">

<form  action="check.php" method="post" οnsubmit="return flag;"  name="signupForm" id="signupForm">
<br />
<br />



   <table   border="1" cellpadding="0" cellspacing="0" align="center"  width="780px"  height="500px">
      <tr>
         <td colspan="4"><div align="center" class="STYLE1 STYLE3">投标用户注册</div></td>
      </tr>
	  <tr>
	  <td colspan="4"><span class="STYLE6">注册须知:<br />
1.用户名只能含有英文字母、数字等字符串，如 caigou01<br />

2.所有密码的输入长度至少8位的字符串<br />

3.机构名称即为公司名称<br />

4.E-mail的输入格式为 someone@somdomain.com <br />

5.负责人填写公司(单位)负责人，管理员填写负责招投标的负责人<br />

6.认真、准确填写管理员的 E-mail 地址，以便注册成功后，收取相关信息<br />

7.联系电话需要加区号如012-3456789</span><br /></td>
	  </tr>
	  <tr>
	  <td colspan="4" bgcolor="#EEEEEE" ><span class="STYLE2">机构信息:</span></td>
	  </tr>
      <tr>
         <td ><span class="STYLE6">机构名称:</span></td>
         <td colspan="3" ><input type="text" size="60" name="organization" id="organization" />
         <span class="STYLE5">*</span></td>
      </tr>
	  <tr>
	   <td class="STYLE6">单位地址：</td>
         <td colspan="3" ><input type="text" size="60" name="address" id="address" />
		   <span class="STYLE5">*</span></td>
	  </tr>
      <tr>
	    <td class="STYLE6" >机构代码：</td>
         <td ><input type="text"  name="organizationid" id="organizationid" />
         <span class="STYLE5">*</span></td>
        
         <td class="STYLE6">邮政编码：</td>
         <td><input type="text" name="postcode" id="postcode" />
		  <span class="STYLE5">*</span></td>
      </tr>
      <tr>
         <td class="STYLE6">负责人：</td>
         <td><input type="text" name="manage" id="manage"   />
         <span class="STYLE5">*</span></td>
         <td class="STYLE6">联系电话：</td>
         <td><input type="text" name="phone" id="phone" />
         <span class="STYLE5">*</span></td>
      </tr>
	  <tr>
         <td colspan="4"  bgcolor="#EEEEEE"  class="STYLE2">机构管理员:</td>
      </tr>
      <tr>
         <td class="STYLE6">管理员姓名：</td>
         <td><input type="text" name="name" id="name" onBlur="checkname()" />
            <span class="STYLE5">*</span></td>
         <td class="STYLE6">性别：</td>
         <td class="STYLE6"><input name="sex" type="radio" value="男" checked="checked" />
            男
         <input type="radio" name="sex" value="女" />女</td>
      </tr>
      <tr>
         <td class="STYLE6">联系电话</td>
         <td><input type="text" name="telephone" id="telephone" />
         <span class="STYLE5">*</span></td>
         <td class="STYLE6">移动电话：</td>
         <td><input type="text" name="mobilephone" id="mobilephone" />  <span class="STYLE5">*</span></td></td>
		
      </tr>
      <tr>
         <td class="STYLE6">传真：</td>
         <td><input type="text" name="fax" /></td>
         <td class="STYLE6">电子邮箱：</td>
         <td><input type="text" name="email" id="email"/>
         <span class="STYLE5">*</span></td>
      </tr>
      <tr>
            <td colspan="4" bgcolor="#EEEEEE" class="STYLE2">登陆账号:</td>
      </tr>
	    <tr>
         <td class="STYLE6">用户名：</td>
		 <td colspan="3">
           <input type="text" name="username" id="username" onBlur="checkuser()"/>
           <span class="STYLE5">*</span></td>
        
      </tr>
	    <tr>
         <td class="STYLE6">密码：</td>
         <td><input type="password" name="password" style="width:155px" id="password" />
           <span class="STYLE5">*</span></td>
         <td class="STYLE6">确认密码：</td>
         <td><input type="password" name="repassword" style="width:155px" id="repassword" />
           <span class="STYLE5">*</span></td>
      </tr>
	   <tr>
       <td class="STYLE6" colspan="4">
	   <div align="center">
     请输入验证码<input type="text" name="yanzheng" id="yanzheng"  size="3" onBlur="checkcode()"/> <a onClick="document.getElementById('yanimage').src='yan.php?'+Math.random()"><input type=image src="yan.php" align="absmiddle"  id="yanimage"  >看不清 </a>
       </div>
	   </td>
    
      </tr>
	  <tr>
	     <td colspan="4"><div align="center">
            <input type="submit" name="submit" id="submit" value="注 册"  />
         </div></td>
	  </tr>
   </table>
</form>

</body>
</html>


 

你猜我猜你猜不猜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS一个简单的注册页面实例
10-19
下面小编就为大家带来一篇JS一个简单的注册页面实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
用户注册页面的设计与实现
YQEMMMM的博客
10-21 2万+
用户注册页面的设计与实现 功能介绍： 1.使用HTML5表单技术实现用户注册页面，要求用户可以输入用户名、密码、真实姓名和电子邮箱等信息进行注册。 2.验证要求：每个输入栏目的文本框均需要显示提示信息。用户在点击按钮提交注册信息时可以验证所有栏目均为必填项以及电子邮箱的有效性。 实现效果图： 一、界面设计 1.使用<div>划分区域 2.使用CSS外部样式表定义样式 1）reg.css 2）关键属性：box-shadow: 10px 10px 15px black; 二、表单设计 1.使用&l
web前端——表单注册页面设计（注册信息）
weixin_65997960的博客
03-18 4643
在页面底部插入“电话”、“短信”、“E-Mail”和“返回顶部”4个导航链接，前三个导航链接必须使用相应的超链接伪协议，“返回顶部”链接到页面顶部锚点。另外，需设置链接状态样式，链接字体为蓝色，已访问过为灰色，鼠标经过时为红色，鼠标按下时为黄色。设置用户名、学号和密码为必填项，在输入域后显示红色“*”号，设置用户名输入框默认获得焦点，密码输入框中提示用户“请输入。除用户名、学号、密码、单选按钮、复选框、列表框和文本区之外，其它input元素必须为HTML5新增的输入类型；个选项，默认选择“成都”；
注册页面验证用户名和手机号
zuo_zuo_blog的博客
05-30 4275
HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单注册</title> <style> body { ...
网站注册页面制作
河北正定欢迎您-少占鱼
10-23 917
（一），设定注册页面的外观：   在这个例子中涉及了五个页面，其中有三幅是一般的htm文件，另外的两幅是asp文件，在这里制作利用的工具是frontpage98，但是大部分的asp代码还是要自己输入的：  1，设定原来已经注册的用户进入的外观：在这里设置了两个文本框，一个超级链接和两个按钮。两个文本框分别用来输入帐号（txtnum）和密码（txtpasswd），超级链接（new）链接到新用户进行注
完成一个较为完整的用户注册页面
FIGHTING的专栏
06-10 1万+
实验目的： 要求能够熟练掌握javascript的一系列知识要点，并能够熟练的应用到实际项目中，能够通过javascript语法、对象、事件、函数等来完成页面上的脚本代码。 实验内容： 要求： 完成一个较为完整的用户注册页面。 1：要求用户输入用户名时只能够输入英文、数字和下划线 2：要求用户输入的密码和确认密码必须一致 3：要求用户上传本地磁盘中的一个图片文件作为头像 4：要求用
一个简单注册界面.zip
12-16
源码参考，欢迎下载
简单百搭的登录注册页面
01-03
这是一套简单、简洁、百搭的登录注册页面，同时包含了“忘记密码”的几个页面。因为简单，所以百搭，适合所有的网站，直接拿来使用即可。
一个简单的HBuilder
03-12
利用HBuilder实现了一个简单的用户注册，登录，读取数据库中数据的功能(服务器和数据库需要自己搭建)。代码是企业实习安卓开发做的，做的一般般。我就是上传来玩一下。
java gui swing 实现注册界面 要求：户输入账号、密码、确认密码、性别、生日、兴趣、备注。其中带*为必填项。单击“注册”按钮，判断必填项是否填完整，两次密码是否输入一致。
Avadakur的博客
03-19 1万+
实现用户注册界面 设计实现用户注册界面，每组将实验报告提交至学习通，要求实验报告中包含功能展示与源代码。 要求：用户输入账号、密码、确认密码、性别、生日、兴趣、备注。其中带*为必填项。单击“注册”按钮，判断必填项是否填完整，两次密码是否输入一致。若注册信息有误，在左下角提示错误原因（选做）；若注册信息完整、正确，提示注册成功，将用户输入的信息打印到屏幕。按重置按钮将所有输入内容清空（必做）。 效果图 自认为很丑，但是功能认为还挺全 以下为代码实现，本人做出来的界面很丑，功能实现就可以。 代码内有注释。 i
简单登录注册界面html模板
04-25
用html、JS、css写的一个登录界面的网页，同时可以注册，方便实用。
简单的用户注册界面
11-18
新建网页，创建表单，在表单中建立表格（行列数应与表单元素一致），然后在单元格中输入文字和表单元素，制作用户注册页面
简单好看的登陆注册界面
10-16
一个简单的网页登陆和界面，可以识别输入的密码邮箱等格式错误，原代码有很多的不必要代码，被我修改后更加简洁，也更适合新手。
登录注册页面html
06-15
基于html css jq的登录注册页面，含validate手机号码验证,简单易懂，仅供学习使用，路啦啦啦啦啦啦啦
HTML5简单手机注册页面模板.zip
05-24
HTML5简单手机注册页面模板，自适应不同分辨率，兼容PC端和手机移动端。
HTML5菜鸟教程在线编译特效,菜鸟教程在线工具
weixin_39996134的博客
05-31 466
菜鸟教程(runoob.com)$.validator.setDefaults({submitHandler: function() {alert("提交事件!");}});$().ready(function() {// 在键盘按下并释放及提交后验证提交表单$("#signupForm").validate({rules: {firstname: "required",lastname: "re...
第十篇 编写一个简单的注册页面
weixin_30685029的博客
09-25 183
一个简单的注册页面 今天的课程学习，我们来一波综合，将前面学到的东西，做一次小练习，我们自定义一个注册页面，不需要太华丽，能表达清楚意思就可以了。 <!DOCTYPE html> <html> <head lang="en"> <!--支持中文字符集--> <meta charset="UTF-8...
RHEL5中配置Sendmail邮件服务
热门推荐
RHEL5
01-02 3万+
                                搭建Sendmail邮件系统1                          ☆邮件系统电子邮件系统的工作原理    电子邮件系统的运作方式与其它的网络应用有着根本上的不同。在其它的绝大多数的网络应用中，网络协议直接负责将数据发送到目的   地。而在电子邮件系统中，发送者并不等待发送工作完成，而是仅仅将要发送的内容
实现一个简单的注册页面注册
henry_rhy的博客
07-12 4281
简单实现一个页面注册
实现一个简单的登录注册页面
最新发布
03-22
好的，这是一个常见的编程问题。您可以使用 HTML、CSS 和 JavaScript 来实现一个简单的登录注册页面。以下是一个示例代码： HTML 代码： ``` <!DOCTYPE html> <html> <head> <title>登录注册页面</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class="form-container sign-up-container"> <form action="#"> <h1>创建账户</h1> <input type="text" placeholder="用户名"> <input type="email" placeholder="邮箱"> <input type="password" placeholder="密码"> <button>注册</button> </form> </div> <div class="form-container sign-in-container"> <form action="#"> <h1>登录</h1> <input type="text" placeholder="用户名"> <input type="password" placeholder="密码"> <a href="#">忘记密码？</a> <button>登录</button> </form> </div> <div class="overlay-container"> <div class="overlay"> <div class="overlay-panel overlay-left"> <h1>欢迎回来！</h1> <p>请登录您的账户以继续使用我们的服务。</p> <button class="ghost" id="signIn">登录</button> </div> <div class="overlay-panel overlay-right"> <h1>创建账户</h1> <p>请填写您的个人信息以创建账户。</p> <button class="ghost" id="signUp">注册</button> </div> </div> </div> </div> <script src="script.js"></script> </body> </html> ``` CSS 代码： ``` * { box-sizing: border-box; } body { background-color: #f6f5f7; font-family: 'Open Sans', sans-serif; } .container { background-color: #fff; border-radius: 10px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); position: relative; overflow: hidden; width: 768px; max-width: 100%; min-height: 480px; } .form-container { position: absolute; top: 0; height: 100%; transition: all 0.6s ease-in-out; } .sign-in-container { left: 0; width: 50%; z-index: 2; } .sign-up-container { left: 0; width: 50%; opacity: 0; z-index: 1; } .overlay-container { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; overflow: hidden; transition: transform 0.6s ease-in-out; z-index: 100; } .overlay { background: #ff416c; background: -webkit-linear-gradient(to right, #ff4b2b, #ff416c); background: linear-gradient(to right, #ff4b2b, #ff416c); background-repeat: no-repeat; background-size: cover; background-position: 0 0; color: #fff; position: relative; left: -100%; height: 100%; width: 200%; transform: translateX(0); transition: transform 0.6s ease-in-out; } .overlay-panel { position: absolute; top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 40px; height: 100%; width: 50%; text-align: center; transform: translateX(0); transition: transform 0.6s ease-in-out; } .overlay-left { transform: translateX(-20%); } .overlay-right { right: 0; transform: translateX(0); } form { background-color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 50px; height: 100%; text-align: center; } h1 { font-weight: bold; margin-top: 0; } input { background-color: #eee; border: none; padding: 12px 15px; margin: 8px 0; width: 100%; } button { border-radius: 20px; border: none; background-color: #ff416c; color: #fff; font-size: 16px; font-weight: bold; padding: 12px 0; margin: 16px 0; width: 100%; cursor: pointer; } button:hover { background-color: #ff4b2b; } .ghost { background-color: transparent; border-color: #fff; color: #fff; } a { color: #fff; font-size: 14px; text-decoration: none; margin: 15px 0; } .overlay-right button:hover { background-color: #fff; color: #ff416c; } .overlay-left button:hover { background-color: #fff; color: #ff416c; } @media screen and (max-width: 960px) { .container { min-height: 830px; height: auto; } .overlay { width: 100%; left: 0; } .form-container { width: 100%; height: 100%; } .sign-up-container { left: 100%; opacity: 1; } .sign-in-container { left: 0; } .overlay-container { width: 100%; left: 0; transform: translateX(0); } .overlay-left { transform: translateX(0); } .overlay-right { transform: translateX(20%); } } ``` JavaScript 代码： ``` const signUpButton = document.getElementById('signUp'); const signInButton = document.getElementById('signIn'); const container = document.getElementById('container'); signUpButton.addEventListener('click', () => { container.classList.add("right-panel-active"); }); signInButton.addEventListener('click', () => { container.classList.remove("right-panel-active"); }); ``` 这个页面包括一个登录表单和一个注册表单，以及一个切换登录和注册表单的功能。您可以根据需要进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值