如前所述，我正在制作信息输入页面，需要用户输入某些信息，并且条目不能为空。我在网上查了一下，找到了REQUIRED属性。然而，它似乎不起作用。我能做些什么来修复它?以下是我目前拥有的。
我一直在思考什么可能是错的，这里是我的一些猜测。这可能与部分有关，因为我没能使它们正确地匹配起来
<html>
<head>
<meta charset="UTF-8">
<title>上傳</title>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
font-family: "微軟正黑體", "Roboto", Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 12px;
line-height: 30px;
color: #777;
background: #3F51B5;
}
.container {
max-width: 400px;
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact input[type="submit"] {
font: 400 12px/16px "微軟正黑體", "Roboto", Helvetica, Arial, sans-serif;
}
#contact {
background: #F9F9F9;
padding: 25px;
margin: 50px 0;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
#contact h3 {
display: block;
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-size: 13px;
font-weight: 400;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 15px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #FFC107;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#contact input[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #2196F3;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}
#contact input[type="submit"]:hover {
background: #3F51B5;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact input[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.copyright {
text-align: center;
font-size: 10px;
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
</style>
</head>
<body>
<div class="container" id="myForm">
<form id="contact" action="" method="post">
<h3><?=Title?> 上傳系統</h3>
<h4>會員上傳</h4>
<div class="form-item">
<label>Gmail帳號:</label>
<input type="text" value="<?=useremail?>" name="myEmail" readonly>
</div>
<div class="form-item">
<label>區分:</label>
<input type="text" value="<?=params?>" name="params" readonly>
<input type="hidden" value="<?=sys_id?>" name="sys_id" readonly>
<input type="hidden" value="<?=Title?>" name="sys_name" readonly>
</div>
<div class="form-item">
<a href="<?=hyper_link?>" target="_blank" >我的</a>
</div>
<? if (setfile =="可傳檔"){ ?>
<select name="compositions" required>
<option value="">請選擇</option>
<option value="general"></option>
<option value="Five">(五)</option>
<option value="Ten">(十)</option>
</select>
<input type="file" name="userFile" accept="image/jpeg,image/gif,image/png" onchange="checkfile(this);" >
<input type="submit" value="限影像檔(不可使用PDF)"
onclick="submitValues(this); return false;">
<? } else { ?> <div><?=setfile?></div> <br><input type='submit' value='關閉視窗' onclick='window.close();'> <? } ?>
</form>
</div>
<div id="output"></div>
<script>
function submitValues(e) {
e.value = 'Uploading...';
e.disabled = true;
const files = [e.parentNode.userFile.files[0]];
const object = [...e.parentNode].reduce((o, obj) => Object.assign(o, {[obj.name]: obj.value}), {});
if (files.some(f => f))
{
Promise.all(
files.map(file => new Promise((resolve, reject) => {
if (file) {
const fr = new FileReader();
fr.onload = f => resolve({filename: file.name, mimeType: file.type, bytes: [...new Int8Array(f.target.result)]});
fr.onerror = err => reject(err);
fr.readAsArrayBuffer(file);
} else {
//e.disabled = false;
resolve({});
}
}))
).then(ar => {
[object.userFile] = ar;
google.script.run.withSuccessHandler(fileUploaded).uploadFiles(object);
});
}
}
function checkfile(sender) {
// 可接受的附檔名
var validExts = new Array(".jpg", ".png", ".gif", ".jpeg");
var fileExt = sender.value;
fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
fileExt = fileExt.toLowerCase();
if (validExts.indexOf(fileExt) < 0) {
alert("檔案類型錯誤，可接受的副檔名有：" + validExts.toString());
sender.value = null;
return false;
}
else return true;
}
function fileUploaded(status)
{
//e.disabled = false;
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
input { display:block; margin: 20px; }
</style>
</body>
</html>
在基本模式下，可以设置必需的属性。但如果你想要复杂的验证，你应该使用javascript。例如，您有一个只有名称输入的表单，它将是必需的。在提交表单处理程序中，您应该检查输入是否有值。对于更复杂的验证，您可以使用yup或joi库。