jQuery表单验证 

<!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>

 

posted @ 2016-11-07 14:03  墨纸瀚云  阅读(179)  评论(0)    收藏  举报