<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input test</title>
<style>
h2 {
text-align: center;
}
form div {
text-align: center;
padding: 20px 0;
}
label {
display: inline-block;
width: 100px;
text-align: right;
text-align-last: justify;
}
input {
width: 200px;
height: 30px;
border: 1px solid #dbdbdb;
outline: none;
font-size: 18px;
text-indent: 10px;
}
button {
width: 270px;
height: 40px;
border-width: 0px;
border-radius: 3px;
background: #ee5d30;
cursor: pointer;
outline: none;
font-family: Microsoft YaHei;
color: rgb(184, 34, 34);
font-size: 17px;
}
button:hover {
background: #24613b;
}
</style>
<script>
function doSubmit() {
var id1 = document.getElementById("id1").value;
if (id1 == "") {
alert("内容1 不可以是空的");
return false;
}
var id2 = document.getElementById("id2").value;
if (id2 == "") {
alert("内容2 不可以是空的");
return false;
}
var id3 = document.getElementById("id3").value;
if (id3 == "") {
alert("内容3 不可以是空的");
return false;
}
document.getElementById("sub").innerText = "数据验证成功!!!";
}
</script>
</head>
<body>
<h2>测试测试测试测试测试</h2>
<div>
<form action="" method="post" onsubmit="return doSubmit()">
<div>
<label for="">内容1:</label><input type="text" placeholder="内容1" name="name1" id="id1">
</div>
<div>
<label for="">内容2:</label><input type="text" value="内容2" name="name2" id="id2">
</div>
<div>
<label for="">内容3:</label><input type="text" value="内容3" name="name3" id="id3">
</div>
<div>
<button id="sub">提交</button>
</div>
</form>
</div>
</body>
</html>
文本框测试
于 2022-01-12 14:13:47 首次发布