重要的不是属性，而是 财产，它的值是一个布尔值。

你可以用

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

required是 反映的财产(如 id、 name、 type等) ，因此:

element.required = true;

... 其中 element是实际的 input DOM 元素，例如:

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

(只是为了完整。)

回应:

然后，属性的值不是空字符串，也不是属性的规范名称:

edName.attributes.required = [object Attr]

这是因为代码中的 required是 属性对象，而不是字符串; attributes是值为 Attr对象的 NamedNodeMap。要获得其中一个的值，您需要查看它的 value属性。但是对于布尔型属性，该值是不相关的; 该属性要么存在于 map 中(true) ，要么不存在(false)。

因此，如果 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.getAttribute和 element.setAttribute:

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

This is because the attribute actually contains a special HtmlAttribute object:

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”，您错误地将其设置为 绳子对象，而不是它所需的 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;

This is why:

• 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!

Testing Cases

这导致了对 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)

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

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

这就解释了为什么你不应该直接与 .attributes对话。您操作的不是属性的 价值观，而是表示属性本身的对象。

如何设置要求？

在属性上设置 required的正确方法是什么？您有两个选择，要么反射的 财产，要么通过正确设置属性:

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

严格地说，任何其他值都将“设置”属性。但是，Boolean属性的定义规定，它应该只设置为空字符串 ""，以指示 没错。以下方法都适用于 准备好了的 required 布尔型属性,

但 do not use他们:

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

How to clear required?

在尝试 remove的 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属性时，还可以使用任何 “假”值来关闭它，使用 true 值来打开它。但为了清楚起见，还是坚持真假吧。

如何为 required的 检查完毕？

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

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

您也可以通过 布尔型反射 .required属性检查它:

if (edName.required)
{
}

try out this..

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

还有 jquery 版本:

$('input').attr('required', true)
$('input').attr('required', false)

我知道这是不可能的，但也许有人会觉得这很有帮助:)

let formelems = document.querySelectorAll('input,textarea,select');
formelems.forEach((formelem) => {
formelem.required = true;


});

如果您希望进行所有输入、 textarea 和选择所需的元素。