如何使用 Javascript 來檢查用戶輸入是否包含大寫字母、小寫字母、數字並且在 8-12 個字符之間？

Question

我正在學習 Javascript 並且在分配作業時遇到了麻煩。 我應該創建 Javascript 代碼來檢查用戶輸入是否有效。 說明說

要求用戶以類型日期格式輸入他們的名字、姓氏、用戶 ID 和出生日期。 UserID 必須包含一個大寫字母、一個小寫字母、一個數字，並且長度為 8 到 12 個字符。 創建一個 JS 函數來驗證 UserID 字段的格式。您將需要使用 Loop For 逐個字符地遍歷您的數據字段，並使用 char.toUpperCase() 和 parsInt(char) 或 RegExp() 等 JS 函數來驗證用戶 ID 格式。

我不知道該怎么做。 我嘗試過這樣的事情

<form id = "myForm" action="">
  <label for="uid">User Id:</label>
  <input type="name" id="uid" name="uid"><br>
  <label for ="fname"> First Name:</label>
  <input type = "text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br>
  <label for ="birthday"> Birthday:</label>
  <input type="date" id="birthday" name = "birthday"><br>
  <input type="submit" id = "accept" value="Accept">
</form>

<div id = "validate">
</div>
<script>
form.onsubmit = function() {
  let uIdText = document.getElementById('uId');
  let pattern = \d;
  let result = pattern.test(uidText);
  if result = true {document.getElementById("validate").innerHTML = "Valid User ID"}
  else document.getElementById("validate").innerHTML = "UserID needs to include a number";
</script>

但這不起作用，並且它不使用循環。

*更新：我試過這個

var uIdText = document.getElementById(uId).innerHTML;
var myForm = document.getElementById(myForm).innerHTML;
var result = document.getElementById(validate).innerHTML;
myForm.onsubmit = function validate(uIdText) {
  uIdLength();
  /regexp(?=.[a-z])(?=.\d)(?=.[A-Z]);
}
function uIdLength(uIdText){
  if uIdText.legth >=8 && <=12 == true;
    then result = "Form Submitted";
    else result = "Invalid User Id"
}
validate(uIdText);

但這也沒有用。

Answer 1

注釋中寫的解決方案，您可以在input中添加pattern屬性：

<input type="text" id="fname" name="fname" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,12}">

Answer 2

這是一個小例子。 有一個validateUserId函數，無論用戶 ID 是否有效，它都會返回 true 或 false。

驗證后設置文本以向用戶顯示消息。

 const validateUserId = (userId) => /^(?=.*[az])(?=.*[AZ])(?=.*[0-9]).{8,12}$/.test(userId); const form = document.getElementById("myForm"); form.onsubmit = (e) => { // stop page from reload e.preventDefault(); // validate userid and set message if(validateUserId(e.target.elements.uid.value)) { document.getElementById("validate").innerHTML = "Valid User ID"; } else { document.getElementById("validate").innerHTML = "User ID needs to include a number"; } }

 form label { width: 80px; display: inline-block; }

 <form id="myForm" action=""> <label for="uid">User Id:</label> <input type="name" id="uid" name="uid"><br> <label for="fname"> First Name:</label> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br> <label for ="birthday"> Birthday:</label> <input type="date" id="birthday" name = "birthday"><br> <input type="submit" id = "accept" value="Accept"> <div id="validate"></div> </form>