表單驗證的沒有涉及後臺交互
<html lang="zh">
<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>
<!--次驗證利用了layer插件使用時需要把layer導入。樣式自己調主要是js的邏輯判斷-->
<script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layer-v3.1.1/layer/layer.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="box" style="width: 600px; height: 500px; border: 1px solid red; margin: 0 auto;">
<form action="" method="post" id="user_form" style="text-align: center;">
<div class="email_box" style=" margin-top: 50px;">
<label>公司郵箱：</label>
<input type="email" name="" id="eal" value=""/>
</div>
<div class="card" style="margin-top: 50px; padding-right:30px ;">
<label>身份證後六位：</label>
<input type="text" maxlength="6" name="" id="card" value="" />
</div>
<div class="sub" style="margin-top: 50px; padding-left: 100px;">
<input type="submit" value="提 交" style="color: #1b645a; width: 200px; " />
</div>
</form>
</div>
<script type="text/javascript">
var user_form = document.getElementById('user_form');
user_form.onsubmit=function(){
var eal = document.getElementById('eal').value;
var card = document.getElementById('card').value;
if(eal != ''){
if(card !=''){
return true;
}else{
layer.tips('請填寫身份證', '#card');
return false;
}
}else{
if(card !=''){
layer.tips('請填寫郵箱', '#eal');
return false;
}else{
alert('請填寫信息');
return false;
}
}
}
</script>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章