javascript - 基于正则表达式匹配在 javascript/jquery 中启用按钮

Question

我无法让 match 绑定(bind)到我的文本输入的 oninput 属性。基本上我希望只有在匹配正则表达式时才启用我的提交按钮。如果正则表达式不匹配，则当光标位于提交按钮上时应显示一条消息。就目前而言，键入 abc 并没有像我希望的那样启用提交按钮。谁能告诉我我做错了什么？谢谢。

    <div id="message">
    </div>

<form method="POST">
  <input type="text" id="txt" oninput="match()" />
  <input type="submit" id="enter" value="enter" disabled />
</form>

  <script>

    var txt = $("#txt").value();

    var PATTERN = /abc/;
    var REQUIREMENTS = "valid entries must contain the string 'abc'";

    // disable buttons with custom jquery function

    jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            this.disabled = state;
        });
      }
    });

    $('input[type="submit"]).disable(true);

    var match = function(){

      if (txt.match(PATTERN)){
        $("#enter").disable(false)
      }

      else if ($("#enter").hover()){
        function(){
          $("#message").text(REQUIREMENTS);
        }
      }

  </script>  

Answer 1

您的代码将使用普通/普通 JavaScript 重写。

所以你的代码更干净，性能更好:

  <div id="message"></div>
  <form method="POST">
     <input type="text" id="txt" oninput="match()" />
     <input type="submit" id="enter" value="enter" disabled />
  </form>

         <script>
            var txt;
            var enter = document.getElementById('enter');
            var message = document.getElementById('message');
            var PATTERN = /abc/;
            var REQUIREMENTS = "valid entries must contain the string 'abc'";

            function match() {
                txt = document.getElementById('txt').value;
                if (PATTERN.test(txt)) {
                    enter.disabled = false;
                } else if (isHover(enter)) {
                    enter.disabled = true;
                    message.innerHTML = REQUIREMENTS;
                } else {
                    enter.disabled = true;
                }
            }
            function isHover(e) {
                return (e.parentElement.querySelector(':hover') === e);
            }
        </script>

如果你想说你想处理不同时刻的事件，你的代码应该如下。

注意:禁用时按钮不会触发事件，因此，解决方案是包装在触发事件的 div 元素中。您的代码 JavaScript 更简单，尽管代码 HTML 有点脏。

<form method="POST">
   <input type="text" id="txt" oninput="match()" />
   <div style="display: inline-block; position: relative">
     <input type="submit" id="enter" value="enter" disabled  />
     <div id="buttonMouseCatcher" onmouseover="showText(true)" onmouseout="showText(false)" style="position:absolute; z-index: 1;
              top: 0px; bottom: 0px; left: 0px; right: 0px;">
     </div>
  </div>

        <script>
            var txt;
            var enter = document.getElementById('enter');
            var message = document.getElementById('message');
            var PATTERN = /abc/;
            var REQUIREMENTS = "valid entries must contain the string 'abc'";

            function match() {
                txt = document.getElementById('txt').value;
                if (PATTERN.test(txt)) {
                    enter.disabled = '';
                } else {
                    enter.disabled = true;
                }
            }
            function showText(option) {
                message.innerHTML = option ? REQUIREMENTS : "";
            }
        </script>