如果輸入不被接受，我如何顯示警告資訊并禁用按鈕？

我有一個正在監聽keyup事件的輸入欄位。它正在檢查用戶名的唯一性。我有一個頁面，里面有很多用戶需要填寫的表單。其中一個是檢查用戶名是否是唯一的。

這個用戶名有3個限制。

1. 必須是唯一的
。
2. 必須是小寫字母
。
3. 只接受字母數字。

我對這些限制沒有異議，但我對顯示警告資訊和禁用繼續按鈕有異議。

在實際開發中，我使用 API 來檢查用戶名，但你已經知道我想如何解決這個問題。真正的問題是，即使用戶名是有效的，它仍然顯示錯誤資訊。它沒有重繪 isUsernameUnique值。 我怎樣才能解決這個問題呢？

$(document)。 ready(function() {
  let isUsernameUnique = false;
  $('#nextButton').prop('disabled', false) 。
  $('#nextButton').click(function(e) {
    e.preventDefault（）。

    let year = $("#year").val() 。
    let email = $("#email").val() 。
    let username = $（"#username"）.val（）。


    if (isUsernameUnique == true) {
      Swal.fire（{
        icon: "警告"。
        text: 'Sorry this username already exists'.
      });
      $('#nextButton').prop('disabled', true) 。
    }

    if (year != " && email != " & username != ") {
      $('#nextButton').prop('disabled', false) 。
    } else {
      Swal.fire（{
        icon: "警告"。
        text: '請填寫所有資訊！'。
      });
    }

  });


  $('#username').keyup(function() {
let checkUsername = $（this）.val（$（this）。 val().toLowerCase()).val()。


    if (checkUsername == 'cindy90' || checkUsername == 'lilycollin' || checkUsername == 'adrian98') {
      $('#usernameValid').html(`<span style="color:red;"><b>（無效的）</b></span> `)。
      isUsernameUnique = false;
    } else ; isUsernameUnique = false; }
      $('#usernameValid').html(`<span style="color:green;"><b>（有效）</b></span>`) 。
    isUsernameUnique = true;

  });
});

<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>

<script src="/cdn. jsdelivr.net/npm/sweetalert2@11"></script> 

<div class="col-lg-6 mb-30" >
  <label><b> <span style="color: #e60000;">*</span> 用戶名< i></b> < span id="usernameValid">< /span></label><br> 
  <div class="input-group-prepend">/span>
    < input class="from-control" type="text" id="username" onkeypress="return((event. charCode >= 65 && event.charCode <= 90) || (event.charCode >= 48 && event.charCode <= 57) || (event.charCode >= 97 && event.charCode <= 122) && （event.charCode != 32））" > 
  </div> 
</div>/span>
<div class="col-lg-6 mb-30" >
  <label><b> <span style="color: #e60000;">*</span> 年份< /i></b> </span>< /label><br> 
  <div class="input-group-prepend">/span>
    < input class="from-control" type="text" id="year"> 
  </div> 
</div>/span>
<div class="col-lg-6 mb-30" >
  <label><b> <span style="color: #e60000;">*</span> Email< /i></b> </span>< /label><br> 
  <div class="input-group-prepend">/span>
    < input class="from-control" type="email" id="email"> 
  </div>/span>
</div>/span>

<button id="NextButton"> Next</button>

uj5u.com熱心網友回復：

幾件事情

我建議制作只做一兩件事的小函式。 我還建議使用提交事件而不是點擊事件來測驗有效性

const checkUser = () => {
  const checkUsername = $("#username"/span>). val（）.trim（）.toLowerCase（）。
  if (!checkUsername) return true
  const isUsernameUnique = !['cindy90', 'lilycollin', 'adrian98'] 。 includes(checkUsername)
  if (isUsernameUnique)
    $('#usernameValid').html(`<span style="color:green;"><b>（有效）</b></span> `) 。
  else[/span
    $('#usernameValid').html(`<span style="color:red;"> <b> (Invalid )</b> </span> `) 。
  if (!isUsernameUnique) {
    Swal.fire（{
      icon: "警告"。
      text: 'Sorry this username already exists'.
    });
  }

  return isUsernameUnique;
}

const checkEntries = (/span>) => {
  let year = $("#year").val().trim() 。
  let email = $("#email").val().trim() 。
  let username = $("#username"/span>).val().trim()。
  return year !==" && email !==" && username !==";
}

const isValid = (/span>) => checkUser() && checkEntries() 。

$(function() {

  $('#username').on("input", checkUser)
  $('#myForm').on（"submit", function（e） {


    if (!checkEntries() ) {
      Swal.fire（{
        icon: "警告"。
        text: '請填寫所有資訊！'。
      });
    }


    if (!isValid()) e.preventDefault()。
  })
  $('#myForm').on("input", function(e) {
    $('#nextButton').prop('disabled', !isValid();
  })
  $('#nextButton').prop('disabled', !isValid() ）。)
})

<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>

<script src="/cdn. jsdelivr.net/npm/sweetalert2@11"></script> 
<form id="myForm">/span>
  <div class="col-lg-6 mb-30"/span>>
    <label> 
      <span style="color: #e60000;"><b>*< /b></span> 
      <b><i>。 用戶名</i></b>  <span id="usernameValid"/span>> </span></label> 
    <div class="input-group-prepend">/span>
      < input class="form-control"/span> type="text" id="username" onkeypress="return((event. charCode >= 65 && event.charCode <= 90) || (event.charCode >= 48 && event.charCode <= 57) || (event.charCode >= 97 && event.charCode <= 122) && （event.charCode != 32））"  /> 
    </div> 
  </div>/span>
  <div class="col-lg-6 mb-30" >
    <label><span style="color: #e60000;"><b>*</b> </span> <b> <i>年</i> </b></label> 
    <div class="input-group-prepend">/span>
      < input class="form-control"/span> type="text" id="year"> 
    </div> 
  </div>/span>
  <div class="col-lg-6 mb-30" >
    <label><span style="color: #e60000;"><b>*</b> </span> <b> <i>電子郵件</i> </b></label> 
    <div class="input-group-prepend">/span>
      < input class="form-control"/span> type="email" id="email"> 
    </div>/span>
  </div>/span>
  <button id="NextButton"> 下一個</按鈕>
</form>/span>

uj5u.com熱心網友回復：

在keyup函式替換中

let checkUsername = $(this) 。 val（$（this）.val（）.toLowerCase（））。

與

let checkUsername = $(this) 。 val（$（this）.val（）。 toLowerCase()).val()。

標籤：

上一篇：重定向到'href'并改變選單的活動類別

下一篇：近距離通信，引領萬物互聯新時代