succsess.html ：<body> <h1>登陆成功</h1></body>
引用跳转页面成功
1.offsetHeight和client Height的区别：
<script>
/* offset Height获取的是document的实际高度 */
/* 包括页面有滚动条的情况下，获取页面的整个高度，并不是一屏的高度 */
console.log('offsetHeight',document.documentElement.offsetHeight);
/* clientHeight 获取的是可视区域的高度 */
console.log('clientHeight',document.documentElement.clientHeight);
</script>
2.表单验证：
<form action="succsess.html" id="form">
<p>
用户名：<input type="text" name="username" id="username">
</p>
<input type="submit" value="提交">
</form>
<script>
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 */
}
</script>
表单验证练习：
<form action="succsess.html">
<p>
用户名：<input type="text" name="username" id="username">
</p>
<p>
密码:<input type="password" name="password" id="psd">
</p>
<input type="submit" value="提交">
</form>
<script>
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
}
</script>
3.校验密码：
<form action="succsess.html" id="form">
<p>您的Email：</p><input type="text" >
<p>输入密码：</p><input type="password" id="mm1">
<p>再次输入一次密码</p><input type="password" id="mm2">
<input type="submit" value="提交">
</form>
<script>
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<mm1.length;i++){
var j = mm1.substring(i,i+1)
if(isNaN(j)==true){
alert('必须有数字')
return false
}
}
if(mm2!==mm1){
alert('您输入两次密码不一致')
return false
}return true
}
</script>
4.验证的提示特效：
<form action="succsess.html">
<p>email:
<input type="text" name="email" id="email" onblur="blurFn()">
<span id="s"></span>
</p>
<input type="submit" value="提交">
</form>
<script>
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
}
</script>
验证提示特效练习：
<form action="succsess.html">
<p>email:
<input type="text" name="email" id="email" onblur="blurFn()">
<span id="s"></span>
</p>
<input type="submit" value="提交">
</form>
<script>
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
}
</script>
