表单的校验:
<!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:1px solid #CCC;
width:50%;
}
th{
background-color:#9CF;
}
.name{
display:inline-block;
width:80px;
}
.warn{
color:red;
display:none;
}
.mes{
color:#999;
font-size:14px;
margin-left:90px;
margin-top:5px;
}
input{
margin-right:15px;
}
.focus{
border:2px ridge #C7DEF3;
}
.normal{
border:1px inherit #DBDBDB;
}
.error{
border:2px solid red;
}
</style>
<script type="text/javascript">
//改变焦点选框颜色,因为浏览器自带,所以注释掉。
/*function colorInput(input){
input.className = "normal";
input.onfocus = function(){
this.className = "focus";
}
}
window.onload = function(){
with(document.forms[0]){
colorInput(user);
colorInput(psw);
colorInput(repsw);
colorInput(mail);
}
}
*/
//抽取出来的方法:
function check(input,reg,warnID){
var b = false;
var warn = document.getElementById(warnID);
if(reg.test(input.value)){
input.className = "normal";
warn.style.display = "none";
b = true;
}else{
input.className = "error";
warn.style.display = "inline-block";
}
return b;
}
//原始方法
/*function checkUser(userNode){
var value = userNode.value;
var reg = /^\w{3,5}$/;
var warn = document.getElementById("userWarn");
if(reg.test(value)){
userNode.className = "normal";
warn.style.display = "none";
}else{
userNode.className = "error";
warn.style.display = "inline-block";
}
}*/
function checkUser(input){
var reg = /^\w{3,5}$/;
return check(input,reg,"userWarnID");
}
function checkPsw(input){
var reg = /^[a-zA-Z0-9]{3,5}$/;
return check(input,reg,"pswWarnID");
}
function checkRepsw(input){
var b = false;
var psw = document.getElementsByName("psw")[0].value;
var repsw = input.value;
var warn = document.getElementById("repswWarnID");
if(repsw==psw){
input.className = "normal";
warn.style.display = "none";
b = true;
}else{
input.className = "error";
warn.style.display = "inline-block";
}
return b;
}
function checkMail(input){
var reg = /^\w+@\w+(\.\w+)+$/;
return check(input,reg,"mailWarnID");
}
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 οnsubmit="checkForm(this)">
<table cellspacing="0" cellpadding="20px">
<tr>
<th>
用户注册
</th>
</tr>
<tr>
<td>
<span class="name">用户名</span>
<input type="text" name="user" οnblur="checkUser(this)" />
<span class="warn" id="userWarnID">用户名错误,请按要求填写</span>
<div class="mes">3-5个字符(字母a-zA-Z,数字0-9,下划线_)</div>
</td>
</tr>
<tr>
<td>
<span class="name">密码</span>
<input type="password" name="psw" οnblur="checkPsw(this)" />
<span class="warn" id="pswWarnID">密码错误,请按要求填写</span>
<div class="mes">3-5个字符(字母a-zA-Z,数字0-9)</div>
</td>
</tr>
<tr>
<td>
<span class="name">确认密码</span>
<input type="password" name="repsw" οnblur="checkRepsw(this)" />
<span class="warn" id="repswWarnID">两次密码不一致</span>
<div class="mes">请重复密码</div>
</td>
</tr>
<tr>
<td>
<span class="name">邮箱</span>
<input type="email" name="mail" οnblur="checkMail(this)" />
<span class="warn" id="mailWarnID">邮箱错误,请填写正确的邮箱</span>
</td>
</tr>
<tr>
<th>
<input type="submit" value="提交数据"/>
</th>
</tr>
</table>
</form>
</body>
</html>
效果: