您的位置:首页 > Web前端 > JavaScript

javaScript验证注册页面

2013-01-23 00:00 176 查看
jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<div id="divcontent">
<form id="registForm" name="registerForm" onsubmit="registercheck()" action="register.action" method="post">
<table width="850px" border="0" cellspacing="0">
<tr>
<td style="padding: 30px">
<h1>新会员注册</h1>
<table width="70%" border="0" cellspacing="2" class="upline">
<tr>
<td style="text-align: right; width: 20%">会员邮箱:</td>
<td style="width: 40%">
<input type="text" class="textinput" name="account" onblur="return check()"/>
<span id="mail" ></span>
</td>
<td>
<img src="../../material/images/check_use.gif" width="111"height="24" />
</td>
</tr>
<tr>
<td style="text-align: right">会员名:</td>
<td>
<input type="text" class="textinput" name="username" onblur="return checkname()"/>
<span id="user"></span>
</td>
<td>
<img src="../../material/images/check_use.gif" width="111"height="24" />
</td>
</tr>
<tr>
<td style="text-align: right">密码:</td>
<td>
<input type="password" class="textinput" name="password" onblur="return checkpassword()"/>
<span id="pass"></span>
</td>
<td><font color="#999999">密码设置至少6位,请区分大小写</font></td>
</tr>
<tr>
<td styl
3ff0
e="text-align: right">重复密码:</td>
<td>
<input type="password" class="textinput" name="password1" onblur="return checkpassword()"/>
<span id="repass"></span>
</td>
<td> </td>
</tr>
<tr>
<td style="text-align: right">性别:</td>
<td colspan="2">  
<input type="radio" name="radiobutton" value="radiobutton" />
男        
<input type="radio" name="radiobutton" value="radiobutton" />

</td>
</tr>
<tr>
<td style="text-align: right">联系方式:</td>
<td colspan="2"><input name="tel" type="text" class="textinput" /></td>
</tr>
<tr>
<td style="text-align: right">发货地址:</td>
<td colspan="2"><input name="addr" type="text" class="textinput"style="width: 350px" /></td>
</tr>
<tr>
<td style="text-align: right"> </td>
<td> </td>
<td> </td>
</tr>
</table>

<h1>密码保护信息 (以下信息用于取回密码以及处理其他帐户问题,请您慎重填写并牢记)</h1>
<table width="70%" border="0" cellspacing="2" class="upline">
<tr>
<td width="16%" style="text-align: right; width: 20%">密码保护问题:</td>
<td width="47%" style="width: 50%">
<select name="pwdp" class="textinput"style="width: 230px; height: 20px">
<option value="">- 选择一个问题 -</option>
<option value="您的宠物的名字?">您的宠物的名字?</option>
<option value="您就读的第一所学校的名称?">您就读的第一所学校的名称?</option>
<option value="少年时代心目中的英雄是谁?">少年时代心目中的英雄是谁?</option>
<option value="您最喜欢的休闲运动是什么?">您最喜欢的休闲运动是什么?</option>
<option value="您最喜欢哪支运动队?">您最喜欢哪支运动队?</option>
<option value="您最喜欢的运动员是谁?">您最喜欢的运动员是谁?</option>
<option value="您的第一辆汽车或自行车是什么牌子的?">您的第一辆汽车或自行车是什么牌子的?</option>
</select>
</td>
<td> </td>
</tr>
<tr>
<td style="text-align: right">答案:</td>
<td colspan="2">
<input type="text" class="textinput" name="pwda" />
      
<font color="#999999">不能少于4个字符,不区分大小写</font>
</td>
</tr>
<tr>
<td style="text-align: right">备用邮箱:</td>
<td><input type="text" class="textinput" /></td>
<td> </td>
</tr>
<tr>
<td style="text-align: right"> </td>
<td> </td>
<td> </td>
</tr>
</table>

<h1>注册校验</h1>
<table width="80%" border="0" cellspacing="2" class="upline">
<tr>
<td style="text-align: right; width: 20%">输入校验码:</td>
<td style="width: 50%"><input type="text" class="textinput" /></td>
<td> </td>
</tr>
<tr>
<td style="text-align: right"> </td>
<td> </td>
<td> </td>
</tr>
</table>

<h1>服务条款</h1>
<table width="70%" border="0" cellspacing="0">
<tr>
<td><textarea name="textarea" class="textarea"></textarea></td>
</tr>
</table>

<table width="70%" border="0" cellspacing="0">
<tr>
<td style="padding-top: 20px; text-align: center">
<input name="image" type="image" onclick="return formsubmit()" src="../../material/images/signup.gif" width="195" height="40"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>

js页面 check.js

function check() {
var reg = /^[0-9a-zA-Z_]{5,12}@(163|126|qq|yahoo|gmail|sina|hotmail|)\.(com|com\.cn|cn|la)$/;
var account = document.registerForm.account;
var mail = document.getElementById("mail");
if (null == account.value || "" == account.value) {
mail.innerHTML = "<font color = 'red'>不能为空</>";
return false;
} else {
if (reg.test(account.value)) {
mail.innerHTML = "";
return true;
} else {
mail.innerHTML = "<font color = 'red'>格式不对</>";
return false;
}
}
}
function checkname() {
var username = document.registerForm.username;
var user = document.getElementById("user");
if (null == username.value || "" == username.value) {
user.innerHTML = "<font color = 'red'>不能为空</>";
return false;
} else {
user.innerHTML = "";
return true;
}
}
function checkpassword() {
var reg1 = /^[0-9a-zA-Z_]{6,18}$/;
var password = document.registerForm.password;
var password1 = document.registerForm.password1;
var pass = document.getElementById("pass");
var repass = document.getElementById("repass");
var flag = false;
if (null == password.value || "" == password.value) {
pass.innerHTML = "<font color ='red'>不能为空</font>";
return false;
} else {
pass.innerHTML = "";
flag = true;
}
if (flag) {
if (reg1.test(password.value)) {
pass.innerHTML = "<font color = 'blue'>正确";
flag = true;
} else {
pass.innerHTML = "<font color = 'red'>输入格式不正确</>";
flag = false;
return flag;
}
if (flag) {
if (password.value != password1.value) {
repass.innerHTML = "<font color='red'>重复密码不同</font>";
return false;
} else {
repass.innerHTML = "<font color='blue'>OK!</font>";
return t
3ff0
rue;
}
}
}
}

function checktel() {
var tel = document.getElementById("tel");
var contact = document.registerForm.contact;
if (null == contact.value || "" == contact.value) {
lianxi.innerHTML = "<font color = 'red'>不能为空</font>";
} else {
if (isNaN(contact.value)) {
lianxi.innerHTML = "<font color = 'red'>格式不对</font>";
} else {
lianxi.innerHTML = "<font color = 'red'>Ok!</font>";
}
}
}
function check3() {
var suiji = document.getElementById("suiji");
var textinput = document.registerForm.textinput.value;
if (suiji.value == textinput) {
suiji.innerHTML = "<font color = 'red'>OK!</font>";
} else {
suiji.innerHTML = "<font color = 'red'>验证不对</font>";
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript 注册 验证