required 是一個反射屬性 （例如id、name、type 等），因此：

element.required = true;

...其中 element 是實際的 input DOM 元素，例如：

document.getElementById("edName").required = true;

（只是為了完整性。）

回覆:

那是因為該程式碼中的required 是一個屬性物件，而不是字串；屬性是NamedNodeMap 其值為Attr代码>物件。要取得其中一個的值，您需要查看其 value 屬性。但對於布林屬性，該值不相關；該屬性要麼存在於地圖中（true），要麼不存在（false）。

因此，如果required未反映出來，您可以透過新增屬性來設定它：

element.setAttribute("required", "");

...相當於 element.required = true。您可以透過完全刪除它來清除它：

element.removeAttribute("required");

...相當於 element.required = false。

但我們不必對 required 這樣做，因為它已被反映。

點贊 +0

新增回覆 关闭回复

P粉739886290

回覆

element.setAttribute("required", "");    //turns required on
element.required = true;                 //turns required on through reflected attribute
jQuery(element).attr('required', '');    //turns required on
$("#elementId").attr('required', '');    //turns required on

element.removeAttribute("required");     //turns required off
element.required = false;                //turns required off through reflected attribute
jQuery(element).removeAttr('required');  //turns required off
$("#elementId").removeAttr('required');  //turns required off

if (edName.hasAttribute("required")) { }  //check if required
if (edName.required) { }                 //check if required using reflected attribute

一旦 T.J. Crowder 設法指出反映的屬性，我了解到以下語法錯誤：

element.attributes["name"] = value; //bad! Overwrites the HtmlAttribute object
element.attributes.name = value;    //bad! Overwrites the HtmlAttribute object
value = element.attributes.name;    //bad! Returns the HtmlAttribute object, not its value
value = element.attributes["name"]; //bad! Returns the HtmlAttribute object, not its value

您必須透過element.getAttribute和element.setAttribute：

element.getAttribute("foo");         //correct
element.setAttribute("foo", "test"); //correct

這是因為該屬性實際上包含一個特殊的 HtmlAttribute 物件：

element.attributes["foo"];           //returns HtmlAttribute object, not the value of the attribute
element.attributes.foo;              //returns HtmlAttribute object, not the value of the attribute

透過將屬性值設為“true”，您錯誤地將其設為 String 對象，而不是它所需的 HtmlAttribute 物件：

element.attributes["foo"] = "true";  //error because "true" is not a HtmlAttribute object
element.setAttribute("foo", "true"); //error because "true" is not an HtmlAttribute object

從概念上講，正確的想法（用類型語言表達）是：

HtmlAttribute attribute = new HtmlAttribute();
attribute.value = "";
element.attributes["required"] = attribute;

這就是原因：

• getAttribute(名稱)
• setAttribute(名稱, 值)

存在。他們負責將值指派給內部的 HtmlAttribute 物件。

除此之外，也反映了一些屬性。這意味著您可以透過 Javascript 更好地存取它們：

//Set the required attribute
//element.setAttribute("required", ""); 
element.required = true;

//Check the attribute
//if (element.getAttribute("required")) {...}
if (element.required) {...}

//Remove the required attribute
//element.removeAttribute("required");
element.required = false;

您不想要做的是錯誤地使用.attributes集合：

element.attributes.required = true;     //WRONG!
if (element.attributes.required) {...}  //WRONG!
element.attributes.required = false;    //WRONG!

測試用例

這會導致圍繞 required 屬性的使用進行測試，比較透過該屬性傳回的值和反映的屬性

document.getElementById("name").required;
document.getElementById("name").getAttribute("required");

結果：

HTML                         .required        .getAttribute("required")
==========================   ===============  =========================
                      false (Boolean)  null (Object)
             true  (Boolean)  "" (String)
          true  (Boolean)  "" (String)
  true  (Boolean)  "required" (String)
      true  (Boolean)  "true" (String)
     true  (Boolean)  "false" (String)
         true  (Boolean)  "0" (String)

嘗試直接存取.attributes集合是錯誤的。它傳回代表 DOM 屬性的物件：

edName.attributes["required"] => [object Attr]
edName.attributes.required    => [object Attr]

這解釋了為什麼您永遠不應該直接與 .attributes 收集對話。您不是在操縱屬性的值，而是操縱代表屬性本身的物件。

如何設定必填？

在屬性上設定 required 的正確方法是什麼？您有兩種選擇，要么是反映的屬性，要么是通過正確設定屬性：

element.setAttribute("required", "");         //Correct
element.required = true;                      //Correct

嚴格來說，任何其他值都會「設定」該屬性。但 Boolean 屬性的定義規定，只能設定為空字串 "" 來指示 true。以下方法都可以設定requiredBoolean屬性，

但是不要使用它們：

element.setAttribute("required", "required"); //valid, but not preferred
element.setAttribute("required", "foo");      //works, but silly
element.setAttribute("required", "true");     //Works, but don't do it, because:
element.setAttribute("required", "false");    //also sets required boolean to true
element.setAttribute("required", false);      //also sets required boolean to true
element.setAttribute("required", 0);          //also sets required boolean to true

我們已經了解到嘗試直接設定屬性是錯誤的：

edName.attributes["required"] = true;       //wrong
edName.attributes["required"] = "";         //wrong
edName.attributes["required"] = "required"; //wrong
edName.attributes.required = true;          //wrong
edName.attributes.required = "";            //wrong
edName.attributes.required = "required";    //wrong

如何清除必填項目？

嘗試刪除 required 屬性時的技巧是很容易意外地開啟它：

edName.removeAttribute("required");     //Correct
edName.required = false;                //Correct

無效的方法：

edName.setAttribute("required", null);    //WRONG! Actually turns required on!
edName.setAttribute("required", "");      //WRONG! Actually turns required on!
edName.setAttribute("required", "false"); //WRONG! Actually turns required on!
edName.setAttribute("required", false);   //WRONG! Actually turns required on!
edName.setAttribute("required", 0);       //WRONG! Actually turns required on!

使用反射的 .required 屬性時，您也可以使用任何「falsey」值將其關閉，並使用 true 值將其開啟。但為了清楚起見，請堅持正確和錯誤。

如何檢查是否有必要？

透過 .hasAttribute("required") 方法檢查屬性是否存在：

if (edName.hasAttribute("required"))
{
}

您也可以透過 Boolean 反映的 .required 屬性進行檢查：

if (edName.required)
{
}

點贊 +0

新增回覆 关闭回复

P粉739886290

回覆