利用js编写一个简单的html表单验证，验证通过时提交数据(附源码)
程序员文章站
2022-04-09 18:01:54
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<script type="text/javascript">
function checknm() {
var check = false;
var username = document.getelementsbyname("username")[0];
if (1<=username.value.length && username.value.length<=10){
console.log(document.getelementbyid("checktext1").innerhtml = " √")
check = true;
}else{
document.getelementbyid("checktext1").innerhtml = " × 最多10位且不为空";
check = false;
}
return check;
}
function checkide(){
var check = false;
var userid = document.getelementsbyname("userid")[0];
if (1<=userid.value.length && userid.value.length<=10){
document.getelementbyid("checktext2").innerhtml = " √";
check = true;
}else{
document.getelementbyid("checktext2").innerhtml = " × 最多10位且不为空";
check = false;
}
return check;
}
function checkpwd(){
var check = false;
var userpwd = document.getelementsbyname("userpwd")[0];
if (6<userpwd.value.length && userpwd.value.length<=15){
document.getelementbyid("checktext3").innerhtml = " √";
check = true;
}else{
document.getelementbyid("checktext3").innerhtml = " × 最少6位，最多15位";
check = false;
}
return check;
}
function checkpwd1(){
var check = false;
var userpwd1 = document.getelementsbyname("userpwd1")[0];
var userpwd = document.getelementsbyname("userpwd")[0];
if (userpwd1.value == userpwd.value){
document.getelementbyid("checktext4").innerhtml = " √密码一致";
check = true;
}else{
document.getelementbyid("checktext4").innerhtml = " × 两次密码不一致";
check = false;
}
return check;
}
function checkeml(){
var check = false;
var useremail = document.getelementsbyname("useremail")[0];
if (!/^([a-za-z0-9_-])+@([a-za-z0-9_-])+(.[a-za-z0-9_-])+/.test(useremail.value)){
document.getelementbyid("checktext5").innerhtml = " × 邮箱格式不规范";
check = false;
}else{
document.getelementbyid("checktext5").innerhtml = " √";
check = true;
}
return check;
}
function check(){
var check = checknm() && checkide() && checkpwd() && checkpwd1() && checkeml();
return check;
}
</script>
</head>
<body>
<!-- <a href="./login.html"></a> -->
<!-- <button onclick="yz()" >验证账号</button> -->
<form method="get" action="./success.html" onsubmit = "return check()">
<table align="center">
<tr>
<td><label>*</label><strong>用户名:</strong></td>
<td><input type="text" name="username" value="" placeholder="用户名(5位以内)" onchange="checknm()"></td>
<td><span id="checktext1"></span></td>
</tr>
<tr>
<td><label>*</label><strong>用户id:</strong></td>
<td><input type="text" name="userid" value="" placeholder="数字id(11位以内)" onchange="checkide()"></td>
<td><span id="checktext2"></span></td>
</tr>
<tr>
<td><label>*</label><strong>登录密码:</strong></td>
<td><input type="password" name="userpwd" value="" placeholder="请输入密码(6~15)" onchange="checkpwd()"></td>
<td><span id="checktext3"></span></td>
</tr>
<tr>
<td><label>*</label><strong>确认密码:</strong></td>
<td><input type="password" name="userpwd1" value="" placeholder="请再次确认密码" onchange="checkpwd1()"></td>
<td><span id="checktext4"></span></td>
</tr>
<tr>
<td><label>*</label><strong>电子邮箱:</strong></td>
<td><input type="text" name="useremail" value="" placeholder="邮箱地址，如：123@qq.com" onchange="checkeml()"></td>
<td><span id="checktext5"></span></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"></td>
<td><a href="">重填</a></td>
</td>
</tr>
</table>
</form>
</body>
</html>