form style="font-size: 16px;width: 400px;" name="forml" onsubmit="test();"> <p> 用户名:<input id="username" type="text" size="20">*</p> <p>用户密码:<input id="password1" type="password" size="20">*</p> <p>重复密码:<input id="password2" type="password" size="20">*</p> <p>电子邮件:<input id="email" type="text" size="20">*</p> <p> 电话:<input id="tel" type="text" size="20">*</p> <p>身份证号:<input id="idcard" type="text" size="20">*</p> <p><input type="submit" value="提交"> <input type="reset" value="重置"> </p>用js验证
时间: 2023-10-06 18:11:43 浏览: 69
你的问题是如何用 JavaScript 对表单进行验证?
以下是一个简单的表单验证示例,可以验证用户名、密码、电子邮件、电话和身份证号是否符合指定的格式要求:
```html
<!DOCTYPE html>
<html>
<head>
<title>表单验证</title>
<script>
function validateForm() {
var username = document.getElementById("username").value;
var password1 = document.getElementById("password1").value;
var password2 = document.getElementById("password2").value;
var email = document.getElementById("email").value;
var tel = document.getElementById("tel").value;
var idcard = document.getElementById("idcard").value;
// 验证用户名
if (username == "") {
alert("用户名不能为空");
return false;
}
// 验证密码
if (password1 == "" || password2 == "") {
alert("密码不能为空");
return false;
} else if (password1 != password2) {
alert("两次输入的密码不一致");
return false;
}
// 验证电子邮件
var emailPattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
if (!emailPattern.test(email)) {
alert("电子邮件格式不正确");
return false;
}
// 验证电话
var telPattern = /^1[34578]\d{9}$/;
if (!telPattern.test(tel)) {
alert("电话格式不正确");
return false;
}
// 验证身份证号
var idcardPattern = /^\d{17}[\dX]$/;
if (!idcardPattern.test(idcard)) {
alert("身份证号格式不正确");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="forml" onsubmit="return validateForm();">
<p> 用户名:<input id="username" type="text" size="20">*</p>
<p>用户密码:<input id="password1" type="password" size="20">*</p>
<p>重复密码:<input id="password2" type="password" size="20">*</p>
<p>电子邮件:<input id="email" type="text" size="20">*</p>
<p> 电话:<input id="tel" type="text" size="20">*</p>
<p>身份证号:<input id="idcard" type="text" size="20">*</p>
<p><input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
```
在这个示例中,我们使用 JavaScript 的正则表达式来验证电子邮件、电话和身份证号的格式。如果表单验证不通过,会弹出一个警告框,阻止表单提交。如果表单验证通过,就会提交表单。
阅读全文