我需要找到一種方法來判斷一個欄位是否為空,使用 javascript 或 html,代碼如下:
</form>
<script>
function setAction(form) {
alert(form.name);
return false;
}
</script>
uj5u.com熱心網友回復:
像這樣的片段應該可以解決問題,將 inputx 作為您測驗的選定欄位
if (inputtx.value.length == 0){
alert("empty form");
return false;
} else
alert("filled form");
return true;
}
警報只是為了讓您知道它是否有效,您也可以使用
console.log("empty/filled form");
然后檢查 Web 瀏覽器控制臺
uj5u.com熱心網友回復:
如果您有一個表單并且想要空欄位的索引號:
function emptyFields(form) {
return [...document.forms[form]].flatMap((field, index) =>
field.value.length < 1 ? [index] : []);
}
console.log(emptyFields('data'));
<form name='data'>
<input>
<input value='not empty'>
<input>
<input>
<input value='not empty'>
<input>
</form>
uj5u.com熱心網友回復:
您的代碼片段非常通用,但不是問題。為了解決這個任務,您需要在 JavaScript 中獲取 HTML 輸入物件并提取它的值長度以比較是否大于零。請注意,如果視窗未完全加載,您將無法獲取 HTML 物件,這就是您需要處理 DOM 事件的原因。
創建表單:
<form id="myForm" onSubmit="return false;">
<label for="name">First name:</label><br>
<input type="text" id="nameField" name="name" value="Your Name"><br>
</form>
在這個例子中,我選擇了輸入鍵,將用于檢查表單欄位是否為空,這就是為什么 onSubmit="return false;" 事件必然回傳 false,避免在表單提交時重新加載頁面并按下回車鍵。
創建腳本部分
window.onload = function windowLoaded(windowEvent)
{
const myInputFieldHtmlObject = document.querySelector("#nameField");
myInputFieldHtmlObject.onkeypress = function(event)
{
if(event.which == 13)
{
if(myInputFieldHtmlObject.value.length == 0)
{
alert("Fill please the name field.");
}
}
}
myInputFieldHtmlObject.onfocus = function(event)
{
myInputFieldHtmlObject.value = "";
}
}
將 onl oad 事件系結到視窗物件。這保證在使用document.querySelector("#nameField")訪問頁面之前加載頁面中的所有 HTML 物件。將按鍵和焦點事件系結到表單中需要檢查的每個欄位。On key press 將在您鍵入名稱并按 Enter 鍵(值 13)后檢查字符數是否至少為 1,否則會彈出錯誤。焦點事件只會將文本輸入默認值清除為空。
完整示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>My Form Test</title>
<style>
html, body
{
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}
</style>
<script>
window.onload = function windowLoaded(windowEvent)
{
const myInputFieldHtmlObject = document.querySelector("#nameField");
myInputFieldHtmlObject.onkeypress = function(event)
{
if(event.which == 13)
{
if(myInputFieldHtmlObject.value.length == 0)
{
alert("Fill please the name field.");
}
}
}
myInputFieldHtmlObject.onfocus = function(event)
{
myInputFieldHtmlObject.value = "";
}
myInputFieldHtmlObject.onSubmit = function(event)
{
return false;
}
}
</script>
</head>
<body>
<h2>My Form</h2>
<form id="myForm" onSubmit="return false;">
<label for="name">First name:</label><br>
<input type="text" id="nameField" name="name" value="Your Name"><br>
</form>
</body>
</html>
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/481658.html
標籤:javascript html 形式 空行
上一篇:如何將坐標陣列中的每個值相乘
下一篇:獲取Firestore資料時加載
