基于jQuery实现基础版表单校验

框架：Bootstrap+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