js的初步应用注册-CSDN博客

本文链接：https://blog.csdn.net/morriemg/article/details/51658552

<html>
<head>
<title>注册 js</title>
<script>
function $$(id){ //定义一个获取ID的方法
return document.getElementById(id);
}

var ifname=false;
var ifpwd=false;
var ifemail=false;

function acName(){
var a=$$("inName");
if(a.value==""){ //用查询子类的方法判断和添加
var ch=$$("sp1").children; //获取sp1的所有子类
if(ch.length==0){
var newspan=document.createElement("span"); //新建一个span
newspan.innerHTML=" * 名字不能为空"; //给新spn赋值
$$("sp1").appendChild(newspan); //把新span加到原有的span后面
}
}else{
var c=$$("sp1").children;
if(c.length>0){
$$("sp1").removeChild(c[0]); //移除索引为0的子类
ifname=true;
}
}
reg();
}
function acPwd(){
var a=$$("inPwd");
var b=$$("sp2");
if(a.value==""){
b.innerHTML=" * 密码不能为空";
}else{
var formPwd=/^(?=^[0-9a-zA-Z]{4,20}$)\w*[a-zA-Z]+\w*$/; //正则表达式
if(formPwd.test(a.value.trim())){
b.innerHTML=" OK";
ifpwd=true;
}else{
b.innerHTML=" * 格式不正确，请输入4到20位的非纯数字";
}
}
reg();
}

function acEm(){
var a=$$("inEmail");
var b=$$("sp3");
if(a.value==""){
b.innerHTML=" * 邮箱不能为空";
}else{
var formEmail=/^\w+@\w+\.((com)|(cn)|(com\.cn))$/
if(formEmail.test(a.value.trim())){
b.innerHTML=" OK";
ifemail=true;
}else{
b.innerHTML=" * 邮箱格式不正确"
}
}
reg();
}

function reg(){ //判断能否提交注册的方法
if(ifname&&ifpwd&&ifemail){
$$("inSub").disabled=false;
}else{
$$("inSub").disable=true;
}
}
</script>
</head>
<body>
<div>
<form name=form1 action="">
姓名：<input type="text" id=inName class=name οnblur="acName()"/><span id=sp1></span>
<br>
密码：<input type="password" id=inPwd class=pwd οnblur="acPwd()"/><span id=sp2></span>
<br>
邮箱：<input type="text" id=inEmail class=email οnblur="acEm()"/><span id=sp3></span>
<br>
<input type="submit" id=inSub class=sub value="注册" disabled/><span id=sp4></span>
</form>
</div>
</body>

</html>