CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:0;margin:0;} #header,#main{ width:650px; margin:0 auto; } .bg{ background-image:url(../images/register_bg.gif); background-repeat:no-repeat; width:6px; height:6px; } .bg_top_left{ background-position:0px 0px; } .bg_top_right{ background-position:0px -6px; } .bg_end_left{ background-position:0px -12px; } .bg_end_right{ background-position:0px -18px; } .bg_top{ border-top:solid 1px #666666; } .bg_end{ border-bottom:solid 1px #666666; } .bg_left{ border-left:solid 1px #666666; } .bg_right{ border-right:solid 1px #666666; } .content{ padding:10px; } .inputs{ border:solid 1px #a4c8e0; width:150px; height:15px; } .userWidth{ width:110px; } .content div{ float:left; font-size:12px; color:#000; } dl{ clear:both; } dt,dd{ float:left; } dt{ width:130px; text-align:right; font-size:14px; height:30px; line-height:25px; } dd{ font-size:12px; color:#666666; width:180px; } /*当鼠标放到文本框时,提示文本的样式*/ .import_prompt{ border:solid 1px #ffcd00; background-color:#ffffda; padding-left:5px; padding-right:5px; line-height:20px; } /*当文本框内容不符合要求时,提示文本的样式*/ .error_prompt{ border:solid 1px #ff3300; background-color:#fff2e5; background-image:url(../images/li_err.gif); background-repeat:no-repeat; background-position:5px 2px; padding:2px 5px 0px 25px; line-height:20px; } /*当文本框内容输入正确时,提示文本的样式*/ .ok_prompt{ border:solid 1px #01be00; background-color:#e6fee4; background-image:url(../images/li_ok.gif); background-repeat:no-repeat; background-position:5px 2px; padding:2px 5px 0px 25px; line-height:20px; }
// JavaScript Document /*通过ID获取HTML对象的通用方法,使用$代替函数名称*/ function $(elementId){ return document.getElementById(elementId); } /*当鼠标放在通行证用户名文本框时,提示文本及样式*/ function userNameFocus(){ var userNameId=$("userNameId"); userNameId.className="import_prompt"; userNameId.innerHTML="1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾,且长度为4-18"; } /*当鼠标离开通行证用户名文本框时,提示文本及样式*/ function userNameBlur(){ var userName=$("userName"); var userNameId=$("userNameId"); var reg=/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/; if(userName.value==""){ userNameId.className="error_prompt"; userNameId.innerHTML="通行证用户名不能为空,请输入通行证用户名"; return false; } if(reg.test(userName.value)==false){ userNameId.className="error_prompt"; userNameId.innerHTML="1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾,且长度为4-18"; return false; } userNameId.className="ok_prompt"; userNameId.innerHTML="通行证用户名输入正确"; return true; } /*当鼠标放在密码文本框时,提示文本及样式*/ function pwdFocus(){ var pwdId=$("pwdId"); pwdId.className="import_prompt"; pwdId.innerHTML="密码长度为6-16"; } /*当鼠标离开密码文本框时,提示文本及样式*/ function pwdBlur(){ var pwd=$("pwd"); var pwdId=$("pwdId"); if(pwd.value==""){ pwdId.className="error_prompt"; pwdId.innerHTML="密码不能为空,请输入密码"; return false; } if(pwd.value.length<6 || pwd.value.length>16){ pwdId.className="error_prompt"; pwdId.innerHTML="密码长度为6-16"; return false; } pwdId.className="ok_prompt"; pwdId.innerHTML="密码输入正确"; return true; } /*当鼠标离开重复密码文本框时,提示文本及样式*/ function repwdBlur(){ var repwd=$("repwd"); var pwd=$("pwd"); var repwdId=$("repwdId"); if(repwd.value==""){ repwdId.className="error_prompt"; repwdId.innerHTML="重复密码不能为空,请重复输入密码"; return false; } if(repwd.value!=pwd.value){ repwdId.className="error_prompt"; repwdId.innerHTML="两次输入的密码不一致,请重新输入"; return false; } repwdId.className="ok_prompt"; repwdId.innerHTML="两次密码输入正确"; return true; } /*当鼠标放在昵称文本框时,提示文本及样式*/ function nickNameFocus(){ var nickNameId=$("nickNameId"); nickNameId.className="import_prompt"; nickNameId.innerHTML="1、包含汉字、字母、数字、下划线以及@!#$%&*特殊字符<br/>2、长度为4-20个字符<br/>3、一个汉字占两个字符"; } /*当鼠标离开昵称文本框时,提示文本及样式*/ function nickNameBlur(){ var nickName=$("nickName"); var nickNameId=$("nickNameId"); var k=0; var reg=/^([\u4e00-\u9fa5]|\w|[@!#$%&*])+$/; // 匹配昵称 var chinaReg=/[\u4e00-\u9fa5]/g; //匹配中文字符 if(nickName.value==""){ nickNameId.className="error_prompt"; nickNameId.innerHTML="昵称不能为空,请输入昵称"; return false; } if(reg.test(nickName.value)==false){ nickNameId.className="error_prompt"; nickNameId.innerHTML="只能由汉字、字母、数字、下划线以及@!#$%&*特殊字符组成"; return false; } var len=nickName.value.replace(chinaReg,"ab").length; //把中文字符转换为两个字母,以计算字符长度 if(len<4||len>20){ nickNameId.className="error_prompt"; nickNameId.innerHTML="1、长度为4-20个字符<br/>2、一个汉字占两个字符"; return false; } nickNameId.className="ok_prompt"; nickNameId.innerHTML="昵称输入正确"; return true; } /*当鼠标放在关联手机号文本框时,提示文本及样式*/ function telFocus(){ var telId=$("telId"); telId.className="import_prompt"; telId.innerHTML="1、手机号码以13,15,18开头<br/>2、手机号码由11位数字组成"; } /*当鼠标离开关联手机号文本框时,提示文本及样式*/ function telBlur(){ var tel=$("tel"); var telId=$("telId"); var reg=/^(13|15|18)\d{9}$/; if(tel.value==""){ telId.className="error_prompt"; telId.innerHTML="关联手机号码不能为空,请输入关联手机号码"; return false; } if(reg.test(tel.value)==false){ telId.className="error_prompt"; telId.innerHTML="关联手机号码输入不正确,请重新输入"; return false; } telId.className="ok_prompt"; telId.innerHTML="关联手机号码输入正确"; return true; } /*当鼠标放在保密邮箱文本框时,提示文本及样式*/ function emailFocus(){ var emailId=$("emailId"); emailId.className="import_prompt"; emailId.innerHTML="请输入您常用的电子邮箱"; } /*当鼠标离开保密邮箱文本框时,提示文本及样式*/ function emailBlur(){ var email=$("email"); var emailId=$("emailId"); var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/; if(email.value==""){ emailId.className="error_prompt"; emailId.innerHTML="保密邮箱不能为空,请输入保密邮箱"; return false; } if(reg.test(email.value)==false){ emailId.className="error_prompt"; emailId.innerHTML="保密邮箱格式不正确,请重新输入"; return false; } emailId.className="ok_prompt"; emailId.innerHTML="保密邮箱输入正确"; return true; } /*表单提交时验证表单内容输入的有效性*/ function checkForm(){ var flagUserName=userNameBlur(); var flagPwd=pwdBlur(); var flagRepwd=repwdBlur(); var flagNickName=nickNameBlur(); var flagTel=telBlur(); var flagEmail=emailBlur(); userNameBlur(); pwdBlur(); repwdBlur(); nickNameBlur(); telBlur(); emailBlur(); if(flagUserName==true &&flagPwd==true &&flagRepwd==true &&flagNickName==true&&flagTel==true&flagEmail==true){ return true; } else{ return false; } }
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>新用户注册页面</title> <link type="text/css" rel="stylesheet" href="css/register.css" /> <script type="text/javascript" src="js/register.js"></script> </head> <body> <div id="header"><img src="images/register_logo.gif" alt="logo"/></div> <div id="main"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="bg bg_top_left"></td> <td class="bg_top"></td> <td class="bg bg_top_right"></td> </tr> <tr> <td class="bg_left"></td> <td class="content"> <form action="" method="post" name="myform" onsubmit="return checkForm()"> <dl> <dt>通行证用户名:</dt> <dd><input type="text" id="userName" class="inputs userWidth" onfocus="userNameFocus()" onblur="userNameBlur()" /> @163.com</dd> <div id="userNameId"></div> </dl> <dl> <dt>登录密码:</dt> <dd><input type="password" id="pwd" class="inputs" onfocus="pwdFocus()" onblur="pwdBlur()"/></dd> <div id="pwdId"></div> </dl> <dl> <dt>重复登录密码:</dt> <dd><input type="password" id="repwd" class="inputs" onblur="repwdBlur()"/></dd> <div id="repwdId"></div> </dl> <dl> <dt>性别:</dt> <dd><input name="sex" type="radio" value="" checked="checked"/>男 <input name="sex" type="radio" value="" />女 </dd> </dl> <dl> <dt>真实姓名:</dt> <dd><input type="text" id="realName" class="inputs" onblur="aa()" /></dd> </dl> <dl> <dt>昵称:</dt> <dd><input type="text" id="nickName" class="inputs" onfocus="nickNameFocus()" onblur="nickNameBlur()"/></dd> <div id="nickNameId"></div> </dl> <dl> <dt>关联手机号:</dt> <dd><input type="text" id="tel" class="inputs" onfocus="telFocus()" onblur="telBlur()" /></dd> <div id="telId"></div> </dl> <dl> <dt>保密邮箱:</dt> <dd><input type="text" id="email" class="inputs" onfocus="emailFocus()" onblur="emailBlur()" /></dd> <div id="emailId"></div> </dl> <dl> <dt></dt> <dd><input name=" " type="image" src="images/button.gif"/></dd> </dl> </form> </td> <td class="bg_right"></td> </tr> <tr> <td class="bg bg_end_left"></td> <td class="bg_end"></td> <td class="bg bg_end_right"></td> </tr> </table> </div> </body> <script type="text/javascript"> function aa(){ var reg = /^[\u4e00-\u9fa5]$/; var name = document.getElementById("realName").value; if(reg.test(name)==false){ alert("只能为汉字"); }else{ alert("正确"); } } </script> </html>
/* 输入:str 返回: 如果全是空返回true,否则返回false */ function isNull(str) { if (str == "") return true; var regu = "^[ ]+$"; var re = new RegExp(regu); return re.test(str); } /* 检查输入字符串是否只由英文字母和数字和下划线组成 输入: s:字符串 返回: 如果通过验证返回true,否则返回false */ function isNumberOr_Letter(s) {//判断是否是数字或字母 var regu = "^[0-9a-zA-Z\_]+$"; var re = new RegExp(regu); if (re.test(s)) { return true; } else { return false; } } /* 检查输入对象的值是否符合E-Mail格式 输入:str 输入的字符串 返回:如果通过验证返回true,否则返回false */ function isEmail(str) { var myReg = /^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/; if (myReg.test(str)) return true; return false; } /* 检查输入手机号码是否正确 输入: s:字符串 返回: 如果通过验证返回true,否则返回false */ function checkMobile(s) { var regu = /^[1][0-9][0-9]{9}$/; var re = new RegExp(regu); if (re.test(s)) { return true; } else { return false; } } /* 检查输入字符串是否是数字 输入: str:字符串 返回: 如果通过验证返回true,否则返回false */ function isNumber(str) { var reg = /^\d+$/; if (reg.test(str)) return true; else return false; } /* 检查输入字符串是否符合正整数格式 输入: s:字符串 返回: 如果通过验证返回true,否则返回false */ function isNumber(s) { var regu = "^[0-9]+$"; var re = new RegExp(regu); if (s.search(re) != -1) { return true; } else { return false; } } /* 检查输入字符串是否符合国内固话或者传真格式 输入: s:字符串 格式例如:020-87110252 返回: 如果通过验证返回true,否则返回false */ function isTel(s){ var reg=/^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/; if(!reg.test(s)) return false ; return true } /*检查输入字符串是否符合身份证格式 输入: s:字符串 返回: 如果通过验证返回true,否则返回false */ function isIDno(strIDno) { var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}; var iSum = 0; var info = ""; //var strIDno = obj.value; var idCardLength = strIDno.length; if(!/^\d{17}(\d|x)$/i.test(strIDno)&&!/^\d{15}$/i.test(strIDno)) { //alert("非法身份证号"); return false; } //在后面的运算中x相当于数字10,所以转换成a strIDno = strIDno.replace(/x$/i,"a"); if(aCity[parseInt(strIDno.substr(0,2))]==null) { //alert("非法地区"); return false; } if (idCardLength==18) { sBirthday=strIDno.substr(6,4)+"-"+Number(strIDno.substr(10,2))+"-"+Number(strIDno.substr(12,2)); var d = new Date(sBirthday.replace(/-/g,"/")) if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate())) { //alert("非法生日"); return false; } for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(strIDno.charAt(17 - i),11); if(iSum%11!=1) { //alert("非法身份证号"); return false; } } else if (idCardLength==15) { sBirthday = "19" + strIDno.substr(6,2) + "-" + Number(strIDno.substr(8,2)) + "-" + Number(strIDno.substr(10,2)); var d = new Date(sBirthday.replace(/-/g,"/")) var dd = d.getFullYear().toString() + "-" + (d.getMonth()+1) + "-" + d.getDate(); if(sBirthday != dd) { //alert("非法生日"); return false; } } return true; } /* 校验ip地址的格式 输入:strIP:ip地址 返回:如果通过验证返回true,否则返回false; */ function isIP(strIP) { if (isNull(strIP)) return false; var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式 if (re.test(strIP)) { if (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256) return true; } return false; } /* 检查开始日期是否小于等于结束日期 输入: s:字符串 开始日期 格式:2014-3-23 e:字符串 结束日期 格式:2014-3-25 返回: 如果通过开始日期小于等于结束日期返回true,否则返回false */ function data_compare(s,e) { var arr=s.split("-"); var starttime=new Date(arr[0],arr[1],arr[2]); var starttimes=starttime.getTime(); var arrs=e.split("-"); var endtime=new Date(arrs[0],arrs[1],arrs[2]); var endtimes=endtime.getTime(); if(starttimes>=endtimes) { //alert('开始时间大于离开时间,请检查'); return false; } else return true; } /* 检查输入字符串是否只由汉字组成 输入: s:字符串 返回: 如果通过验证返回true,否则返回false */ function isZh(str){ var reg = /^[\u4e00-\u9fa5]+$/; if (reg.test(str)) return true; return false; } /* 检查输入字符串是否符合金额格式 格式定义为带小数的正数,小数点后最多三位 输入: s:字符串 返回: 如果通过验证返回true,否则返回false */ function isMoney(s) { var regu = "^[0-9]+[\.][0-9]{0,3}$"; var re = new RegExp(regu); if (re.test(s)) { return true; } else { return false; } } /* 用途:检查输入对象的值是否符合端口号格式 输入:str 输入的字符串 返回:如果通过验证返回true,否则返回false */ function isPort(str) { return (isNumber(str) && str < 65536); } /* 用途:字符1是包含字符串2 输入:str1:字符串;str2:被包含的字符串 返回:如果通过验证返回true,否则返回false */ function isMatch(str1, str2) { var index = str1.indexOf(str2); if (index == -1) return false; return true; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步