input事件
获取焦点 focus
当 标签获取焦点时,执行的执行
鼠标一点,就是获取焦点
不是所有的标签都支持获取焦点事件
常用: input,select,textarea,button,a,
输入事件 input
在输入框输入内容时,触发事件
每输入一个字符,没按动一次键盘,都会触发 输入事件
失去焦点 change
触发条件有两个条件,两个条件必须都满足才会触发事件
1.必须失去焦点
2.输入的数据内容,必须有改变
表单demo
htmlcssjs
<form action="./02_demo.html" method="get">
账号 : <input type="text" name="username" maxlength="16" placeholder="请输入8-16位账号"><br>
<div name="name">请您输入8-16位的账号</div>
密码 : <input type="password" name="userpwd1" maxlength="16" placeholder="请输入8-16位密码"><br>
<div name="pwd1">请您输入8-16位的密码</div>
确认密码 : <input type="password" name="userpwd2" maxlength="16" placeholder="请再次输入密码"><br>
<div name="pwd2">请您再次输入密码</div>
<button>注册</button>
</form>
div{
display: none;
margin: 20px 0 ;
}
// 1.获取标签对象
// 3个input标签对象
var oIptName = document.querySelector('[name="username"]');
var oIptPwd1 = document.querySelector('[name="userpwd1"]');
var oIptPwd2 = document.querySelector('[name="userpwd2"]');
// 3个div标签对象
var oDivName = document.querySelector('[name="name"]');
var oDivPwd1 = document.querySelector('[name="pwd1"]');
var oDivPwd2 = document.querySelector('[name="pwd2"]');
// 2.添加 获取焦点事件
// 鼠标点击标签,获取焦点时,执行的程序
oIptName.onfocus = function(){
// 让 对应的div 样式设定为 display:block
oDivName.style.display = 'block';
}
oIptPwd1.onfocus = function(){
// 让 对应的div 样式设定为 display:block
oDivPwd1.style.display = 'block';
}
oIptPwd2.onfocus = function(){
// 让 对应的div 样式设定为 display:block
oDivPwd2.style.display = 'block';
}
// 3.输入事件 每次敲击键盘,都会触发input事件
// 输入字符,提示还有几个字符可以输入
oIptName.oninput = function(){
// 获取标签中输入的内容
var nameStr = oIptName.value;
// 字符串都有length属性,属性值就是字符串长度,就是字符个数
// 根据输入的内容,改变div中标签内容
oDivName.innerHTML = `您需要至少输入8个字符,您当前输入了${nameStr.length}个字符,最多输入16个字符,还可以输入${16-nameStr.length}个字符`;
}
oIptPwd1.oninput = function(){
// 获取标签中输入的内容
var pwd1Str = oIptPwd1.value;
// 根据输入字符长度,输入提示信息
oDivPwd1.innerHTML = `您需要至少输入8个字符,您当前输入了${pwd1Str.length}个字符,最多输入16个字符,还可以输入${16-pwd1Str.length}个字符`;
}
oIptPwd2.oninput = function(){
// 获取标签中输入的内容
var pwd2Str = oIptPwd2.value;
// 根据输入字符长度,输入提示信息
oDivPwd2.innerHTML = `您需要至少输入8个字符,您当前输入了${pwd2Str.length}个字符,最多输入16个字符,还可以输入${16-pwd2Str.length}个字符`;
}
// 4.失去焦点事件
// 1,失去焦点,2,输入内容改变,才会触发事件
oIptName.onchange = function(){
// 1, 获取输入的数据
var nameStr = oIptName.value;
// 2, 根据输入数据的长度做判断
if( nameStr.length < 8 ){
// 错误格式,提示信息
// 修改input字体样颜色为红色,边框线为红色
oIptName.style.color = 'red';
oIptName.style.borderColor = 'red';
// 修改div中的提示信息
oDivName.style.color = 'orange';
oDivName.innerHTML = '您输入的账号格式不符合要求,请检查,并且重新输入';
}else{
// 正确格式的提示信息
oDivName.style.color = 'pink';
oDivName.innerHTML = '亲,您输入的内容,格式完全正确,棒棒哒,么么哒, ^_^!!!';
}
}
// 5.确认密码必须要和原始密码完全相同
// === 严格区分大小写
oIptPwd2.onchange = function(){
// 1,获取数据 获取 密码框 和 确认密码框 输入的数据
var pwd1Str = oIptPwd1.value;
var pwd2Str = oIptPwd2.value;
if(pwd1Str === pwd2Str){
oDivPwd2.innerHTML = '密码和确认密码相同';
}else{
oDivPwd2.innerHTML = '密码和确认密码不同';
}
}
submit提交事件
点击 form表单中 提交按钮 会触发事件
触发事件,首先执行的是JavaScript定义的默认事件---提交表单数据
可以通过 事件对象 e.preventDefault() ; 来 阻止默认事件的执行
submit事件demo
htmlcssjs
<form action="./02_demo.html" method="get">
账号 : <input name="username" type="text"> <span name="name"></span> <br>
密码 : <input name="userpwd" type="password"> <span name="pwd"></span> <br>
验证码 : <input name="uservc" type="text"> <span name="vc"></span> <span name="vvcc"></span> <br>
<button>注册</button>
</form>
//自己写
// 获取标签对象
var oIptName = document.querySelector('[name="username"]');
var oIptPwd = document.querySelector('[name="userpwd"]');
var oIptVc = document.querySelector('[name="uservc"]');
var oSpanVc = document.querySelector('[name="vc"]');
var oForm = document.querySelector('form');
var oSpanName = document.querySelector('[name="name"]');
var oSpanPwd = document.querySelector('[name="pwd"]');
var oSpanVVCC = document.querySelector('[name="vvcc"]');
// 1,添加验证码
oSpanVc.innerHTML = setVc();
// 点击 span标签,可以切换新的验证码
oSpanVc.onclick = function(){
oSpanVc.innerHTML = setVc();
}
// 给form表单,添加 submit 提交事件
oForm.onsubmit = function(e){
// 提交事件,应该先做验证
// 如果 验证没有通过 就不执行之后的程序
// 目前只能验证,输入数据的长度,对于内容的验证,使用正则表达式会更简单
// 目前验证,输入数据的长度和不能是空字符串
// 获取,账号,密码,验证码输入的数据
var nameVal = oIptName.value;
var pwdVal = oIptPwd.value;
var vcVal = oIptVc.value;
// 1,输入的账号进行验证
// 账号验证, 不能为空字符串 , 长度必须是 8-16 位
// 如果是 空字符串 或者 长度不在 8-16位 之间 我们就阻止表单的提交
if( nameVal === '' || !( nameVal.length >= 8 && nameVal.length <= 16 ) ){
e.preventDefault() ;
// 在 name的 span 中,写入提示信息
oSpanName.innerHTML = '您输入的账号不符和格式'
}else{
// 符合格式,输入空字符串,替换错误提示
oSpanName.innerHTML = '';
}
// 密码验证 不能为空字符串 , 长度必须是 8-16 位
if( pwdVal === '' || !( pwdVal.length >= 8 && pwdVal.length <= 16 ) ){
e.preventDefault() ;
// 在 pwd的 span 中,写入提示信息
oSpanPwd.innerHTML = '您输入的密码不符和格式'
}else{
// 符合格式,输入空字符串,替换错误提示
oSpanPwd.innerHTML = '';
}
// 验证码 输入的字符串不能为空
if( vcVal === ''){
e.preventDefault() ;
// 在 验证码的span 中,写入提示信息
oSpanVVCC.innerHTML = '您输入的验证码不能为空'
// 验证码 input中输入的数据,必须 和 之后 span 中写入的 字符串相同
// 如果不相同,就阻止表单的提交
// 如果要区分大小写,大小写敏感,直接 ===判断就可以
// 如果不分区大小写,大小写不敏感,可以统一都转化为大写或者小写
}else if( vcVal.toUpperCase() !== oSpanVc.innerHTML.toUpperCase() ){
e.preventDefault() ;
oSpanVVCC.innerHTML = '您输入的验证码错误'
}else{
// 符合格式,输入空字符串,替换错误提示
oSpanVVCC.innerHTML = '';
}
}
// 随机6位验证码 没有重复的字符
function setVc(){
var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var vc = '';
for(var i = 1 ; i <= 6 ; i++){
// 从 0 - str.length-1 的所有索引下标的随机数
var num = parseInt( Math.random()*str.length );
if(vc.indexOf( str[num] ) === -1 ){
vc += str[num];
}else{
i--;
}
}
return vc;
}
提示
1, 必须要记住, submit 提交事件,是绑定给 form表单标签
不是绑定给 button标签
2, 目前只能做长度和空字符串的验证
内容的验证,要是用正则表达式来执行
3, 验证码:
(1) 随机验证码直接写入到 span标签中
比较判断的是 input输入框,输入的数据,与span标签的内容,是否一致
(2) 如果要区分大小写,就直接 === 判断
如果不要区分大小写,将字符串统一为大写,或者小写字符串
Comments | NOTHING