required是一个反射属性（如 、 、 等），因此：idnametype

element.required = true;

...其中 是实际的 DOM 元素，例如：elementinput

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

（只是为了完整性。

再：

则属性的值不是空字符串，也不是属性的规范名称：

edName.attributes.required = [object Attr]

这是因为在该代码中是一个属性对象，而不是字符串; 是一个 NamedNodeMap，其值为 Attr 对象。要获得其中一个的值，您需要查看其属性。但对于布尔属性，该值不相关;该属性要么存在于映射中（真），要么不存在（假）。requiredattributesvalue

因此，如果没有反映，您可以通过添加属性来设置它：required

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

...这相当于 .您可以通过完全删除它来清除它：element.required = true

element.removeAttribute("required");

...这相当于 .element.required = false

但是我们不必这样做，因为它被反射了。required

简短版本

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.getAttributeelement.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(name)
• setAttribute(name, value)

存在。他们负责将值分配给内部的 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")
==========================   ===============  =========================
<input>                      false (Boolean)  null (Object)
<input required>             true  (Boolean)  "" (String)
<input required="">          true  (Boolean)  "" (String)
<input required="required">  true  (Boolean)  "required" (String)
<input required="true">      true  (Boolean)  "true" (String)
<input required="false">     true  (Boolean)  "false" (String)
<input required="0">         true  (Boolean)  "0" (String)

尝试直接访问集合是错误的。它返回表示 DOM 属性的对象：.attributes

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

这就解释了为什么你永远不应该直接与收藏家交谈。您不是在操作属性的值，而是在操作表示属性本身的对象。.attributes

如何设置必填项？

设置属性的正确方法是什么？您有两种选择：反射属性或通过正确设置属性：required

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

严格来说，任何其他值都将“设置”该属性。但是属性的定义规定，它只应设置为空字符串以指示 true。以下方法都用于设置布尔属性，Boolean""required

但不要使用它们：

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!

使用反射属性时，还可以使用任何“falsey”值将其关闭，并使用真值将其打开。但为了清楚起见，请坚持正确和错误。.required

如何检查 ？required

通过以下方法检查属性是否存在：.hasAttribute("required")

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

您还可以通过布尔反射属性进行检查：.required

if (edName.required)
{
}