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>