Js 中关于注册表单,使用onsubmit进行拦截提交,并判断用户填写的内容是否正确
<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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.