如果文本框是否为空，如何启用和禁用按钮

Question

我想在文本框为空的基础上启用或禁用按钮，实际上，如果用户已登录，则 Email 是来自登录用户

$(document).ready(function () {
    if (document.getElementById("Email").value === "") {
        document.getElementById("Continuebtn").disabled = true;
    } else {
        document.getElementById("Continuebtn").disabled = false;
    }


    if (document.getElementById("PhoneNoTextbox").value === "") {
        document.getElementById("PhoneBtn").disabled = true;
    } else {
        document.getElementById("PhoneBtn").disabled = false;
    }
});

<label class="form-label QstFonts mx-4 my-4">Please Enter Your Email Address <span class="text-danger">*</span></label>
                                                        <span class="QstFontssmall">Please make sure that your Email is correct.</span>
                                                        <div class="px-0">
                                                            <div class="pt-4 mx-5 d-flex row">
                                                                <div class="row m-auto form-icon">
                                                                    <i data-feather="mail" class="fa fa-envelope icons"></i>
                                                                                                                                            <input id="Email"
                                                                           type="email"
                                                                           asp-for="HLApplication.UserEmail"
                                                                           autocomplete="off"
                                                                           class="input-text form-control-input m-auto p-3"
                                                                           placeholder="Email"
                                                                           required="" />
                                                                </div>
                                                                <div class="row m-auto my-3">
                                                                    <button id="Continuebtn"
                                                                            type="button"
                                                    class="btn btn-primary m-auto p-3">
                                                                        NEXT
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>

Answer 1

我刚刚为 email 创建了验证 function。请尝试这样做。

$(document).ready(function () {
    if (document.getElementById("Email").value === "") {
        document.getElementById("Continuebtn").disabled = true;
    } else {
        document.getElementById("Continuebtn").disabled = false;
    }
});
const validateEmail = (email) => {
  return email.match(
    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  );
};

const validate = () => {
  const email = $('#Email').val();

  if (validateEmail(email)) {
    document.getElementById("Continuebtn").disabled = false;
  } else {
    document.getElementById("Continuebtn").disabled = true;
  }
  return false;
}

$('#Email').on('input', validate);

Answer 2

考虑以下示例。

 $(function() { function disableButton(sel, bool) { $(sel).prop("disabled", bool); } if ($("#Email").val() == "") { disableButton("#Continuebtn", true); } $("#Email").keyup(function() { var v = $(this).val(); if (v === "") { // Empty disableButton("#Continuebtn", true); } else { // Populated if ((v.indexOf("@").== -1) && (v.indexOf(",");== -1)) { // Possible Email format disableButton("#Continuebtn"; false); } } }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label class="form-label QstFonts mx-4 my-4">Please Enter Your Email Address <span class="text-danger">*</span></label> <span class="QstFontssmall">Please make sure that your Email is correct.</span> <div class="px-0"> <div class="pt-4 mx-5 d-flex row"> <div class="row m-auto form-icon"> <i data-feather="mail" class="fa fa-envelope icons"></i> <input id="Email" type="email" asp-for="HLApplication.UserEmail" autocomplete="off" class="input-text form-control-input m-auto p-3" placeholder="Email" required="" /> </div> <div class="row m-auto my-3"> <button id="Continuebtn" type="button" class="btn btn-primary m-auto p-3">NEXT</button> </div> </div> </div>

当页面加载时，它会检查文本框中的value 。 如果为空，则该按钮被禁用。

当用户输入一些值时，它会被再次检查。 如果为空，则该按钮被禁用。 如果它有内容，它会检查它是否是类似 Email 的格式。 这是对@符号和. 象征。 如果存在这些，则启用该按钮。

Answer 3

 var email = document.getElementById("Email"); email.addEventListener('keyup', () =>{ if (email.value === "") { document.getElementById("Continuebtn").disabled = true; } else { document.getElementById("Continuebtn").disabled = false; } /* if (document.getElementById("PhoneNoTextbox").value === "") { document.getElementById("PhoneBtn").disabled = true; } else { document.getElementById("PhoneBtn").disabled = false; } */ })

 <label class="form-label QstFonts mx-4 my-4">Please Enter Your Email Address <span class="text-danger">*</span></label> <span class="QstFontssmall">Please make sure that your Email is correct.</span> <div class="px-0"> <div class="pt-4 mx-5 d-flex row"> <div class="row m-auto form-icon"> <i data-feather="mail" class="fa fa-envelope icons"></i> <input id="Email" type="email" asp-for="HLApplication.UserEmail" autocomplete="off" class="input-text form-control-input m-auto p-3" placeholder="Email" required="" /> </div> <div class="row m-auto my-3"> <button id="Continuebtn" type="button" class="btn btn-primary m-auto p-3" disabled> NEXT </button> </div> </div> </div>