<form action="./01_复习.html" method="GET">
账号: <input type="text"><span name="1"></span><br>
密码: <input type="password"><span name="2"></span><br>
<button>提交</button>
</form>
<script>
// 表单事件,都是与form表单相关的事件
// 多用于提交标签的验证判断
// 1,要组织默认事件的执行
// 例如 : 点击button按钮就会执行提交表单事件,需要阻止这个默认事件
// 点击鼠标右键,弹出的内容,也是默认事件,也可以阻止
// 阻止鼠标右键事件
document.oncontextmenu = function(e){
// 事件对象的兼容
e = e || window.event
// 阻止右键单击,默认事件的执行,没有不会弹出默认的右键菜单
if(e.preventDefault){
// 普通浏览器,阻止默认事件的方式
e.preventDefault()
}else{
// 低版本IE浏览器阻止默认事件方式
e.returnValue = false;
}
console.log(123);
}
// 表单事件1: submit 表单提交事件
// submit 提交事件的事件对象,必须是,只能是,一定要是 form表单
var oFrom = document.querySelector('form');
oFrom.onsubmit = function(e){
// 兼容事件对象
e = e || window.event;
// 阻止默认事件的执行
if(e.preventDefault){
// 普通浏览器,阻止默认事件的方式
e.preventDefault()
}else{
// 低版本IE浏览器阻止默认事件方式
e.returnValue = false;
}
// 执行验证判断,如果验证通过,会执行ajax传参
// 前端只能验证,数据是否符合,语法规范
// 不能验证账号,密码是否正确,要验证,必须要通过服务器和数据库进行操作
// 目前就简单的验证一下
// 账号密码的长度都必须在 8-16 位之间
// 获取标签的数据,可以通过
// 标签对象.value 来获取标签的数据或者设定标签的数据
// 获取到的数据,是字符串形式
// 通常情况下,验证判断输入内容是否符合规范,不需要转化为数值类型
// 字符串验证判断更方便
// 可以通过不同的type属性和属性值来获取标签对象
// var oIpt1 = document.querySelector('[type="text"]');
// var oIpt2 = document.querySelector('[type="password"]');
// console.log(oIpt1,oIpt2);
// 也可以通过标签名称,获取标签对象的伪数组,通过索引下标,获取具体的标签
// document.querySelectorAll('input') 所有input的伪数组
// document.querySelectorAll('input')[0] 通过索引下标,获取具体的一个标签对象
// document.querySelectorAll('input')[0].value 或者这一个标签对象的value属性值,也就是数据数值
var oIpt1 = document.querySelectorAll('input')[0].value;
var oIpt2 = document.querySelectorAll('input')[1].value;
console.log(oIpt1,oIpt2);
// 获取两个span标签,准备写入提示信息
var oSpan1 = document.querySelectorAll('span')[0];
var oSpan2 = document.querySelectorAll('span')[1];
// 获取字符串数据后,可以根据字符串的length属性判断长度
// 账号长度在 8-16位之间,密码长度在 8-16位之间,允许提交
// 否则,不允许提交,弹出报错信息
// 验证判断账号
if(oIpt1.length >= 8 && oIpt1.length <= 16){
// 账号符合规范
// 给账号之后的span,内容清空
oSpan1.innerHTML = '';
}else{
// 账号不符合规范
// 给账号之后的span,添加内容
oSpan1.innerHTML = '<em style="color:red">账号不符合规范<em>';
}
// 验证判断密码
if(oIpt2.length >= 8 && oIpt2.length <= 16){
// 密码符合规范
// 给密码之后的span,内容清空
oSpan2.innerHTML = '';
}else{
// 密码不符合规范
// 给密码之后的span,添加内容
oSpan2.innerHTML = '<em style="color:red">密码不符合规范<em>';
}
<form action="./01_复习.html">
验证码: <input type="text"> <span></span><br>
<h1></h1>
<button>提交</button>
</form>
<script src="./tools.js"></script>
<script>
// 1,获取标签对象
// 此时只获取标签对象,不要获取标签数据
// 页面初始状态,标签中没有输入数据
var oFrom = document.querySelector('form');
var oIpt = document.querySelector('input');
var oSpan = document.querySelector('span');
var oH1 = document.querySelector('h1');
// 2,通过随机验证码函数,将验证码字符串写入到标签中
// 看不清楚换一张的效果
// 页面起始,先给span标签写入一个验证码
oSpan.innerHTML = mySetVc();
// 点击span标签,给span标签重新吸入新的验证码
oSpan.addEventListener('click' , function(){
// 重新调用随机字符串函数,生成新的随机字符串,写入到标签中
oSpan.innerHTML = mySetVc();
})
oFrom.onsubmit = function(e){
// 1,兼容事件对象
e = e || window.event;
// 2,阻止默认事件执行
// 阻止默认事件的执行
if(e.preventDefault){
// 普通浏览器,阻止默认事件的方式
e.preventDefault()
}else{
// 低版本IE浏览器阻止默认事件方式
e.returnValue = false;
}
// 3,判断验证码输入是否正确
// 获取写入到标签中的验证码内容
var vc = oSpan.innerHTML;
// 获取input中输入的数据
var oIptVal = oIpt.value;
// 如果区分大小写,没需要其他操作,直接比较数据是否相等
// 如果不区分大小写,需要大小写统一
if( vc.toLowerCase() === oIptVal.toLowerCase() ){
oH1.innerHTML = '';
console.log('验证码输入正确');
}else{
oH1.innerHTML = '<em style="color:red">验证码输入错误</em>';
}
}
// 生成验证码函数
function mySetVc(){
var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXUZ';
var newStr = '';
for(var i = 1 ; i <= 6 ; i++){
var num = parseInt( Math.random()*str.length )
if(newStr.indexOf(str[num]) === -1){
newStr += str[num];
}else{
i--;
}
}
return newStr;
}