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>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章