原原生生JS实现登陆框效果

前排提示：代码纯原创，以纯原生为目标，以新手为人群。

登录框需求：

1. 点击激活按钮显示一个登录框，且登录框水平垂直居中
2. 输入的用户名必须是6-12位，且符合数字字母横杠（‘-’）中的任意两种组合或三种组合
3. 如果输入用户名不符合第二条的规定则在输入框下面进行提示

 步骤一：点击激活按钮显示一个登录框，主要考察是display的调用

	
		
		
		
	
	
		激活
		

			用户：
			

			密码：
			

			
		
		
	

步骤二：登录框水平垂直居中，主要考察水平垂直的做法

核心代码
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

步骤三：制定输入规则（符合数字字母横杠（‘-’）中的任意两种组合或三种组合），考察正则表达式

function Decide(string){
	if(string.length < 6 || string.length > 12){
		return '输入用户名长度为 6 - 12位'
	}
	// 第一步，排除输入字符串中含有组合限制以外的类型
	if(/[^0-9a-z-]/.test(string)){
		return '输入用户名仅限于数字字母横杠中三种组合的两种'
	}
	// 第二步，统计输入字符串中含有组合的类型情况次数
	var num = 0
	var RegExp = [/\d/g,/[a-zA-Z]/g,/[-]/g]
	for (let regExp of RegExp) {
		if(string.search(regExp) === -1){
			num ++;
		}
	}
	if(num>=2){
		return '用户名需要是数字字母横杠中三种组合的两种'
	}
	return '输入正确'
}

步骤四：对输入信息识别，考察 input 元素事件 oninput（）

步骤五：对输入信息的情况反馈到输入框下面进行提示，考察 visibility 的用法

关乎 display:none 和 visibility:hidden 两者 区别在此不进行解释，使用visibility的原因是避免了突发排挤感带来视觉冲击。

	用户：

	暂无情况

	密码：
	

	

 最终效果图：