javascript JS/JQuery:为表单输入动态添加“pattern”和“title”属性
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/20447467/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JS/JQuery: Dynamically add "pattern" and "title" attribute to form input
提问by Keven
I have multiple form input elements. I would like to add a pattern
attribute and a title
attribute to each one, but rather than do so manually, I want to dynamically add the same pattern
and title
to each form input using JavaScript/jQuery.
我有多个表单输入元素。我想为每个pattern
属性添加一个属性和一个title
属性,但不是手动添加,我想使用 JavaScript/jQuery动态添加相同的pattern
和title
到每个表单输入。
This is what the form input fields look like now:
这是表单输入字段现在的样子:
<input type="text" class="form-control" id="paycheck" />
<input type="text" class="form-control" id="investments" />
<input type="text" class="form-control" id="otherIncome" />
As an end result I would like each form input to look like the following:
作为最终结果,我希望每个表单输入如下所示:
<input pattern="\d*\.?\d*" title="blah blah blah" type="text" class="form-control" id="paycheck" />
etc...
As examples, I've tried the following for the pattern attribute, but none of them work:
作为示例,我尝试了以下模式属性,但它们都不起作用:
$( "input" ).attr("pattern", '\d*\.?\d*');
$( "input" ).attr("pattern", \d*\.?\d* );
$( ".formClass input" ).attr("pattern", '\d*\.?\d*');
$( "input" ).prop("pattern", '\d*\.?\d*');
$( "input" ).prop("pattern", \d*\.?\d* );
$( ".formClass input" ).prop("pattern", '\d*\.?\d*');
...imagine something similar for the title attribute...
采纳答案by Keven
In the end, I found that the syntax was correct. There was an error somewhere else in the code preventing that statement from being run. Just goes to show that you should always make sure everything is good elsewhere in your code first.
最后,我发现语法是正确的。代码中的其他地方存在错误,导致该语句无法运行。只是表明您应该始终首先确保代码中其他地方的一切都很好。
However, I did learn a few things from this which I will note for others:
但是,我确实从中学到了一些东西,我会为其他人注意:
- The jQuery
.attr()
function will dynamically add any attribute you specify, so you don't need to putpattern=""
in your form elements first in order for the value to be added or changed. - Of important note, if you are going to dynamically add a regex using jQuery, YOU NEED TO ESCAPE certain characters.
- jQuery
.attr()
函数将动态添加您指定的任何属性,因此您无需先放入pattern=""
表单元素即可添加或更改值。 - 重要的是,如果您要使用 jQuery 动态添加正则表达式,您需要转义某些字符。
The regex was originally \d*\.?\d*
but in the DOM it was showing up as d*.?d*
so when sending the regex through jQuery I escaped the backslashes like so: \\d*\\.?\\d*
.
正则表达式原是\d*\.?\d*
但在DOM它显示为d*.?d*
这样发送的正则表达式时,通过jQuery的我躲过了反斜杠,像这样:\\d*\\.?\\d*
。
- Finally, I did not have to make my fields required for the regex to work. The HMTL5 validation only threw an error for me if I included incorrect text in the field, and when it threw an error, the form was not submitted. If I left the fields empty or put correct text in the fields, then no error was thrown. I'm up for an explanation if I'm wrong.
- 最后,我不必使我的字段成为正则表达式工作所需的。如果我在字段中包含不正确的文本,HMTL5 验证只会为我抛出错误,并且当它抛出错误时,表单未提交。如果我将字段留空或在字段中输入正确的文本,则不会引发错误。如果我错了,我愿意解释。