基本的注册内容都有了,用户名,密码,手机号,邮箱等
验证规则一般,有需要可更改。
用表格写的,简单一些
css:一张背景图片
.divshow{background:url(“img/QQ图片20170605135702.jpg”);}
js:有些重复的地方(整一下进行封装可减少代码量)
//创建验证码
function createCode(){
var code = Math.floor(Math.random()*9000+1000);
var span = document.getElementById("codeSpan");
span.innerHTML = code;
}
//校验验证码
function checkCode(){
//获取系统生成的验证码
var code1 = document.getElementById("codeSpan").innerHTML;
//获取用户输入的验证码
var code2 = document.getElementById("code").value;
//获取span
var span = document.getElementById("code2Span");
//创建校验规则
if(code2=="" ||code2==null){
span.innerHTML = "验证码不能为空";
span.style.color = "red";
return false;
}else if(code1==code2){
span.innerHTML = "验证码正确";
span.style.color = "green";
return true;
}else{
span.innerHTML = "验证码错误";
span.style.color = "red";
return false;
}
}
//验证用户名
function checkUname(){
//获取用户的用户名信息
var uname = document.getElementById("uname").value;
//创建校验规则
var reg = /^[\u4e00-\u9fa5]{2,4}$/;
//获取span对象
var span = document.getElementById("unameSpan");
//开始校验
if(uname=="" ||uname==null){
//先检查是否为空
span.innerHTML = "用户名不能为空";
span.style.color = "red";
return false;
}else if(reg.test(uname)){
//根据条件检验,输出校验结果
span.innerHTML = "用户名ok";
span.style.color = "green";
return true;
}else{
span.innerHTML = "用户名不符合规则";
span.style.color = "red";
return false;
}
}
//验证密码
function checkPwd(){
//获取用户的密码
var pwd = document.getElementById("pwd").value;
//获取校验规则
var reg = /^[a-z]\w{5,7}$/;
//获取span对象
var span = document.getElementById("pwdSpan");
//开始校验
if(pwd=="" ||pwd==null){
//输出校验结果
span.innerHTML = "密码不能为空";
span.style.color = "red";
return false;
}else if(reg.test(pwd)){
span.innerHTML = "密码ok";
span.style.color = "green";
return true;
}else {
span.innerHTML = "密码格式不正确";
span.style.color = "red";
return false;
}
checkPwd2();
}
//校验确认密码
function checkPwd2(){
//获取第一次密码
var pwd = document.getElementById("pwd").value;
//获取确认密码
var pwd2 = document.getElementById("pwd2").value;
//获取span对象
var span = document.getElementById("pwd2Span");
//比较两次密码是否相同
if(pwd2=="" ||pwd2==null){
span.innerHTML = "密码不能为空";
span.style.color = "red";
return false;
}else if(pwd2==pwd){
span.innerHTML = "密码ok";
span.style.color = "green";
return true;
}else{
span.innerHTML = "密码格式不正确";
span.style.color = "red";
return false;
}
}
//校验手机号
function checkPhone(){
return checkField("phone",/^1[3,4,5,7,8]\d{9}$/);
}
//校验邮箱
function checkMail(){
return checkField("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/);
}
//校验籍贯
function checkAddress(){
//获取用户选择的数据
var sel = document.getElementById("address").value;
//获取span
var span = document.getElementById("addressSpan");
//校验
if(sel!=0){
span.innerHTML = "籍贯选择成功";
span.style.color = "green";
}else{
span.innerHTML = "籍贯不能为请选择";
span.style.color = "red";
}
}
//检验爱好
function checkFav(){
//获取所有的爱好
var favs = document.getElementsByName("fav");
//获取span
var span = document.getElementById("favSpan");
//遍历
for(var i=0;i<favs.length;i++){
if(favs[i].checked){
span.innerHTML = "爱好选择成功";
span.style.color = "green";
return ;
}
}
span.innerHTML = "爱好至少选择一项";
span.style.color = "red";
}
//校验自我介绍
function checkIntro(){
//获取对象
var intro = document.getElementById("intro").value;
//设立校验规则
var reg = /^[a-zA-Z\u4e00-\u9fa5]{10,30}$/;
//获取span
var span = document.getElementById("introSpan");
//设立校验规则
if(intro=="" ||intro==null){
span.innerHTML = "个人介绍不能为空";
span.style.color = "red";
return false;
}else if(reg.test(intro)){
span.innerHTML = "个人介绍ok";
span.style.color = "green";
return true;
}else{
span.innerHTML = "个人介绍格式不正确";
span.style.color = "red";
return false;
}
}
//校验协议
function checkAgree(){
document.getElementById("sub").disabled=!document.getElementById("agree").checked;
}
//校验提交
function checkSub(){
checkUname();
checkPwd();
checkPwd2();
checkMail();
checkPhone();
checkFav();
checkAddress();
checkCode();
checkIntro();
return checkUname()&&checkPwd()&&checkPwd2()&&checkMail()&&checkPhone()&&checkFav()&&checkAddress()&&checkCode()&&checkIntro();
}
/*-----------------------------------------------------------------------------------------------*/
//封装校验:相同的保留,不同的传参
function checkField(id,reg) {
//获取用户数据
var inp = document.getElementById(id);
var va = inp.value;
var alt = inp.alt;
//获取span对象
var span = document.getElementById(id+"Span");
//开始校验
if(va=="" ||va==null){
//输出校验结果
span.innerHTML = alt+"不能为空";
span.style.color = "red";
return false;
}else if(reg.test(va)){
span.innerHTML = alt+"ok";
span.style.color = "green";
return true;
}else{
span.innerHTML = alt+"格式不正确";
span.style.color = "red";
return false;
}
}
html:
<body onload="createCode()">
<div class="divshow">
<form action="#" method="get" onsubmit="return checkSub()">
<table align="center">
<tr>
<td width="80px">用户名:</td>
<td width="350px">
<input type="text" name="uname" id="uname" value="" alt="用户名" onblur="checkUname()"/>
<span id="unameSpan">2*4位汗字</span>
</td>
</tr>
<tr>
<td width="80px">密码:</td>
<td width="350px">
<input type="password" name="pwd" id="pwd" value="" onblur="checkPwd()"/>
<span id="pwdSpan">6*8字母加数字组合</span>
</td>
</tr>
<tr>
<td width="80px">确认密码:</td>
<td width="350px">
<input type="password" name="pwd2" id="pwd2" value="" onblur="checkPwd2()"/>
<span id="pwd2Span"></span>
</td>
</tr>
<tr>
<td width="80px">手机号:</td>
<td width="350px">
<input type="text" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()"/>
<span id="phoneSpan"></span>
</td>
</tr>
<tr>
<td width="80px">邮箱:</td>
<td width="350px">
<input type="text" name="mail" id="mail" value="" alt="邮箱" placeholder="请输入邮箱" onblur="checkMail()"/>
<span id="mailSpan"></span>
</td>
</tr>
<tr>
<td width="80px">性别:</td>
<td>
男 <input type="radio" name="sex" id="sex" value="0" checked="checked"/>
女 <input type="radio" name="sex" id="sex" value="1" />
</td>
</tr>
<tr>
<td width="80px">籍贯:</td>
<td>
<select name="address" id="address" onchange="checkAddress()">
<option value="0">--请选择--</option>
<option value="1">北京</option>
<option value="2">宁夏</option>
<option value="3">天津</option>
</select>
<span id="addressSpan"></span>
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="fav" value="1" onclick="checkFav()">睡觉
<input type="checkbox" name="fav" value="2" onclick="checkFav()">吃饭
<input type="checkbox" name="fav" value="3" onclick="checkFav()">打豆豆<br />
<input type="checkbox" name="fav" value="4" onclick="checkFav()">跑步
<input type="checkbox" name="fav" value="5" onclick="checkFav()">听歌
<input type="checkbox" name="fav" value="6" onclick="checkFav()">上网
<span id="favSpan"></span>
</td>
</tr>
<tr>
<td>个人介绍:</td>
<td>
<textarea cols="40" rows="5" name="intro" id="intro" onblur="checkIntro()"></textarea>
<span id="introSpan"></span>
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type="text" name="code" id="code" value="" style="width: 110px;" onblur="checkCode()"/>
<span id="codeSpan" onclick="createCode()" style="background-image: url(img/timg.gif);color:black;"></span>
<span id="code2Span"></span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="checkbox" name="" id="agree" value="" onclick="checkAgree()">是否同意本公司协议
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="" id="sub" value="立即注册" disabled="disabled" />
</td>
</tr>
</table>
</form>
</div>
</body>
注册算是功能性代码,前段需要掌握,只是光前端,没有与后台交互