/* offsetHeight 获取的是document的实际高度*/
console.log('offsetHeight', document.documentElement.offsetHeight);
/* clientHeight 获取的是可视区域的高度*/
console.log('clientHeight', document.documentElement.clientHeight);
表单验证
<form action="" id="form">
<p>
用户名: <input type="text" name="username" id="username"><br>
密码：<input type="password" id="pwd1"><br>
再次输入密码：<input type="password" id="pwd2"><br>
<input type="submit" value="提交">
</p>
</form>
<script>
/* 字符串非空验证 */
let form = document.getElementById('form');
form.onsubmit = function () {
let username = document.getElementById('username').value;
if (username.trim() == '') {
alert('用户名不能为空');
return false;
}
if (username.length < 6) {
alert('邮箱长度不能小于6个字符');
return false;
}
if (username.indexOf('@') == -1 || username.indexOf('.') == -1) {
alert('用户名中必须含有@和.');
return false;
}
for (var i = 0; i < username.length; i++) {
if (isNaN(username[i]) == false) {
alert('不能有数字');
return false;
}
}
let pwd1 = document.getElementById('pwd1').value;
if (pwd1.length < 6) {
alert('密码长度至少6个字符');
return false
}
for (var j = 0; j < pwd1.length; j++) {
/* 每次循环只截取对应索引的一位，直到遍历完整个字符串 */
var k = pwd1.substring(j, j + 1);
if (isNaN(k) == true) {
alert('必须要有数字');
return false
}
let pwd2 = document.getElementById('pwd2').value;
if (pwd2 !== pwd1) {
alert('两次密码需要一致');
return false
}
}
/* 继续执行默认事件 */
alert('登录成功')
return true
}
/* 字符串查找验证 */
/* var str='this is javascript';
str.indexOf('is')
2
var str='this is javascript';
str.indexOf('is',3) */
</script>
验证的提示特效
let form = document.querySelector('form');
let email = document.getElementById('email');
let s = document.getElementById('s');
let pwd = document.getElementById('pwd');
let p = document.getElementById('p');
function blurFn() {
if (email.value.trim() == '') {
email.style.borderColor = 'red';
s.innerHTML = '不能为空';
s.style.color = 'red';
return false;
}
s.innerHTML = '';
s.style.color = '';
email.style.borderColor = '';
return true;
}
function fn() {
if (pwd.value.trim() == '') {
pwd.style.borderColor='red';
p.innerHTML=('密码不能为空');
p.style.color = 'red';
return false;
}
if (pwd.value.length < 6) {
pwd.style.borderColor='red';
p.innerHTML = '密码小于6位';
p.style.color = 'red'
return false
}
pwd.style.borderColor='';
p.innerHTML = '';
p.color = '';
return true;
}
form.onsubmit = function () {
if (blurFn() && fn()) {
return true
}
else {
return false
}
}
