用原生JS实现的简单注册信息

HTML:

<div class="warp" id="txt2">
	用 户 名:<input type="text" id="dome" onblur="func2()" autofocus required/><span id="text">输入4~8位数字或字母</span>
	<br />
	<br />
	密       码:<input type="password" id="dome1" onblur="func3()"/><span id="text1">输入8~16位数字或字母</span>
	<br />
	<br />
	确认密码:<input type="password" id="dome2" onblur="func4()"/><span id="text2"></span>
	<br />
	<br />
	签名：<textarea cols="20" rows="10" id="dome3" onblur="func5()"></textarea>
	<span id="text3">剩余100个字符</span>
	<br />
	<br />
	<button onclick="func1()" id="txt">注册</button>
</div>
<div class="warp1" id="txt1"></div>

JS:

//用户名是否正确

function func2(){
	var x = document.getElementById("dome").value;
	var z = /^[a-zA-Z]\w{4,8}/;
	if(x !== 0){
	        if(z.test(x) == true){
		        document.getElementById("text").innerHTML="正确";
		        document.getElementById("text").style.color="green";
		}else{
			document.getElementById("text").innerHTML="格式错误";
			document.getElementById("text").style.color="red";
		}
	}else{
	        document.getElementById("text").innerHTML="不能为空";
		document.getElementById("text").style.color="red";
	}
				
}
//第一次密码格式是否正确			
function func3(){
	var y = document.getElementById("dome1").value;
	var s = /^[a-zA-Z]\w{8,16}/;
	if(y !== 0){
		if(s.test(y) == true){
			document.getElementById("text1").innerHTML="正确";
			document.getElementById("text1").style.color="green";
		}else{
			document.getElementById("text1").innerHTML="格式错误";
			document.getElementById("text1").style.color="red";
		}
	}else{
		document.getElementById("text1").innerHTML="不能为空";
		document.getElementById("text1").style.color="red";
	}
				
}
//判断第二次密码是否正确	
function func4(){
	var a = document.getElementById("dome2").value;
	var y = document.getElementById("dome1").value;
	if(a == y){
	        document.getElementById("text2").innerHTML="√";
		document.getElementById("text2").style.color="green";
	}else{
		document.getElementById("text2").innerHTML="两次输入的不一样";
		document.getElementById("text2").style.color="red";
	}
}
//文本域的相关函数		
function func5(){
	var d = document.getElementById("dome3").value;
	if(d.length == 0){
		alert("可以输入个性名言");
	}else if(d.length > 100){
		alert("不好意思,你的文采太好,我记不住");
	}else{
	        var c = 100 - d.length;
		document.getElementById("text3").innerHTML="剩余"+c+"个字符";
	}
}
//点击按钮提交；			
function func1(){
	var x = document.getElementById("dome").value;
	//document.getElementById("txt1").style.display="block";
	//document.getElementById("txt2").style.display="none";
	document.getElementById("txt1").innerHTML="恭喜"+x+"用户注册成功";
}

CSS：

*{margin: 0;padding: 0;}
.warp{
        width:35vw;
	height: auto;
	margin: 20px auto;
	background: ghostwhite;
}
.warp1{
        width:35vw;
	height: auto;
	margin: 20px auto;
	background: ghostwhite;
	text-align: center;
	font-size: 1.75rem;
	display: none;
}
#txt{
	margin-left:50px;
}
span{
        margin-left:10px;
}