首页>>表单>>jquery表单验证 检测表单输入是否符合要求(2017-09-10)

jquery表单验证 检测表单输入是否符合要求

jquery表单验证 检测表单输入是否符合要求
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2.         var h=/^[u4e00-u9fa5]{0,}$/;  
  3.         var d=/^1[3|4|5|8][0-9]d{4,8}$/;  
  4.         var y=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;  
  5.         $("input").focus(function() {  
  6.             $(this).prev().css("color","#008DE8");  
  7.         });  
  8.         $("[name='qiye']").blur(function() {  
  9.             var v=$(this).val();  
  10.             if (v=='') {  
  11.                 $("[name='qiye']").next().html("地址不能为空！");  
  12.                 $(this).prev().css("color","#f00");  
  13.             }else{  
  14.                 $(this).prev().css("color","#0EA74A");  
  15.                 $("[name='qiye']").next().html("");  
  16.             }   
  17.         });  
  18.         $("[name='name']").blur(function() {  
  19.             var v=$(this).val();  
  20.             if (v=='') {  
  21.                 $("[name='name']").next().html("姓名不能为空！");  
  22.                 $(this).prev().css("color","#f00");  
  23.             }else if(!v.match(h)){  
  24.                 $("[name='name']").next().html("姓名不合法！");  
  25.                 $("[name='name']").prev().css("color","#f00");  
  26.             }else{  
  27.                 $(this).prev().css("color","#0EA74A");  
  28.                 $("[name='name']").next().html("");  
  29.             }   
  30.         });  
  31.         $("[name='phone']").blur(function() {  
  32.             var v=$(this).val();  
  33.             if (v=='') {  
  34.                 $("[name='phone']").next().html("手机号不能为空！");  
  35.                 $(this).prev().css("color","#f00");  
  36.             }else if(!v.match(d)){  
  37.                 $("[name='phone']").next().html("手机号不正确！");  
  38.                 $("[name='phone']").prev().css("color","#f00");  
  39.             }else{  
  40.                 $(this).prev().css("color","#0EA74A");  
  41.                 $("[name='phone']").next().html("");  
  42.             }   
  43.         });  
  44.         $("[name='email']").blur(function() {  
  45.             var v=$(this).val();  
  46.             if (v=='') {  
  47.                 $(this).prev().css("color","#999");  
  48.             }else if(!v.match(y)){  
  49.                 $("[name='email']").next().html("请填写正确的邮箱！");  
  50.                 $("[name='email']").prev().css("color","#f00");  
  51.             }else{  
  52.                 $(this).prev().css("color","#0EA74A");  
  53.                 $("[name='email']").next().html("");  
  54.             }   
  55.         });  
  56.   
  57.         $('.button').click(function(){  
  58.         var qiye=$("[name='qiye']").val();  
  59.         var name=$("[name='name']").val();  
  60.         var phone=$("[name='phone']").val();  
  61.         var email=$("[name='email']").val();  
  62.         if (name=="") {  
  63.             $("[name='name']").next().html("姓名不能为空！");  
  64.             return;  
  65.         }else if(!name.match(h)){  
  66.             $("[name='name']").next().html("姓名不合法！");  
  67.             $("[name='name']").prev().css("color","#f00");  
  68.             return;  
  69.         }  
  70.         if (phone=='') {  
  71.             $("[name='phone']").next().html("手机号码不能为空！");  
  72.             return;  
  73.         }else if(!phone.match(d)){  
  74.             $("[name='phone']").next().html("请填写正确的手机号！");  
  75.             $("[name='phone']").prev().css("color","#f00");  
  76.             return;  
  77.         }  
  78.         if (qiye=="") {  
  79.             $("[name='qiye']").next().html("地址不能为空！");  
  80.             return;  
  81.         }  
  82.         if (email!='' && !email.match(y)) {  
  83.             $("[name='email']").next().html("请填写正确的邮箱！");  
  84.             $("[name='email']").prev().css("color","#f00");  
  85.             return;  
  86.         }  
  87.         // 提交成功后  
  88.         $('input').val("");  
  89.         $(".button").css('background','#0EA74A');  
  90.         $(".button").css('color','#fff');  
  91.         $(".button").css('border','none');  
  92.         $(".button").attr("disabled", true);  
  93.         $(".button").val("预约成功！请等待我们的回电");  
  94.         $('input').prev().css("color","#999");  
  95.         });  
  96.     </script>  

 


原文地址:http://www.freejs.net/article_biaodan_633.html