Javascript的form表单校验输入框

以下是HTML代码：

 <form name="myForm" onsubmit="return validateForm()"><label for="name">姓名：</label><input type="text" id="name" name="name"><br><label for="email">电子邮件：</label><input type="email" id="email" name="email"><br><label for="age">年龄：</label><input type="number" id="age" name="age"><br><label for="phone">电话号码：</label><input type="tel" id="phone" name="phone"><br><label for="address">地址：</label><input type="text" id="address" name="address"><br><label for="username">用户名：</label><input type="text" id="username" name="username"><br><input type="submit" value="提交"></form>

以下是js实现：

 function validateForm() {var name = document.forms["myForm"]["name"].value;var email = document.forms["myForm"]["email"].value;var age = document.forms["myForm"]["age"].value;var phone = document.forms["myForm"]["phone"].value;var address = document.forms["myForm"]["address"].value;var username = document.forms["myForm"]["username"].value;if (name == "") {alert("请填写姓名");return false;}if (email == "") {alert("请填写电子邮件");return false;} else {var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;if (!emailPattern.test(email)) {alert("请输入有效的电子邮件地址");return false;}}if (age == "") {alert("请填写年龄");return false;} else {if (isNaN(age) || age < 0 || age > 120) {alert("请输入有效的年龄");return false;}}if (phone == "") {alert("请填写电话号码");return false;} else {var phonePattern = /^\d{11}$/;if (!phonePattern.test(phone)) {alert("请输入有效的电话号码（11位数字）");return false;}}if (address == "") {alert("请填写地址");return false;}if (username == "") {alert("请填写用户名");return false;}return true;}

定义了一个名为validateForm的JavaScript函数，该函数用于验证表单数据。在函数中，首先获取每个输入框的值，然后逐一进行验证。

对于每个输入框，我们使用条件语句来检查其值是否满足特定要求，并在不符合要求时显示警告框并返回false以阻止表单提交。例如，如果姓名字段为空，则显示警告框并返回false。同样地，我们使用正则表达式来验证电子邮件和电话号码的格式，使用比较运算符来验证年龄的范围。

在HTML部分，我们将每个输入框与相应的标签进行关联，并在表单元素上添加了onsubmit事件来调用validateForm函数。如果所有输入框的值都通过验证，将允许表单提交；否则，将阻止表单提交。