我里面用了bootstrap的框架，引用一下即可
簡(jiǎn)單的css
.form-group .col-sm-2 span{
display: none;
}
.pwd-icon em{
display: none;
}
em{
background: lightcoral;
padding: 10px 15px;
border-right: 1px solid #ddd;
font-style: normal;
color: #fff;
}
em.active{
background: #e6322d;
}
<div class="form-group">
<label class="col-sm-3 control-label">賬號(hào)：</label>
<div class="col-sm-7">
<input class="form-control" id="name" type="text" placeholder="請(qǐng)輸入用戶名">
</div>
<div class="col-sm-2"><span>提示內(nèi)容</span></div>
<strong id="count"></strong>
</div>
<div class="form-group">
<label class="col-sm-3 col-xs-2 control-label">密碼：</label>
<div class="col-sm-7 col-x-4">
<input class="form-control" id="password" type="password" placeholder="請(qǐng)輸入密碼">
</div>
<div class="col-sm-2"><span></span></div>
</div>
<div class="form-group pwd-icon">
<em class="active">弱</em><em>中</em><em>強(qiáng)</em>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">確認(rèn)密碼：</label>
<div class="col-sm-7">
<input class="form-control" id="password2" type="password" placeholder="請(qǐng)?jiān)俅屋斎朊艽a"? disabled>
</div>
<div class="col-sm-2"><span>請(qǐng)?jiān)佥斎胍淮?lt;/span></div>
</div>
js
let oName = document.getElementById("name");
let oPwd = document.getElementById("password");
let oPwd2 = document.getElementById("password2");
let msg = document.getElementsByTagName("span");
let count = document.getElementByID("count");
let em = document.getElementsByTagName("em");
let name_msg = msg[0];
let pwd_msg = msg[1];
let pwd2_msg = msg[2];
let name_length = 0;
//判斷用戶名字符長(zhǎng)度
function getLength(str){
return str.replace(/[^\x00-xff]/g,"xx").length;//漢字，一個(gè)字代表兩個(gè)字符;x00-xff單字節(jié)
}
//判斷密碼使用相同字符
function findStr(str,n){ //兩個(gè)參數(shù)：字符串，要對(duì)比的字符
var tmp = 0;
for(var i=0;i<str.length;i++){
if(str.charAt(i) == n){
tmp ++;
}
}
return tmp;
}
//用戶名判斷
oName.onfocus = function(){
name_msg.style.display = "block";
name_msg.innerHtml = '<i class="ati"></i>5-25個(gè)字符，一個(gè)漢字為兩個(gè)字符。'//i標(biāo)簽內(nèi)放圖標(biāo)
console.log(1)
};
oName.onkeyup = function(){
count.style.visiblity = "visible";
name_length = getLength(this.value);
count.innerHtml = name_length + "個(gè)字符";
if(name_length == 0){
count.style.visiblity = "hidden";
}
console.log(1)
};
oName.onblur = function(){
//非法字符
let re = /[^\w\u4e00-\u9fa5]/ig;
if(re.test(this.value)){
name_msg.innerHTML = "含有非法字符！"
}
//不能為空
else if(this.value == ""){
name_msg.innerHTML = "不能為空"
}
//長(zhǎng)度超過25個(gè)字符
else if(name_length > 25){
name_msg.innerHTML = "長(zhǎng)度超過25個(gè)字符"
}
//長(zhǎng)度少于6個(gè)字符
else if(name_length < 6){
name_msg.innerHTML = "少于6個(gè)字符"
}else{
name_msg.innerHTML = "ok"
}
console.log(1)
};
//密碼判斷
oPwd.onfocus=function(){
pwd_msg.display = "block";
pwd_msg.innerHTML = '密碼長(zhǎng)度應(yīng)為6-16個(gè)字符，請(qǐng)使用字符加數(shù)字或符號(hào)的組合密碼，不能單獨(dú)使用字母、數(shù)字或符號(hào)'
};
oPwd.onkeyup=function(){
if(this.value.length>5){
em[1].ClassName = "active";
oPwd2.removeAttribute("disabled");
pwd2_msg.style.display = "block"
}else{
em[1].className = "";
oPwd2.setAttribute("disabled");
pwd2_msg.style.display = "none"
}
if(this.value.length>10){
em[2].ClassName = "active";
}else{
em[2].className = "";
}
};
oPwd.onblur=function(){
var m = findStr(oPwd.value,oPwd.value[0]);
var re_n = /[^\d]/g;//不是數(shù)字,也就是字母和其他符號(hào)
var re_t = /[^a-zA-Z]/g;//不是字母,也就是數(shù)字和其他符號(hào)
if(this.value == ""){
pwd_msg.innerHTML = "不能為空"
}else if(this.value.length == m){
pwd_msg.innerHTML = "不能使用相同字符"
}else if(this.value.length < 6 || this.value.length > 16){
pwd_msg.innerHTML = "長(zhǎng)度應(yīng)為6-16個(gè)字符"
}else if(!re_n.test(this.value)){
pwd_msg.innerHTML = "不能全為數(shù)字"
}else if(!re_t.test(this.value)){
pwd_msg.innerHTML = "不能全為字母"
}else{
pwd_msg.innerHTML = "ok"
}
};
//確認(rèn)密碼
oPwd2.onblur=function(){
if(this.value != oPwd.value){
pwd2_msg.style.display = "block";
pwd2_msg.innerHTML = "兩次密碼輸入不一致"
}
