如何使用Javascript检查用户输入包括大写字母，小写字母，数字和8-12个字符之间?

Question

我正在学习Javascript，并且在作业中遇到麻烦。我应该创建检查用户输入是否有效的Javascript代码。说明上写着

要求用户以日期类型格式输入他们的名、姓、UserID和出生日期。UserID必须包含大写字母、小写字母和数字，长度为8 ~ 12个字符。创建一个JS函数来验证UserID字段的格式。您将需要使用Loop For逐个字符地遍历数据字段，以及像char. touppercase()和parsInt(char)或RegExp()这样的JS函数来验证UserID格式。

我不知道该怎么做。我试过这样做

<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，无论userid是否有效，它都会返回true或false。

验证后，设置文本以向用户显示消息。

const validateUserId = (userId) => /^(?=.*[a-z])(?=.*[A-Z])(?=.*[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>