name属性中带方括号的输入

Question

我在这个论坛上搜索了很多来解决这个问题，但到目前为止还没有成功。 我有一个包含多个<input>部分的表单。 在此表单中，我有一个密码字段和一个确认密码字段，需要使用第一个密码进行验证。 这是HTML代码示例：

<input 
  title="Password should contain at least 6 characters or numbers" type="password"
  pattern=".{6,}"
  name="RegisterForm[password]"
  onchange="this.setCustomValidity(this.validity.patternMismatch ? this.title : ''); if(this.checkValidity()) form.RegisterForm[password2].pattern = this.value;"
  placeholder="Password..."/>

<input
  title="Please enter the same Password as above"
  type="password"
  pattern=".{6,}"
  name="RegisterForm[password2]"
  onchange="this.setCustomValidity(this.validity.patternMismatch ? this.title : '');"
  placeholder="Confirm Password . . ."/>

两个输入都有一个带方括号的名称，例如"RegisterForm[password]" 。 如果我使用没有括号的名称属性验证工作，如果我使用括号，验证不起作用。 任何想法如何克服名称属性中的方括号问题而不丢失方括号？

如果我用"password1"和"password2"替换name属性，那么一切都按照预期的方式工作。

如果有人有解决方案，请帮帮我！ :-)。

Answer 1

首先，我认为这是不把太多的代码里面很好的做法on-事件属性。 至于我，我更喜欢在javascript源文件中定义一些函数并使用它们而不是将复杂的表达式放入属性中。

无论如何，问题是form.RegisterForm[password2].pattern是访问输入元素的错误方法。 在这种情况下，查找第一个form对象。 然后解释器尝试查找RegisterForm属性。 方括号是访问对象属性的另一种方法，但它需要一个字符串。 在你的情况下，有password2 标识符而不是字符串文字，我相信它会尝试读取具有相同名称的变量的值，并根据结果在RegisterForm查找属性。 因此整个表达式无效，可能会在RegisterForm步骤中提前失败。

但您仍然可以通过包含方括号的名称访问输入，例如使用querySelector()函数：

var passwordInput = document.querySelector('input[name="RegisterForm[password]"');
var confirmInput = document.querySelector('input[name="RegisterForm[password2]"');

以下代码片段按预期工作：如果输入的密码无效，则将自定义有效性消息设置为密码输入，否则设置空的有效性消息并更新确认输入的模式属性。

 function validatePassword() { var self = document.querySelector('input[name="RegisterForm[password]"]'); var conf = document.querySelector('input[name="RegisterForm[password2]"]'); self.setCustomValidity(self.validity.patternMismatch ? self.title : ''); if (self.checkValidity()) { conf.setAttribute("pattern", self.value); } } function validateConfirm () { var self = document.querySelector('input[name="RegisterForm[password2]"]'); self.setCustomValidity(self.validity.patternMismatch ? self.title : ''); } 

 <input title="Password should contain at least 6 characters or numbers" type="password" required pattern=".{6,}" class="input_bx" name="RegisterForm[password]" oninput="validatePassword();" placeholder="Password..."/> <input title="Please enter the same Password as above" class="input_bx" type="password" required pattern=".{6,}" name="RegisterForm[password2]" oninput="validateConfirm();" placeholder="Confirm Password . . ."/> 

PS结构你的代码，这将在未来帮助你。