当不输入用户或密码就登录时
不勾选用户协议就登录时
form表单的修改,引入了onsubmit控件,提交表单时,调用validateForm函数
<form action="/home" method="post" onsubmit="return validateForm()">validateForm函数内容
function validateForm() {
// 验证用户名和密码是否为空
var username = document.getElementById("Username").value;
var password = document.getElementById("Password").value;
if (!username || !password) {
alert('用户名和密码不能为空');
return false;
}
// 验证是否同意协议
var agreeCheckbox = document.getElementById("agreementCheckbox");
if (!agreeCheckbox.checked) {//没有勾选"我已详细阅读此协议"
alert('请先同意用户协议');
return false;
}
// 通过所有验证，允许提交表单
return true;
} 注:此时取消了对required控件的使用
防止把人搞晕了完整html代码如下
<!--该界面由bootstrap3.4的css样式的表单为主体修改而来-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的登录页面</title>
<!--flask项目中引入的css文件的(flask项目的css文件的路径为在static目录下)-->
<link rel="stylesheet"
href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<style>
.account{
/*宽度和高度*/
width: 500px;
/*边框*/
border: 1px solid rgb(102, 97, 97);
/*左右居中*/
margin-left: auto;
margin-right: auto;
/*上边距*/
margin-top: 100px;
/*内边距*/
padding: 20px 40px;
/*阴影 水平方向 垂直方向 模糊距离*/
box-shadow: 5px 5px 5px rgba(88, 88, 88, 0.5);
}
.account h3{
/*文本居中*/
text-align: center;
/*加粗*/
font-weight: bold;
}
</style>
</head>
<body>
<!--form表单-->
<form action="/home" method="post" onsubmit="return validateForm()">
<div class="account">
<!-- 用户名输入框 -->
<div class="form-group">
<label>用户名</label>
<input class="form-control" id="Username"
placeholder="请输入用户名" name="username">
</div>
<!-- 密码输入框 -->
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control"
id="Password" placeholder="请输入密码"
name="password">
</div>
<!-- 协议及同意复选框 -->
<div class="checkbox">
<a href="hello.html">《某某协议》</a>
<label>
<input type="checkbox" name="agree" id="agreementCheckbox">我已详细阅读此协议
</label>
</div>
<!-- 提交按钮 -->
<button type="submit" class="btn btn-primary">登 录</button>
</div>
</form>
<script>
function validateForm() {
// 验证用户名和密码是否为空
var username = document.getElementById("Username").value;
var password = document.getElementById("Password").value;
if (!username || !password) {
alert('用户名和密码不能为空');
return false;
}
// 验证是否同意协议
var agreeCheckbox = document.getElementById("agreementCheckbox");
if (!agreeCheckbox.checked) {//没有勾选"我已详细阅读此协议"
alert('请先同意用户协议');
return false;
}
// 通过所有验证，允许提交表单
return true;
}
</script>
</body>
</html>若觉得弹窗组件过于不友好,每次都需要关闭弹窗才能继续输入,还可以使用标签提示的方法,效果图如下
对应的JavaScript代码
function validateForm2() {
// 验证用户名和密码是否为空
var username = document.getElementById("Username").value;
var password = document.getElementById("Password").value;
var error = document.getElementById("error");
//alert弹窗用户名
//alert(username);
if (!username || !password) {
error.innerHTML = "用户名和密码不能为空";
return false;
}
// 验证是否同意协议
var agreeCheckbox = document.getElementById("agreementCheckbox");
if (!agreeCheckbox.checked) {//没有勾选"我已详细阅读此协议"
error.innerHTML = '请先同意用户协议';
return false;
}
// 通过所有验证，允许提交表单
return true;
}标签：username,用户名,return,自定义,JavaScript,getElementById,提示信息,var,document From： https://www.cnblogs.com/tytbook/p/18027577