名称属性中带有方括号的输入 [英] inputs with square brackets in the name attribute

问题描述

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

I searched a lot on this forum to solve this issue I have, but have not succeeded thus far. I have a form with several <input> sections. In this form I have a password field and a confirmation password field which needs to be validated with the first password. Here is HTML code example:

<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]".如果使用不带方括号的名称属性，则验证有效；如果使用带方括号的名称属性，则验证无效.有什么想法如何克服name属性中的方括号问题而不丢失方括号吗?

Both inputs have a name with square brackets, e.g. "RegisterForm[password]". If I use name attributes without the brackets the validation works, if I use it with brackets, the validation does not work. Any ideas how to overcome the square bracket issue in the name attribute without losing the square brackets?

如果我将属性替换为"password1"和"password2"，那么一切都会按预期进行.

If I would replace the name attributes with "password1" and "password2", then everything works as it supposed to do.

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

If anyone has the solution, please help me out! :-).

推荐答案

首先，我认为在on-事件属性中放置大量代码不是一种好习惯.对于我来说，我更喜欢在javascript源文件中定义一些函数并使用它们，而不是将复杂的表达式放入属性中.

First of all I think this is not good practice to put much code inside on- event attributes. As for me, I prefer to define some functions in javascript source file and use them rather than put complex expressions into attributes.

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

Anyway, the issue is that form.RegisterForm[password2].pattern is wrong way to access your input element. In this case first form object is looked up. Then interpreter tries to look up RegisterForm property. Square brackets is another way to access object's property, but it requires a string. In your case there goes password2 identifier rather that string literal, and I believe it will try to read the value of variable with same name and look up property in RegisterForm depending on result. So entire expression is invalid and likely will fail early at RegisterForm step.

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

But you still can access your input by name containing square brackets, for example using querySelector() function:

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

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

Following code snippet works as expected: if entered password is invalid it sets custom validity message to password input, otherwise it sets empty validity message and updates pattern attribute of confirmation input.

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

P.S.结构化代码，这将对您将来有所帮助.

这篇关于名称属性中带有方括号的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！