jQueryベースの基礎フォーム検証

data-vl="true" //              
data-vl-required="true" //       
data-vl-required-error="      " //        
data-vl-email="true" //     
data-vl-email-error="        " //         

//             
// 1.     `vl-myevent`     
// 2.   myevent  
// 3.    change

// validate.js
(function(global, factory, plugin) {
  return factory.call(global, global.jQuery, plugin)
})(this, function($, plugin) {
  //     
  var _defaultOptions = {
    myevent: 'change'
  }
  //     
  var _rules = {
    "required": function () {
      return !!this.val()
    },
    "email": function () {
      return /^[\da-z]+([\-\.\_]?[\da-z]+)*@[\da-z]+([\-\.]?[\da-z]+)*(\.[a-z]{2,})+$/i.test(this.val())
    },
    "phone": function () {
      return /^1[3|5|7|8|9]\d{9}$/.test(this.val())
    },
    "max": function () {
      return this.val() <= this.data('vl-max')
    },
    "min": function () {
      return this.val() >= this.data('vl-min')
    },
  }
  $.fn[plugin] = function (options) {
    this.each(function () {
      var $this = $(this)
      $.extend($this, options)
      $this.myevent = $this.data('vl-myevent') || $this.myevent || _defaultOptions.myevent
      var $fields = $this.find('[data-vl=true]')
      $fields.on($this.myevent, function(){
        var $field = $(this)
        var $group = $field.parents('.form-group').removeClass('has-success has-error')
        $group.find('.help-block').remove()
        var result = true, error = null
        $.each(_rules, function (rule, valid) {
          if ($field.data('vl-' + rule)) {
            result = valid.call($field)
            error = $field.data('vl-' + rule + '-error')
            if (!result && error) {
              $field.after(''+error+'')
            }
            return result
          }
        })
        $group.addClass(result?'has-success':'has-error')
      })
    })
  }
}, 'validate')

  
  
  
  
  
  
  
  


  

    

      

        Email address
        
      
      

          Phone
          
        
      

        MaxNumber
        
      
      

        MinNumber
        
      
      Submit
    
  



$(document).ready(function () {
  $('form').validate({
    myevent: 'keyup'
  })
})