一个简单的注册页面

最新推荐文章于 2022-07-12 15:23:35 发布

你猜我猜你猜不猜

最新推荐文章于 2022-07-12 15:23:35 发布

阅读量903

点赞数

分类专栏： html 文章标签： class xmlhttprequest input function 电话 email

本文链接：https://blog.csdn.net/zuowensheng/article/details/7800287

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一个简单的注意页面

<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>