<body>
<!-- 表单提交 -->
<form action="./01_复习.html">
注册账号 : <input type="text" maxlength="16"> <span></span> <br>
注册密码 : <input type="password" maxlength="16"> <span></span> <br>
确认密码 : <input type="password" maxlength="16"> <span></span> <br>
验 证 码 : <input type="text" maxlength="6"> <span></span> <br>
<span></span> <button type="button">看不清楚</button><br>
<button>提交</button>
</form>
<script>
// 一般写js程序的基本步骤
// 1,获取标签对象
// 2,定义执行程序
// 3,将封装的函数,定义在所有程序最后
// 获取标签对象
// 可以定义不同的属性等,来获取标签对象
// 可以获取所有的标签对象的集合,是伪数组,通过索引下标,获取每个标签
// 偷懒的写法,如果标签顺序有变化,就完蛋了
var userName = document.querySelectorAll('input')[0];
var userPwd1 = document.querySelectorAll('input')[1];
var userPwd2 = document.querySelectorAll('input')[2];
var userVc = document.querySelectorAll('input')[3];
var spanName = document.querySelectorAll('span')[0];
var spanPwd1 = document.querySelectorAll('span')[1];
var spanPwd2 = document.querySelectorAll('span')[2];
var spanVc = document.querySelectorAll('span')[3];
var oVc = document.querySelectorAll('span')[4];
var oBtn = document.querySelectorAll('button')[0];
var oSub = document.querySelectorAll('button')[1];
var oForm = document.querySelector('form');
var str = '0123456789abcdefghijklmnopqrstuvwxyzABCEDEFGHIJKLMNOPQRSTUVWXYZ';
//2,定义程序,操作标签对象
// 定义验证码
oVc.innerHTML = setVc(str);
oBtn.onclick = function(){
oVc.innerHTML = setVc(str);
}
// 账号验证
// 获取焦点
userName.onfocus = function(){
spanName.innerHTML = '输入8-16位账号';
spanName.style.color = 'black';
}
// 输入内容时
userName.oninput = function(){
if(userName.value.length < 8){
spanName.innerHTML = `您输入了${userName.value.length}位数值,至少输入8位,您还必须输入${8-userName.value.length}位`;
spanName.style.color = 'red';
}else if( userName.value.length >= 8 && userName.value.length <= 16 ){
spanName.innerHTML = `您输入了${userName.value.length}位数值,符合规范`;
spanName.style.color = 'black';
}
}
// 失去焦点时
userName.onchange = function(){
if(userName.value.length < 8){
spanName.innerHTML = `您输入了${userName.value.length}位数值,至少输入8位,现在输入的不符合规范,您还必须输入${8-userName.value.length}位`;
spanName.style.color = 'red';
}else if( userName.value.length >= 8 && userName.value.length <= 16 ){
spanName.innerHTML = `您输入了${userName.value.length}位数值,符合规范,是OK的`;
spanName.style.color = 'black';
}
}
// 密码验证
// 获取焦点
userPwd1.onfocus = function(){
spanPwd1.innerHTML = '输入8-16位密码';
spanPwd1.style.color = 'black';
}
// 输入内容时
userPwd1.oninput = function(){
if(userPwd1.value.length < 8){
spanPwd1.innerHTML = `您输入了${userPwd1.value.length}位数值,至少输入8位,您还必须输入${8-userPwd1.value.length}位`;
spanPwd1.style.color = 'red';
}else if( userPwd1.value.length >= 8 && userPwd1.value.length <= 16 ){
spanPwd1.innerHTML = `您输入了${userPwd1.value.length}位数值,符合规范`;
spanPwd1.style.color = 'black';
}
}
// 失去焦点时
userPwd1.onchange = function(){
if(userPwd1.value.length < 8){
spanPwd1.innerHTML = `您输入了${userPwd1.value.length}位数值,至少输入8位,现在输入的不符合规范,您还必须输入${8-userName.value.length}位`;
spanPwd1.style.color = 'red';
}else if( userPwd1.value.length >= 8 && userPwd1.value.length <= 16 ){
spanPwd1.innerHTML = `您输入了${userPwd1.value.length}位数值,符合规范,是OK的`;
spanPwd1.style.color = 'black';
}
}
// 确认密码
// 获取焦点
userPwd2.onfocus = function(){
spanPwd2.innerHTML = '请您输入确认密码,必须与注册密码一致';
spanPwd2.style.color = 'black';
}
// 输入内容
userPwd2.oninput = function(){
if( userPwd1.value === userPwd2.value ){
spanPwd2.innerHTML = '请您输入的确认密码与注册密码相同';
spanPwd2.style.color = 'black';
}else{
spanPwd2.innerHTML = '请您输入的确认密码与注册密码不相同';
spanPwd2.style.color = 'red';
}
}
// 失去焦点
userPwd2.onchange = function(){
if( userPwd1.value === userPwd2.value ){
spanPwd2.innerHTML = '请您输入的确认密码与注册密码相同!!!!';
spanPwd2.style.color = 'black';
}else{
spanPwd2.innerHTML = '请您输入的确认密码与注册密码不相同!!!!';
spanPwd2.style.color = 'red';
}
}
// 验证码
// 获取焦点
userVc.onfocus = function(){
spanVc.innerHTML = '请您输入6位验证码';
spanVc.style.color = 'black';
}
// 输入内容
userVc.oninput = function(){
if(userVc.value.length < 6){
spanVc.innerHTML = `您输入了${userVc.value.length}位数值,必须输入6位,您还必须输入${6-userVc.value.length}位`;
spanVc.style.color = 'red';
}else if(userVc.value.length == 6){
spanVc.innerHTML = `您输入了${userVc.value.length}位数值,符合规范`;
spanVc.style.color = 'black';
}
}
// 点击提交,对所有的数据进行验证
// 将所有的验证都写在一个提交事件中
// 给form标签,添加提交事件
oForm.onsubmit = function(e){
// 获取事件对象
e = e || window.event;
// 1,非空判断,输入内容不能是空
if(userName.value == ''){
spanName.innerHTML = '账号不能为空';
spanName.style.color = 'orange';
// 阻止默认提交效果的执行
e.preventDefault();
return;
}else if(userName.value.length < 8){
spanName.innerHTML = '账号长度少于8位,请继续输入';
spanName.style.color = 'orange';
// 阻止默认提交效果的执行
e.preventDefault();
return;
}
if(userPwd1.value == ''){
spanPwd1.innerHTML = '密码不能为空';
spanPwd1.style.color = 'orange';
// 阻止默认提交效果的执行
e.preventDefault();
return;
}else if(userPwd1.value.length < 8){
spanPwd1.innerHTML = '密码长度小于8位';
spanPwd1.style.color = 'orange';
// 阻止默认提交效果的执行
e.preventDefault();
return;
}
if(userPwd2.value == ''){
spanPwd2.innerHTML = '确认密码不能为空';
spanPwd2.style.color = 'orange';
// 阻止默认提交效果的执行
e.preventDefault();
return;
}else if(userPwd2.value.length < 8){
spanPwd2.innerHTML = '确认密码长度小于8位';
spanPwd2.style.color = 'orange';
// 阻止默认提交效果的执行
e.preventDefault();
return;
}
if(userVc.value == ''){
spanVc.innerHTML = '验证码不能为空';
spanVc.style.color = 'orange';
// 阻止默认提交效果的执行
e.preventDefault();
return;
}else if(userVc.value.length < 6){
spanVc.innerHTML = '验证码长度小于6位';
spanVc.style.color = 'orange';
// 阻止默认提交效果的执行
e.preventDefault();
return;
}
// 2,输入内容要符合规范 长度符合要求
// 方法1,单独再写独立的if判断
// if( !(userName.value.length >= 8 && userName.value.length <= 16)){
// spanName.innerHTML = '账号长度不符合规范';
// spanName.style.color = 'orange';
// // 阻止默认提交效果的执行
// e.preventDefault();
// return;
// }
// 方法2,继续在非空判断之后写
// 3,判断 密码和确认密码 必须一致,如果不同不能提交
if(userPwd1.value !== userPwd2.value){
spanPwd2.innerHTML = '确认密码与密码不同';
spanPwd2.style.color = 'orange';
// 阻止默认提交效果的执行
e.preventDefault();
return;
}
// 4,验证码的判断
// 你输入的内容,必须入,span中写入的内容相同
// userVc.value 验证码 input 标签,输入的内容
// oVc.innerText 验证码 span 标签,写入的内容
// 如果不需要区分大小写
// 将字符串内容,统一为都是大写,或者都是小写
// 字符串.toUpperCase() 大写
// 字符串.toLowerCase() 小写
// 都统一为小写字符,就不区分小写了
// console.log(oVc.innerText) // 就是字
// console.log(oVc.innerHTML) // 有标签的
if(userVc.value.toLocaleLowerCase() !== oVc.innerText.toLocaleLowerCase() ){
spanVc.innerHTML = '验证码不正确,请重新输入';
spanVc.style.color = 'orange';
// 阻止默认提交效果的执行
e.preventDefault();
return;
}
}
// 定义生成随机验证码的函数
function setVc(str){
var vc = '';
while(vc.length < 6){
var num = parseInt(Math.random() * str.length);
if(vc.indexOf( str[num] ) === -1 ){
vc += str[num];
}
}
return `<b>${vc}</b>`;
}
</script>
