以下是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
函数。如果所有输入框的值都通过验证,将允许表单提交;否则,将阻止表单提交。