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"替换名称属性，那么一切都按照预期的方式进行。

如果有人有解决方案，请帮帮我！： - 。）

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]"');

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

＆＃13;

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 : ''); 
}

＆＃13;

<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 . . ."/>

＆＃13;

P.S。构建您的代码，这将在未来帮助您。

name属性中带方括号的输入

1 个答案: