实例（表单的JS传统验证）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单的传统验证</title>
</head>
<body>
<h3>用户登录</h3>
<form action="admin.php" method="GET" name="login">
<p>
<label for="name">用户: </label>
<input type="text" name="name" id="name">
<span style="color:red" id="name-tips">*</span>
</p>
<p>
<label for="password">密码: </label>
<input type="password" name="password" id="password">
<span style="color:red" id="pwd-tips">*</span>
</p>
<button>登录</button>
</form>
<script>
// onsubmit 表单提交事件: 用户提交表单时触发
// onblur: 失去焦点事件: 控件失去焦点时触发
// onfocus: 获取焦点事件: 控件获取焦点时触发
// oninput: 输入框内容发生变化时触发
// 还有一些与事件对应的方法
// submit(): 提交表单,表单元素上调用,脚本提交不需要事件触发
// reset(): 重置表单控件值
// focus(): 设置控件焦点
// 获取表单元素的另一种方式
var form = document.forms['login'];
// console.log(form);
// console.log(form.name.value.length);
// 预设焦点
// form.name.focus()
form.onsubmit = function () {
if (form.name.value.length === 0) {
alert('用户名不能为空');
this.name.focus();
return false;
} else if (form.password.value.length === 0) {
alert('密码不能为空');
this.password.focus();
return false;
}
// confirm()对话框也alert()不同, 多了一个取消按钮,返回布尔值true/false
// if (confirm('确定登录吗?')) {
// return true;
// } else {
// return false;
// }
// 可以简化
return confirm('确定登录吗?');
}
// onblur: 失去焦点事件, 当控件失去焦点时触发,应该作用到控件元素上
var tips1 = document.getElementById('name-tips');
form.name.onblur = function() {
if (this.value.trim().length === 0) {
tips1.innerHTML = '用户名不能为空';
this.focus();
}
}
// oninput事件,在输入框内容发生变化时立即触发,而不像onchange要等到失去焦点再触发
form.name.oninput = function () {
tips1.innerHTML = '';
}
// 密码框的验证
var tips2 = document.getElementById('pwd-tips');
form.password.onblur = function() {
if (this.value.trim().length === 0) {
tips2.innerHTML = '密码不能为空';
this.focus();
}
}
form.password.oninput = function () {
tips2.innerHTML = '';
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、get 和post的区别
详细区别：
1.get参数通过url传递，post放在request body中。
2.get请求在url中传递的参数是有长度限制的，而post没有。
3.get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。
4.get请求只能进行url编码，而post支持多种编码方式
5.get请求会浏览器主动cache，而post支持多种编码方式。
6.get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。
7.GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
8.GET产生一个TCP数据包；POST产生两个TCP数据包。
