作者：刘妤劭明馨 | 来源：互联网 | 2023-01-14 11:57
表单校验:创建表单,使用Javascript+dom为表单添加校验.
要求:
- 验证用户名称,必须以字母开头,长度2-6位之间.
- 验证密码不能为空.
- 确认密码不能为空,要与密码一致.
<!DOCTYPE html>
<html lang="en">
<!-- 表单校验:创建表单,使用Javascript为表单添加校验.
1.验证用户名称,必须以字母开头,长度2-6位之间.
2.验证密码不能为空.
3.确认密码不能为空,要与密码一致. -->
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/Javascript">
function checkForm() {
var username = document.getElementById("username");
var usernamevalue = username.value;
var Reg = /^[a-zA-Z][-_a-zA-Z0-9]{1,5}/;
if (usernamevalue.length >= 2 && usernamevalue.length <= 6 && Reg.test(usernamevalue)) {
document.getElementById("usernameSpan").innerHTML = " 用户名可用";
} else {
document.getElementById("usernameSpan").innerHTML = " 用户名必须以字母开头且长度在2-6之间";
}
var password = document.getElementById("password").value;
if (password == "") {
document.getElementById("passwordSpan").innerHTML = "密码不能为空";
} else {
document.getElementById("passwordSpan").innerHTML = "密码可用";
}
var repassword = document.getElementById("repassword").value;
if (repassword == password) {
document.getElementById("repasswordSpan").innerHTML = "输入一致";
} else {
document.getElementById("repasswordSpan").innerHTML = "两次输入密码不一致";
}
}
</script>
</head>
<body>
<h2>新用户注册</h2>
<div style="border: 1px solid sandybrown; width: 300px; height: 260px;">
<form action="">
<table cellspacing="15">
<tr>
<td>
用户名称:
</td>
<td>
<input type="text" id="username">
<span id="usernameSpan"></span>
</td>
</tr>
<tr>
<td>
密  码:
</td>
<td>
<input type="password" id="password">
<span id="passwordSpan"></span>
</td>
</tr>
<tr>
<td>
确认密码:
</td>
<td>
<input type="password" id="repassword">
<span id="repasswordSpan"></span>
</td>
</tr>
</table>
</form>
</div>
<input type="button" value="确认注册" onclick="checkForm()" />
</body>
</html>
京公网安备 11010802041100号