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

Question

我有这个脚本可以用来验证数字输入字段

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;
}

Answer 1

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

Answer 2

您需要使用 RegExp 构造函数：

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

Answer 3

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

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

Use data attribute in javascript regex

javascript

html

regex

custom-data-attribute