实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.表单的传统验证,GET与POST的区别</title>
</head>
<body>
<h3>用户登录验证</h3>
<!--
GET明文方式提交,可以在URL上看到提交的数据,
一般有密码,手机号码,***的表单都不适合用GET方式来提交
POST方式可以提交数据量较大的信息,不适合放在URL上(URL对参数长度有限制)
POST存放在请求头(header)中一并提交给服务器
-->
<form action="" method="POST" name="login">
<p>
<label for="user">用户名</label>
<input type="text" name="user" id="user">
<span style="color:red;" id="msg">*</span>
</p>
<p>
<label for="pwd">密 码</label>
<input type="password" name="pwd" id="pwd">
<span style="color:red;" id="msg">*</span>
</p>
<button>登录</button>
<!-- button 默认type="submit" -->
</form>
</body>
</html>
<script>
var form = document.forms['login']; // 获取整个form表单
form.user.focus(); // 根据input的name属性值设置焦点
// 提交时执行用户名和密码判断
form.onsubmit = function(){
if(form.user.value.length === 0){
alert('请输入用户名');
return false;
}else if(form.pwd.value.length === 0){
alert('请输入密码');
return false;
}
}
var msg = document.getElementById('msg');
form.user.onblur = function(){ //表单失焦点时触发函数
if(this.value.trim().length ===0){
msg.innerText = '必须填写用户';
this.focus();
}
}
form.user.oninput = function(){
msg.innerText = '';
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
