首页>>表单>>PHP验证器类Validator,输入数据提交验证(2018-10-16)

PHP验证器类Validator,输入数据提交验证

PHP验证器类Validator,输入数据提交验证
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="row main">  
  2.        <div class="col-md-12">  
  3.              
  4.            <div class="row" style="margin: 30px;">  
  5.                <div class="col-md-6 col-sm-12">  
  6.                    <form class="form-inline" rel="1">  
  7.                      <div class="form-group">  
  8.                        <label for="">输入数字</label>  
  9.                        <input type="text" class="form-control"  placeholder="必须输入数字">  
  10.                      </div>  
  11.                      <button type="submit" class="btn btn-default">验证</button>  
  12.                    </form>  
  13.                </div>  
  14.                <div class="col-md-6 col-sm-12">  
  15.                    <form class="form-inline" rel="2">  
  16.                      <div class="form-group">  
  17.                        <label for="">输入出生日期</label>  
  18.                        <input type="text" class="form-control" placeholder="1990-12-30">  
  19.                      </div>  
  20.                      <button type="submit" class="btn btn-default">验证</button>  
  21.                    </form>  
  22.                </div>  
  23.                <div class="col-md-6 col-sm-12">  
  24.                    <form class="form-inline" rel="3">  
  25.                      <div class="form-group">  
  26.                        <label for="">输入3-8位用户名</label>  
  27.                        <input type="text" class="form-control" placeholder="alam">  
  28.                      </div>  
  29.                      <button type="submit" class="btn btn-default">验证</button>  
  30.                    </form>  
  31.                </div>  
  32.                <div class="col-md-6 col-sm-12">  
  33.                    <form class="form-inline" rel="4">  
  34.                      <div class="form-group">  
  35.                        <label for="">输入Json数据</label>  
  36.                        <input type="text" class="form-control"  placeholder='{"foo":"bar"}'>  
  37.                      </div>  
  38.                      <button type="submit" class="btn btn-default">验证</button>  
  39.                    </form>  
  40.                </div>  
  41.                <div class="col-md-6 col-sm-12">  
  42.                    <form class="form-inline" rel="5">  
  43.                      <div class="form-group">  
  44.                        <label for="">输入Email</label>  
  45.                        <input type="text" class="form-control" placeholder="abc@example.com">  
  46.                      </div>  
  47.                      <button type="submit" class="btn btn-default">验证</button>  
  48.                    </form>  
  49.                </div>  
  50.                <div class="col-md-6 col-sm-12">  
  51.                    <form class="form-inline" rel="6">  
  52.                      <div class="form-group">  
  53.                        <label for="">输入网址</label>  
  54.                        <input type="text" class="form-control" placeholder="https://www.helloweba.net">  
  55.                      </div>  
  56.                      <button type="submit" class="btn btn-default">验证</button>  
  57.                    </form>  
  58.                </div>  
  59.                  
  60.            </div>  
  61.   
  62.        </div>  
  63.    </div>  

 

JavaScript Code
  1. <script>  
  2. $(document).on('submit', 'form', function(event) {  
  3.     event.preventDefault();  
  4.     var ipt_val = $(this).find('input').val();  
  5.     if (ipt_val == '') {  
  6.         alert('不能为空！');  
  7.         return false;  
  8.     }  
  9.     var rel = $(this).attr('rel');  
  10.     $.post('verify.php', {value: ipt_val, mod: rel}, function(res, textStatus, xhr) {  
  11.         if (res == 1) {  
  12.             alert('输入正确！');  
  13.         } else {  
  14.             alert('输入错误！');  
  15.         }  
  16.     });  
  17. });  
  18.   
  19.   
  20.   
  21. </script>  

 


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