我里面用了bootstrap的框架，引用一下即可
简单的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">账号：</label>
<div class="col-sm-7">
<input class="form-control" id="name" type="text" placeholder="请输入用户名">
</div>
<div class="col-sm-2"><span>提示内容</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="请输入密码">
</div>
<div class="col-sm-2"><span></span></div>
</div>
<div class="form-group pwd-icon">
<em class="active">弱</em><em>中</em><em>强</em>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">确认密码：</label>
<div class="col-sm-7">
<input class="form-control" id="password2" type="password" placeholder="请再次输入密码" disabled>
</div>
<div class="col-sm-2"><span>请再输入一次</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;
//判断用户名字符长度
function getLength(str){
return str.replace(/[^\x00-xff]/g,"xx").length;//汉字，一个字代表两个字符;x00-xff单字节
}
//判断密码使用相同字符
function findStr(str,n){ //两个参数：字符串，要对比的字符
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个字符，一个汉字为两个字符。'//i标签内放图标
console.log(1)
};
oName.onkeyup = function(){
count.style.visiblity = "visible";
name_length = getLength(this.value);
count.innerHtml = name_length + "个字符";
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 = "不能为空"
}
//长度超过25个字符
else if(name_length > 25){
name_msg.innerHTML = "长度超过25个字符"
}
//长度少于6个字符
else if(name_length < 6){
name_msg.innerHTML = "少于6个字符"
}else{
name_msg.innerHTML = "ok"
}
console.log(1)
};
//密码判断
oPwd.onfocus=function(){
pwd_msg.display = "block";
pwd_msg.innerHTML = '密码长度应为6-16个字符，请使用字符加数字或符号的组合密码，不能单独使用字母、数字或符号'
};
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;//不是数字,也就是字母和其他符号
var re_t = /[^a-zA-Z]/g;//不是字母,也就是数字和其他符号
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 = "长度应为6-16个字符"
}else if(!re_n.test(this.value)){
pwd_msg.innerHTML = "不能全为数字"
}else if(!re_t.test(this.value)){
pwd_msg.innerHTML = "不能全为字母"
}else{
pwd_msg.innerHTML = "ok"
}
};
//确认密码
oPwd2.onblur=function(){
if(this.value != oPwd.value){
pwd2_msg.style.display = "block";
pwd2_msg.innerHTML = "两次密码输入不一致"
}
网友评论