jQueryベースの基礎フォーム検証
4506 ワード
フレームワーク: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')
使用
Document
$(document).ready(function () {
$('form').validate({
myevent: 'keyup'
})
})