请制作一个HTML页面,内有Form,在填入使用者信息后,必须先检查内容有无错误。若无错误才能传送表单到服务器。若有错误,需以alert的提示讯息方式让使用者了解如何修改信息并且清空input box。检查内容的规则有以下重点要求: (1)Name必须超过5个字符。 (2)Email格式必须包含@特殊字符,并且在@之后,至少需要3个字符(例如: peter@umc.com(合法输入),peter@ma(不合法输入))。(3)Telephone必须是数字,不能有字符,输入的号码分别长度为5-3-3。(4)若提供输入的要求有*符号存在,则表示该输入input不能空白,输入全空格符也不可以。请同学完成此网页内容与相应所需的java script。
时间: 2024-02-13 08:02:24 浏览: 93
以下是一个简单的HTML页面,包含一个表单和相应的JavaScript代码,用于验证表单中的输入是否符合要求:
```html
<!DOCTYPE html>
<html>
<head>
<title>表单验证</title>
<meta charset="utf-8">
<script>
function validateForm() {
var name = document.forms["myForm"]["name"].value;
var email = document.forms["myForm"]["email"].value;
var telephone = document.forms["myForm"]["telephone"].value;
if (name.length < 5) {
alert("姓名必须超过5个字符!");
document.forms["myForm"]["name"].value = "";
return false;
}
if (!email.includes("@") || email.substring(email.indexOf("@")).length < 3) {
alert("Email格式必须包含@特殊字符,并且在@之后,至少需要3个字符!");
document.forms["myForm"]["email"].value = "";
return false;
}
if (!/^[0-9]+$/.test(telephone) || telephone.length != 11) {
alert("Telephone必须是数字,不能有字符,输入的号码分别长度为5-3-3!");
document.forms["myForm"]["telephone"].value = "";
return false;
}
return true;
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()" method="post">
<label for="name">Name: *</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email: *</label>
<input type="email" id="email" name="email" required><br><br>
<label for="telephone">Telephone: *</label>
<input type="text" id="telephone" name="telephone" required><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
```
这个表单包含三个输入框:姓名、电子邮件和电话号码。其中,姓名和电子邮件都是必填的,而电话号码则需要符合特定的格式。在表单提交之前,JavaScript代码会检查输入是否符合规则。如果有任何一个输入不符合要求,就会弹出一个警告框,告诉用户输入有误,并清空相应的输入框。如果所有输入都符合要求,表单才会被提交到服务器上。
阅读全文