一个简单的注意页面
<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" onsubmit="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>