<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//检验用户名
function checkUser(){
var reg=new RegExp("^[a-z]{4}$");//用户名输入规则
return check(reg,"user","userSpan","用户名正确","用户名错误");
/*
var userNode = document.getElementsByName("user")[0];
var name=userNode.value;
var spanNode = document.getElementById("userSpan");
if(reg.test(name)){
spanNode.innerHTML="用户名正确".fontcolor("green");
}else{
spanNode.innerHTML="用户名错误".fontcolor("red");
}*/
}
//检验密码
function checkPsw(){
var reg=new RegExp("^[a-zA-Z0-9]+$");//密码规则
return check(reg,"psw","pswSpan","密码正确","密码错误");
/*
var pswNode=document.getElementsByName("psw")[0];
var ps=pswNode.value;
var spanNode=document.getElementById("pswSpan");
if(reg.test(ps)){
spanNode.innerHTML="密码正确".fontcolor("green");
}else{
spanNode.innerHTML="密码错误".fontcolor("red");
}*/
}
//检验邮箱
function checkEmail(){
var reg=new RegExp(" \\w+@\\w+(\\.\\w+)+");
return check(reg,"Email","EmailSpan","邮箱正确","邮箱错误");
}
function checkrePsw(){
var flag=false;
//首先获取第一次输入密码的值
var pass = document.getElementsByName("psw")[0].value;
//获取第二次输入密码的值
var repass = document.getElementsByName("repsw")[0].value;
//获取span节点
var spanNode = document.getElementById("repswSpan");
if(pass==repass){
spanNode.innerHTML="两次输入的密码一致".fontcolor("green");
flag=true;
}else{
spanNode.innerHTML="两次输入的密码不一致".fontcolor("red");
}
return flag;
}
//将方法的共性内容进行抽取
function check(reg,name,spanid,okinfo,errorinfo){
var flag=false;
//获取input节点
var Node=document.getElementsByName(name)[0];
//通过input节点获取value
var val=Node.value;
//获取span节点
var spanNode=document.getElementById(spanid);
//将用书输入的密码与规则比较
if(reg.test(val)){
spanNode.innerHTML=okinfo.fontcolor("green");
flag=true;
}else{
spanNode.innerHTML=errorinfo.fontcolor("red");
}
return flag;
}
//判断用户是否选择了性别
function checkSex(){
var flag=false;
var radioNodes=document.getElementsByName("sex");
for(var i=0;i<radioNodes.length;i++){
if(radioNodes[i].checked){
flag=true;
}
}
var spanNode=document.getElementById("sexspan");
if(!flag){
spanNode.innerHTML="必须选择性别".fontcolor("red");
}
return flag;
}
//判断用户填入的信息是否都是true,如果是则提交
function checkForm(){
if(checkUser()&&checkPsw()&&checkEmail()&&checkrePsw()&&checkSex()){
return true;
}
return false;
}
</script>
</head>
<body>
<form οnsubmit="return checkForm()" id="formid">
用户名称:<input type="text" name="user" οnblur="checkUser()" />
<span id="userSpan"></span><br/>
输入密码:<input type="password" name="psw" οnblur="checkPsw()">
<span id="pswSpan"></span><br/>
确认密码:<input type="password" name="repsw" οnblur="checkrePsw()">
<span id="repswSpan"></span><br/>
输入邮箱:<input type="text" name="Email" οnblur="checkEmail()">
<span id="EmailSpan"></span><br/>
选择性别:<input type="radio" name="sex" value="nan" />男
<input type="radio" name="sex" value="nv" />女
<span id="sexspan"></span><br/>
<span id="EmailSpan"></span><br/>
<input type="submit" value="提交数据" />
</form>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//检验用户名
function checkUser(){
var reg=new RegExp("^[a-z]{4}$");//用户名输入规则
return check(reg,"user","userSpan","用户名正确","用户名错误");
/*
var userNode = document.getElementsByName("user")[0];
var name=userNode.value;
var spanNode = document.getElementById("userSpan");
if(reg.test(name)){
spanNode.innerHTML="用户名正确".fontcolor("green");
}else{
spanNode.innerHTML="用户名错误".fontcolor("red");
}*/
}
//检验密码
function checkPsw(){
var reg=new RegExp("^[a-zA-Z0-9]+$");//密码规则
return check(reg,"psw","pswSpan","密码正确","密码错误");
/*
var pswNode=document.getElementsByName("psw")[0];
var ps=pswNode.value;
var spanNode=document.getElementById("pswSpan");
if(reg.test(ps)){
spanNode.innerHTML="密码正确".fontcolor("green");
}else{
spanNode.innerHTML="密码错误".fontcolor("red");
}*/
}
//检验邮箱
function checkEmail(){
var reg=new RegExp(" \\w+@\\w+(\\.\\w+)+");
return check(reg,"Email","EmailSpan","邮箱正确","邮箱错误");
}
function checkrePsw(){
var flag=false;
//首先获取第一次输入密码的值
var pass = document.getElementsByName("psw")[0].value;
//获取第二次输入密码的值
var repass = document.getElementsByName("repsw")[0].value;
//获取span节点
var spanNode = document.getElementById("repswSpan");
if(pass==repass){
spanNode.innerHTML="两次输入的密码一致".fontcolor("green");
flag=true;
}else{
spanNode.innerHTML="两次输入的密码不一致".fontcolor("red");
}
return flag;
}
//将方法的共性内容进行抽取
function check(reg,name,spanid,okinfo,errorinfo){
var flag=false;
//获取input节点
var Node=document.getElementsByName(name)[0];
//通过input节点获取value
var val=Node.value;
//获取span节点
var spanNode=document.getElementById(spanid);
//将用书输入的密码与规则比较
if(reg.test(val)){
spanNode.innerHTML=okinfo.fontcolor("green");
flag=true;
}else{
spanNode.innerHTML=errorinfo.fontcolor("red");
}
return flag;
}
//判断用户是否选择了性别
function checkSex(){
var flag=false;
var radioNodes=document.getElementsByName("sex");
for(var i=0;i<radioNodes.length;i++){
if(radioNodes[i].checked){
flag=true;
}
}
var spanNode=document.getElementById("sexspan");
if(!flag){
spanNode.innerHTML="必须选择性别".fontcolor("red");
}
return flag;
}
//判断用户填入的信息是否都是true,如果是则提交
function checkForm(){
if(checkUser()&&checkPsw()&&checkEmail()&&checkrePsw()&&checkSex()){
return true;
}
return false;
}
</script>
</head>
<body>
<form οnsubmit="return checkForm()" id="formid">
用户名称:<input type="text" name="user" οnblur="checkUser()" />
<span id="userSpan"></span><br/>
输入密码:<input type="password" name="psw" οnblur="checkPsw()">
<span id="pswSpan"></span><br/>
确认密码:<input type="password" name="repsw" οnblur="checkrePsw()">
<span id="repswSpan"></span><br/>
输入邮箱:<input type="text" name="Email" οnblur="checkEmail()">
<span id="EmailSpan"></span><br/>
选择性别:<input type="radio" name="sex" value="nan" />男
<input type="radio" name="sex" value="nv" />女
<span id="sexspan"></span><br/>
<span id="EmailSpan"></span><br/>
<input type="submit" value="提交数据" />
</form>
</body>
</html>