用原生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;
}