succsess.html : 登陆成功
引用跳转页面成功
1.offsetHeight和client Height的区别:
/* offset Height获取的是document的实际高度 */
/* 包括页面有滚动条的情况下,获取页面的整个高度,并不是一屏的高度 */
console.log('offsetHeight',document.documentElement.offsetHeight);
/* clientHeight 获取的是可视区域的高度 */
console.log('clientHeight',document.documentElement.clientHeight);
2.表单验证:
let form = document.getElementById('form')
/* 字符串非空验证 */
form.onsubmit = function(){
let username = document.getElementById('username').value;
/* 字符串的trim()方法可以去除两边的空格 */
if(username.trim() == ''){
alert('用户名不能为空')
return false
/* 阻止表提交的默认事件 */
}
/* 字符串查找验证 */
/* var str = "this is JavaScript"
str.ondexOf('is')
2
var str = "this is JavaScript";
str.indexOf('is',3)
返回5 */
}
表单验证练习:
let form = document.querySelector('form')
form.onsubmit = function () {
let username = document.getElementById('username').value
/* 先校验是否为空,再校验里面的内容 */
/* 排除异常 */
if (username.trim() == '') {
/* 只要没有@或者.都进入报错提示 */
alert('用户名不能为空')
}
if (username.indexOf('@') == -1 || username.indexOf('.') == -1) {
alert('必须含有@或者.')
return false
/* 邮箱长度的验证 */
if (username.length < 6) {
alert('邮箱长度不能小于6个字符')
return false
}
for (var i = 0; i < form.length; i++) {
console.log(email[i]);
// isNaN(form[i])==false 说明里面是数字 */
/* if(isNaN(username[i])==false){
alert('不能有数字')
return false */
var j = username.substring(i, i + 1);
if (isNaN(j) == false) {
alert('不能有数字')
return false
}
}
} return true
}
3.校验密码:
let form = document.getElementById('form');
form.onsubmit = function(){
let mm1 = document.getElementById('mm1').value;
let mm2 = document.getElementById('mm2').value;
if(mm1.length<6){
alert('您输入密码必须大于6位')
return false
}
for(var i=0;i var j = mm1.substring(i,i+1) if(isNaN(j)==true){ alert('必须有数字') return false } } if(mm2!==mm1){ alert('您输入两次密码不一致') return false }return true } 4.验证的提示特效:
email:
let form = document.querySelector('form')
let email = document.getElementById('email');
let s = document.getElementById('s')
function blurFn(){
email.style.borderColor = 'red';
if(email.value.trim()==''){
s.innerHTML= '密码不能为空'
s.style.color = 'red'
return false
}
email.style.borderColor = ''
s.innerHTML = '';
s.style.color = ''
return true
}
form.onsubmit = function(){
if(blurFn()){
return true
}
return false
}
验证提示特效练习:
let form = document.querySelector('form')
let email = document.getElementById('email');
let s = document.getElementById('s');
function blurFn(){
if(email.length<6){
s.innerHTML= '长度不能小于6位'
s.style.color = 'red'
email.style.borderColor = 'red';
return false
}
if(email.value.trim() == ''){
s.innerHTML= '输入内容不能为空'
s.style.color = 'red'
return false
}return true
}