在 javascript 正则表达式中使用数据属性答案

【问题标题】：Use data attribute in javascript regex在 javascript 正则表达式中使用数据属性
【发布时间】：2018-07-25 23:26:52
【问题描述】：

我有这个脚本用于验证数字输入字段

if (fieldElement.getAttribute('type') == 'number') {
        var numberRegExp = /^\d{4}$/;

        var numberValidated = numberRegExp.test(fieldElement.value.trim());

        if (!numberValidated) {
          validated = false;

          if (!fieldElement.hasClass('error')) {

            if (fieldElement.nextElementSibling != undefined) {
              fieldElement.nextElementSibling.removeClass('js-hide');
              fieldElement.addClass('error');
            } else {
              var fieldErrorMessage = fieldElement.getAttribute('data-msg');
              var errorMessage = document.createElement('span');

              fieldElement.addClass('error');

              setTimeout(function () {
                errorMessage.addClass('error');
                errorMessage.innerHTML = fieldErrorMessage;
              }, timeout);

              fieldElement.parentNode.appendChild(errorMessage);
            }
          }
        }
      }

但我找不到使用的解决方案

var numberRegExp = /^\d{4}$/;

具有最小值/最大值的数据属性

<input type="number" data-minlength="10" data-maxlength="10" />

喜欢

var numberRegExp = /^\d{fieldElement.getAttribute('data-minlength')}$/;

这当然行不通

编辑：呸!脑残了！

我可以检查值的长度

var minlength = fieldElement.getAttribute('data-rule-minlength');
var maxlength = fieldElement.getAttribute('data-rule-maxlength');

if(fieldElement.value.length < minlength || fieldElement.value.length > maxlength) {
   numberValidated = false;
}

【问题讨论】：

您不能对type="number" 进行正则表达式验证。应该是type="text"。要动态创建正则表达式，您需要 var numberRegExp = new RegExp("^\\d{ + fieldElement.getAttribute('data-minlength') + "}$";
也许你可以试试这样的var numberRegExp = new RegExp('^\d{'+fieldElement.getAttribute('data-minlength')+'}$');。请注意，我没有对此进行测试，您可以尝试。
可能是How do you pass a variable to a Regular Expression JavaScript?的骗子。

标签： javascript html regex custom-data-attribute

【解决方案1】：

不要使用正则表达式来测试数字，而是使用!isNaN(fieldElement.value.trim())

【讨论】：

我不是只测试一个数字。它还必须是精确的长度。这是一个 10 位数字的丹麦社会安全号码。
然后这样做!isNaN(fieldElement.value.trim()) && fieldElement.value.trim().length === 10

【解决方案2】：

你需要使用 RegExp 构造函数：

const minlength = fieldElement.dataset.minlength;
const reg = new RegExp('^\d{'+minlength+'}$');

【讨论】：

@downvoter 你能告诉我这个答案的问题吗？

【解决方案3】：

尝试以下操作。 numberRegExp = new RegExp('^[0-9]{'+fieldElement.getAttribute('data-minlength')+'}$');

【讨论】：

我已经检查了这段代码。它正确验证了数字和长度。所以请让我知道它是否适合你。