Js 中关于注册表单,使用onsubmit进行拦截提交，并判断用户填写的内容是否正确

最新推荐文章于 2019-10-15 13:51:40 发布

林子夕

最新推荐文章于 2019-10-15 13:51:40 发布

阅读量992

点赞数

分类专栏：编程之路文章标签： javascript

本文链接：https://blog.csdn.net/qq_21935367/article/details/50457073

版权

编程之路专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="描述">
<meta name="keywords" content="关键词">
<title>onsubmit表单验证</title>
<style>
.a{
background:yellow;
}
div{
width:400px;
height:50px;
padding-left:50px;
}
form{
background:#ccc;
width:500px;
height:260px;
}
h3{
color:red;
text-align:center;
}
</style>
<script>
function test1(){
document.getElementById('name_info').innerHTML='';
document.getElementById('psw1_info').innerHTML='';
document.getElementById('psw2_info').innerHTML='';

var user=document.getElementById('name').value;
var mn=document.getElementById('psw1').value;
var rmn=document.getElementById('psw2').value;

if(user.length<5||user.length>11){
document.getElementById('name_info').innerHTML='用户名必须是5-11位';
return false;
}else if(mn.length<6||mn.length>12){
document.getElementById('psw1_info').innerHTML='用户名必须是6-12位';
return false;
}else if(mn!=rmn) {
document.getElementById('psw2_info').innerHTML='密码和重复密码不一致';
return false;
}else{
return true;
}
}

</script>
</head>
<body>
<form οnsubmit="return test1()" action="xx.com" id="reg">
<h3>欢迎注册</h3>
<div>用户名:<input type="text" id="name">
<span id="name_info" class="a"></span>
</div>
<div>密码:<input type="password" id="psw1">
<span id="psw1_info" class="a"></span>
</div>
<div>重复密码:<input type="password" id="psw2">
<span id="psw2_info" class="a"></span>
</div>
<div><input type="submit" value="注册" id="sub" ></div>
</form>
</body>
</html>