<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.txagent input{ background: #1e1e1e; border: 1px solid #666; padding: 5px; margin: 23px; width: 20vw; color: #ccc; font-size: 14px; border-radius: 5px; outline: none;}
.txagent input:focus{ box-shadow: 0px 0px 5px 0px #fff }
.bbtn{ display: inline-block;
margin-top: 5%;
background-color: #F4CE22;
border: none;
outline: none;
border-radius: 3px;
width: 28%;
color: #000;
letter-spacing: 10px;
padding: 5px 0;}
.worry{ border-color: red!important; }
.bbtn[disabled]{
pointer-events: none;
border-color: transparent;
cursor: not-allowed;
opacity: .45;
-webkit-box-shadow: none;
box-shadow: none;
}
</style>
</head>
<body>
<div style="text-align: center;">
<div class="txagent"><label >身份证</label><input type="text" name="card" class="sfz" required></div>
<div class="txagent"><label >手机：</label><input type="text" name="phone" class="phone" required></div>
<div class="txagent"><label >邮箱：</label><input type="text" name="email" class="email" required></div>
<div class="txagent"><label >Q Q： </label><input type="text" name="qq" class="qq" required minlength="6"></div>
<button class="bbtn" onclick="return tijiao();"> 完成</button>
</div>
<script src="//cdn.bootcss.com/jquery/2.1.3/jquery.js"></script>
<script src="http://cdn.bootcss.com/layer/2.4/layer.js"></script>
<script>
function tijiao(){
var card = $('.sfz').val();
var phone = $('.phone').val();
var email = $('.email').val();
var qq = $('.qq').val();
$.ajax({
url:'/Home/Index/ajaxgetdetailinfo',
data:'card='+card+'&phone='+phone+'&email='+email+'&qq='+qq,
type:'post',
async:true,
dataType:'json',
success:function(jsonData){
if(jsonData.flag == 0){
alert('申请信息已提交,请耐心等待审核');
}else if(jsonData.flag == 1){
alert('你当前有未完成申请，请勿重复提交');
}
window.location.reload();
}
})
}
</script>
<script>
$(".sfz").blur(function(event) {
/* Act on the event */
var IDcard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if(IDcard.test($(this).val()))
{
$(".bbtn").removeAttr('disabled');
$(".sfz").removeClass('worry');
}else{
$(".bbtn").attr('disabled', 'disabled');
$(".sfz").addClass('worry');
}
});
$(".phone").blur(function(event) {
var phone = /^1[3|4|5|7|8][0-9]{9}$/;
if(phone.test($(this).val()))
{
$(".bbtn").removeAttr('disabled');
$(".phone").removeClass('worry');
}else{
$(".bbtn").attr('disabled', 'disabled');
$(".phone").addClass('worry');
}
});
$(".email").blur(function(event) {
var email = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(email.test($(this).val()))
{
$(".bbtn").removeAttr('disabled');
$(".email").removeClass('worry');
$(".email").addClass('success')
}else{
$(".bbtn").attr('disabled', 'disabled');
$(".email").removeClass('success');
$(".email").addClass('worry');
}
});
</script>
</body>
</html>
