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

JavaScript——注册表单参考模板（含参数格式校验）

2016-02-20 20:39 841 查看 
<!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" />
<script type="text/javascript" src="15_doctool.js"></script>
<style type="text/css">
table{
border:#39F 1px solid;
width:600px;
border-collapse:collapse;
}

table td,table th{
border:#39F 1px solid;
padding:10px;
}

table td{
background-color:#FF9;
}
table th{
background-color:#FC6;
}
#repswspan{
margin-left:120px;
}
.errorinfo{
color:#F00;
display:none ;
}
.focus{
border:#0CF 2px solid;
}
.norm{
border:#333 2px thin;
}
.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 checkUserDemo(userNode)
{
var value = userNode.value;
var regex = /^\w{3,5}$/;
var divNode = byId("userdiv");
if(regex.test(value))
{
userNode.className = "norm";
divNode.style.display = "none";
}
else
{
userNode.className = "error";
divNode.style.display = "block";
}
}*/
//集成校验函数 参数：输入节点，正则，对应提示文本的id
function check(inputNode,regex,divId)
{
var b = false;
var div = byId(divId);
if(regex.test(inputNode.value))
{
inputNode.className = "norm";
div.style.display = "none";
b = true;
}
else
{
inputNode.className = "error";
div.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 = byName("psw")[0].value;//密码框的文本
var div = byId("repswdiv");
if(value1 == value2)
{
repswNode.className = "norm";
div.style.display = "none";
b = true;
}
else
{
repswNode.className = "error";
div.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>
<title>注册表单</title>
</head>

<body>
<!--
1.定义页面
通过表格来格式化表单
表格每一行都有自己的背景颜色
将单元格中的数据通过div进行封装，以便操作。

2.定义样式
表格的样式
div 的样式
3.动态效果
3.1在页面加载时，将所有的输入框默认的框线颜色，以及定义获取焦点的框线颜色
3.2进行内容的校验，可以通过正则表达式完成，并通过框线的样式给用户进行提示
通过对刚才用户名校验的分析，发现代码重复度很高，为了提高复用性
将不同的内容作为参数传递，将相同的内容进行函数的封装
-->
<form onsubmit="checkForm(this)">
<table>
<tr>
<th>注册表单</th>
</tr>

<tr>
<td>
<div>用户名</div>
<div><input type="text" name="user" onblur="checkUser(this)"/></div>
<div id="userdiv" class="errorinfo">用户名错误，请按要求输入</div>
<div>提示：用户名必须是3-5位，由字母（a-z），数字（0-9），下划线（_）组成</div>
</td>
</tr>

<tr>
<td>
<div><span id="pswspan">密码</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
相关文章推荐
新的分享
章节导航