<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{
border:#0066ff 1px solid;
width:600px;
border-collapse:collapse;
}
table th,table td{
border:#0066ff 1px solid;
padding:10px;
}
table td{
background-color:#ffff99;
}
table th{
background-color:#ff9900;
}
#repswspan{
margin-left:115px;
}
.errorinfo{
color:#F00;
display:none;
}
.focus{
border:#09f 2px solid;
}
.norm{
border:#999999 1px solid;
}
.error{
border:#f00 2px solid;
}
</style><script type="text/javascript">
function inputColor(input){
input.className="norm";
input.onfocus=function(){
this.className="focus";
}
}window.onload=function(){
with(document.forms[0]){
inputColor(user);
inputColor(psw);
inputColor(repsw);
inputColor(mail);
}
}function check(inputNode,regex,divId){
var b=false;
var divNode=document.getElementById(divId);
if(regex.test(inputNode.value)){
inputNode.className="norm";
divNode.style.display="none";
b=true;
}else{
inputNode.className="error";
divNode.style.display="block";
}
return b;
}function checkUser(userNode){
var regex=/^\w{3,5}$/;
return check(userNode,regex,"userdiv");
}
function checkPsw(pswNode){
var regex=/^[a-z0-9]{3,5}$/i;
return check(pswNode,regex,"pswdiv");
}function checkRepsw(repswNode){
var b=false;
var value1=repswNode.value;
var value2=document.getElementsByName("psw")[0].value;
var divNode=document.getElementById("repswdiv");
if(value1==value2){
repswNode.className="norm";
divNode.style.display="none";
b=true;
}else{
repswNode.className="error";
divNode.style.display="block";
}
return b;
}function checkMail(mailNode){
var regex=/^\w+@\w+(\.\w+)+$/;
return check(mailNode,regex,"maildiv");
}function checkForm(formNode){
with(formNode){
if(checkUser(user)&&checkPsw(psw)&&checkRepsw(repsw)&&checkMail(mail)){
event.returnValue=true;
}else{
event.returnValue=false;
}
}
}
</script>
</head><body>
<form onsubmit="checkForm(this)">
<table>
<tr>
<th>注册表单</th>
</tr>
<tr>
<td>
<div>用户名</div>
<div><input type="text" name="user" onblur="checkUser(this)"</div>
<div class="errorinfo" id="userdiv">用户名错误,请按要求输入</div>
<div>用户名必须是3-5位,由字母(a-z),数字(0-9),下划线(_)组成</div>
</td>
</tr>
<tr>
<td>
<div><span>密码</span> <span id="repswspan">确认密码</span></div>
<div>
<input type="password" name="psw" onblur="checkPsw(this)"/>
<input type="password" name="repsw" onblur"checkRepsw(this)"/>
</div>
<div class="errorinfo" id="pswdiv">密码格式错误,请按规范输入</div>
<div class="errorinfo" id="repswdiv">两次密码输入不一致</div>
<div>密码必须是3-5位,由字母(a-z),数字(0-9)组成</div>
</td>
</tr>
<tr>
<td>
<div>邮件地址</div>
<div><input type="text" name="mail" onblur="checkMail(this)" /></div>
<div class="errorinfo" id="maildiv">邮箱地址错误,请按要求填写</div>
</td>
</tr>
<tr>
<th>
<input type="submit" value="提交数据" />
</th>
</tr>
</table>
</form>
</body>
</html>
新手求教!!为什么确认密码的校验失败,是哪里错了!!求大神指导!!JavaScript表单校验
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{
border:#0066ff 1px solid;
width:600px;
border-collapse:collapse;
}
table th,table td{
border:#0066ff 1px solid;
padding:10px;
}
table td{
background-color:#ffff99;
}
table th{
background-color:#ff9900;
}
#repswspan{
margin-left:115px;
}
.errorinfo{
color:#F00;
display:none;
}
.focus{
border:#09f 2px solid;
}
.norm{
border:#999999 1px solid;
}
.error{
border:#f00 2px solid;
}
</style><script type="text/javascript">
function inputColor(input){
input.className="norm";
input.onfocus=function(){
this.className="focus";
}
}window.onload=function(){
with(document.forms[0]){
inputColor(user);
inputColor(psw);
inputColor(repsw);
inputColor(mail);
}
}function check(inputNode,regex,divId){
var b=false;
var divNode=document.getElementById(divId);
if(regex.test(inputNode.value)){
inputNode.className="norm";
divNode.style.display="none";
b=true;
}else{
inputNode.className="error";
divNode.style.display="block";
}
return b;
}function checkUser(userNode){
var regex=/^\w{3,5}$/;
return check(userNode,regex,"userdiv");
}
function checkPsw(pswNode){
var regex=/^[a-z0-9]{3,5}$/i;
return check(pswNode,regex,"pswdiv");
}function checkRepsw(repswNode){
var b=false;
var value1=repswNode.value;
var value2=document.getElementsByName("psw")[0].value;
var divNode=document.getElementById("repswdiv");
if(value1==value2){
repswNode.className="norm";
divNode.style.display="none";
b=true;
}else{
repswNode.className="error";
divNode.style.display="block";
}
return b;
}function checkMail(mailNode){
var regex=/^\w+@\w+(\.\w+)+$/;
return check(mailNode,regex,"maildiv");
}function checkForm(formNode){
with(formNode){
if(checkUser(user)&&checkPsw(psw)&&checkRepsw(repsw)&&checkMail(mail)){
event.returnValue=true;
}else{
event.returnValue=false;
}
}
}
</script>
</head><body>
<form onsubmit="checkForm(this)">
<table>
<tr>
<th>注册表单</th>
</tr>
<tr>
<td>
<div>用户名</div>
<div><input type="text" name="user" onblur="checkUser(this)"</div>
<div class="errorinfo" id="userdiv">用户名错误,请按要求输入</div>
<div>用户名必须是3-5位,由字母(a-z),数字(0-9),下划线(_)组成</div>
</td>
</tr>
<tr>
<td>
<div><span>密码</span> <span id="repswspan">确认密码</span></div>
<div>
<input type="password" name="psw" onblur="checkPsw(this)"/>
<input type="password" name="repsw" onblur"checkRepsw(this)"/>
</div>
<div class="errorinfo" id="pswdiv">密码格式错误,请按规范输入</div>
<div class="errorinfo" id="repswdiv">两次密码输入不一致</div>
<div>密码必须是3-5位,由字母(a-z),数字(0-9)组成</div>
</td>
</tr>
<tr>
<td>
<div>邮件地址</div>
<div><input type="text" name="mail" onblur="checkMail(this)" /></div>
<div class="errorinfo" id="maildiv">邮箱地址错误,请按要求填写</div>
</td>
</tr>
<tr>
<th>
<input type="submit" value="提交数据" />
</th>
</tr>
</table>
</form>
</body>
</html>
新手求教!!为什么确认密码的校验失败,是哪里错了!!求大神指导!!JavaScript表单校验
解决方案 »
- 求助各位大神,javascript <embed>
- 树的点击 最后两句显示没有这个方法 改人的不懂
- 高分请教一个正则的问题
- 坚持了好几天,总算网站开张了!因为要离开一段时间,散分!
- 改变模式窗口大小showModalDialog
- 如何使页面内容在不同的分辨率下始终都是居中(上下左右)
- jsp页面从数据库读出的字段内容(包含回车键)赋给javascript变量时
- <INPUT NAME="fileName" TYPE=FILE accept="image/gif">中的accept属性问题 ,高手请进!
- 小生不才~~!
- 求教大神一个关于jQuery自动生成标签的问题,求指导
- 急求,xml +xsl +js 更改input文本框内容
- 麻烦下大家,我觉得要疯了,,看了一下午都没看出为什么无法正确输出结果。。。
少了个=号。
你换个好点的编辑器一眼就看出来了,我用的editplus就这样。