<!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: 550px;
border-collapse: collapse;
}
table th, table td {
border: #0066FF 1px solid;
padding: 10px;
}
table th {
background-color: #66FF66;
}
table td {
background-color: #FFCC66;
}
.errinfo {
display: none;/**/
color: #FF0000;
}
.okinfo {
color: #006600;
display: none;
}
.error {
border: #FF0000 2px solid;
}
.norm {
border: #666666 2px solid;
}
.focus {
border: #0033FF 2px solid;
}
</style>
<script type="text/javascript">
function check(node,reg,okdiv,errdiv){
var flag=false;
var value=node.value;
var ok=document.getElementById(okdiv);
var error=document.getElementById(errdiv);
if(reg.test(value)){
ok.style.display="block";
error.style.display="none";
node.className="norm";
flag=true;
}
else{
ok.style.display="none";
error.style.display="block";
node.className="error";
flag=false;
}
return flag;
}
var isuser ,ispsw,isrepsw,ismail;
function checkUser(node){
var reg=/^[a-zA-Z]+[a-zA-Z0-9_]*$/gi;
isuser = check(node,reg,'userok','usererr');
}
function checkPsw(node){
var reg=/^\d{4}$/;
ispsw=check(node,reg,'pswok','pswerr');
var reword = document.getElementsByName("repsw")[0].value;
if(reword.length!=0)
checkRepsw(repswNode);
}
function checkRepsw(node){
var repwd=document.getElementsByName("repsw")[0].value;
var word=document.getElementsByName("psw")[0].value;
var okdiv=document.getElementById("repswok");
var errdiv=document.getElementById("repswerr");
if(repwd==word){
okdiv.style.display = "block";
errdiv.style.display = "none";
node.className = "norm";
isrepsw = true;
}
else{
okdiv.style.display = "none";
errdiv.style.display = "block";
node.className = "error";
isrepsw = false;
}
}
function checkMail(node){
var reg = /^\w+@\w+(\.[a-z]+)+$/;
ismail = check(node,reg,'mailok',"mailerr");
}
function checkForm(){
if(isuser&&ispsw&&isrepsw&&ismail){
alert("chenggong");
event.returnValue=true;
}
else{
alert("shibai");
event.returnValue=false;
}
}
</script>
</head>
<body>
<form name="regform" onsubmit="checkForm()">
<table>
<tr>
<th colspan="2">注册表单</th>
</tr>
<tr>
<td>用户名称:</td>
<td><input type="text" name="user" onblur="checkUser(this)" />
<div class="errinfo" id="usererr">用户名格式错误</div>
<div class="okinfo" id="userok">用户名正确</div>
<div>用户名必须由字母(a-z) 数字(0-9) 下划线(_)组成 </div></td>
</tr>
<tr>
<td>输入密码:</td>
<td><input type="text" name="psw" onblur="checkPsw(this)" />
<div class="errinfo" id="pswerr">密码格式错误</div>
<div class="okinfo" id="pswok">密码正确</div>
<div>密码由四位数字组成</div></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="text" name="repsw" onblur="checkRepsw(this)" />
<div class="errinfo" id="repswerr">两次密码不一致。重新输入</div>
<div class="okinfo" id="repswok">密码一致</div>
<div>再输入一次密码</div></td>
</tr>
<tr>
<td>电子邮件:</td>
<td><input type="text" name="mail" onblur="checkMail(this)" />
<div class="errinfo" id="mailerr">邮箱地址格式错误</div>
<div class="okinfo" id="mailok">邮件正确</div>
<div>输入有效的邮箱地址</div></td>
</tr>
<tr>
<th colspan="2"> <input type="submit" value="提交数据" />
<input type="reset" value="清除数据" onclick="loadInput()" />
</th>
</tr>
</table>
</form>
</body>
</html>
java(10)--DOM之用户登录验证(正则)
最新推荐文章于 2023-03-29 11:07:35 发布