驗證 JavaScript 中的文本輸入

Question

我正在使用小型 js 函數和電子郵件正則表達式編寫表單。 當輸入為空或電子郵件字符串（id =“email”）無效時，我想進行驗證並顯示錯誤。 我也想在點擊按鈕后從輸入中刪除錯誤類，當輸入的要求將被實現時。 在這一刻，我的函數不會從非電子郵件輸入中刪除錯誤類，除非將實現正確的電子郵件（正則表達式），因此即使另一個輸入沒問題，我也無法通過該輸入的驗證，直到電子郵件正確為止。

我的代碼：

    Validation();
    function Validation() {
        $('.my-button').click(function(){

          $("input,textarea").each(function() {
            var element = $(this);
            var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            var email = document.getElementById("email");
            var notification = document.getElementById("notification");
           
            if (element.val() == "") {
                element.closest('.label-error').css('visibility', 'visible');
                element.closest('.my_item').addClass('error');
                notification.style.display = "block";
              }
            
            else if (!reg.test(email.value)) {
                element.closest('.label-error').css('visibility', 'visible');
                element.closest('.my_item').addClass('error');
                email.focus;
                return false;
            } 
            else if (!element.val() == "") {
                element.closest('.label-error').css('visibility', 'hidden');
                element.closest('.my_item').removeClass('error');
                notification.style.display = "none";
            }   
                     
          });
        });
      }
}

編輯：下面的html代碼：

<div class="write-to-us">
                <div class="col-md-12 field">
                    <p>Write to us</p>
                </div>
                <div class="col-md-12 field">
                    <div class="my_item">
                        <label>Name</label>
                        <input  type="text" name="subject" class="my-text-input">
                        <div class="label-error">Write your Name</div>
                    </div> 
                </div>
                <div class="col-md-12 field">
                    <div class="my_item">
                        <label>Surname</label>
                        <input type="text" id="email"  name="email" class="my-text-input">
                        <div class="label-error">Write your email</div>
                </div>
                </div>
                <div class="col-md-12 field">
                    <div class="my_item">
                        <label">Question</label>
                        <textarea type="text" name="subject" class="my-text-input"></textarea>
                    </div>
                </div>
                <div>
                    <button class="my-button">Check it</button>
                </div>
            </div>

有誰知道如何解決它？ 要從其他輸入中刪除錯誤類並僅在電子郵件中留下錯誤（如果只有電子郵件不正確）？

Answer 1

問題是您要檢查每個 input 或 textarea 元素的“email”元素是否正確。 如果您放置另一個條件來檢查循環中的當前元素是否是“電子郵件”元素，它應該可以正常工作。 像這樣的東西：

    function Validation() {
        $('.my-button').click(function(){

          $("input,textarea").each(function() {
            var element = $(this);
            var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            var notification = document.getElementById("notification");
           
            if (element.val() == "") {
                element.closest('.label-error').css('visibility', 'visible');
                element.closest('.my_item').addClass('error');
                notification.style.display = "block";
              }
            else if (!element.val() == "") {
                element.closest('.label-error').css('visibility', 'hidden');
                element.closest('.my_item').removeClass('error');
                notification.style.display = "none";
            }

            if (element.attr("id") === "email" && !reg.test(element.val())) {
                element.closest('.label-error').css('visibility', 'visible');
                element.closest('.my_item').addClass('error');
                element.focus;
            } 
          });
        });
      }
}

我沒有測試它，但想法就在那里。 如果您提供您的 html 代碼，我將對其進行測試。