validator表单验证插件

2016-01-31 13:58:04

虽然之前也用过这个插件，但是没有具体记录过程。下面我把代码以及详细使用的方法贴出来

fm.validator.js

Validator = {

elementErrorClass: 'error',

language: 'fo',

languages: {

'fo': {

textbox: {

required: 'Hetta økið er kravt',

min: 'Hetta økið skal í minsta lagi vera {characters} stavir',

max: 'Hetta økið skal í mesta lagi vera {characters} stavir',

email: 'Teldupost adressan er ikki gildig',

url: 'Vev adressan er ikki gildig',

number: 'Bert tøl eru loyvd',

digits: 'Bert tøl eru loyvd'

password: {

required: 'Hetta økið er kravt',

min: 'Hetta økið skal í minsta lagi vera {characters} stavir',

max: 'Hetta økið skal í mesta lagi vera {characters} stavir',

match: 'Loyniorðini eru ikki líka'

radio: {

checkbox: {

required: 'Hesin avkrossingarteigur er kravdur'

select: {

required: 'Vel eitt virði í hesum vallista'

textarea: {

required: 'Hetta økið er kravt',

min: 'Hetta økið skal í minsta lagi vera {characters} stavir',

max: 'Hetta økið skal í mesta lagi vera {characters} stavir',

url: 'Vev adressan er ikki gildig'

}

'da': {

textbox: {

required: 'Dette felt skal udfyldes',

min: 'Dette felt skal være mindst {characters} tegn',

max: 'Dette felt skal være højst {characters} tegn',

email: 'Denne email er ugyldig',

url: 'Denne webside er ugyldigt',

number: 'Kun tal',

digits: 'Kun tal'

password: {

required: 'Dette felt skal udfyldes',

min: 'Dette felt skal være mindst {characters} tegn',

max: 'Dette felt skal være højst {characters} tegn',

match: 'Kodeordene er ikke ens'

radio: {

checkbox: {

required: 'Denne checkbox skal checkes'

select: {

required: 'Vælg et felt i listen'

textarea: {

required: 'Dette felt skal udfyldes',

min: 'Dette felt skal være mindst {characters} tegn',

max: 'Dette felt skal være højst {characters} tegn',

url: 'Denne webside er ugyldigt'

}

'en': {

textbox: {

required: 'This field is required',

min: 'This field must contain at least {characters} characters',

max: 'This field must not contain more than {characters} characters',

email: 'Email is not valid',

url: 'Website is not valid',

number: 'Only numbers',

digits: 'Only numbers'

password: {

required: 'This field is required',

min: 'This field must contain at least {characters} characters',

max: 'This field must not contain more than {characters} characters',

match: 'The passwords do not match'

radio: {

checkbox: {

required: 'This checkbox is required'

select: {

required: 'Choose a field from the list'

textarea: {

required: 'This field is required',

min: 'This field must contain at least {characters} characters',

max: 'This field must not contain more than {characters} characters',

url: 'Website is not valid'

}

showError: function (element, text) {

if (!$(element).hasClass(Validator.elementErrorClass)) {

var error = document.createElement('div');

$(error).addClass('validator-error').html(text);

if ($(element).attr('data-error-position') == undefined) {

var errorPosition = 'before';

if ($(this).is('input') && $(this).attr('type') == 'checkbox') {

errorPosition = 'before label';

}

} else {

errorPosition = $(element).attr('data-error-position');

}

var attrValue = errorPosition.split(' ');

var targetElementForError;

if (attrValue[1] == undefined) {

targetElementForError = element;

} else {

targetElementForError = $(element).closest(attrValue[1])[0];

}

if (attrValue[0] == 'before') {

$(targetElementForError).before(error);

} else if (attrValue[0] == 'after') {

$(targetElementForError).after(error);

}

$(targetElementForError).addClass(Validator.elementErrorClass);

if ($(element).attr('data-match') != undefined) {

$('#' + $(element).attr('data-match')).addClass(Validator.elementErrorClass);

}

validate: function (form) {

var hasErrors = false;

var firstErrorElement = null;

Validator.removeErrors(form);

$(form).find('input, select, textarea').each(function () {

var regex = null;

// Input[type=text]

if ($(this).is('input') && ($(this).attr('type') == 'text' || $(this).attr('type') == undefined)) {

// required

if ($(this).attr('data-required') != undefined && $(this).val() == '' && $(this).attr('data-required-if') == undefined) {

Validator.showError(this, Validator.languages[Validator.language].textbox.required);

hasErrors = true;

}

// required-if & required-if-value

if ($(this).attr('data-required-if') != undefined && $(this).val() == '' && (($(this).attr('data-required-if-value') == undefined && $('#' + $(this).attr('data-required-if')).is(':checked')) || ($(this).attr('data-required-if-value') != undefined && $('#' + $(this).attr('data-required-if')).val() == $(this).attr('data-required-if-value')))) {

Validator.showError(this, Validator.languages[Validator.language].textbox.required);

hasErrors = true;

}

// min

if ($(this).attr('data-min') != undefined && $(this).val().length < parseFloat($(this).attr('data-min')) && $(this).val().length != 0) {

Validator.showError(this, Validator.languages[Validator.language].textbox.min.replace('{characters}', $(this).attr('data-min')));

hasErrors = true;

}

// max

if ($(this).attr('data-max') != undefined && $(this).val().length > parseFloat($(this).attr('data-max'))) {

Validator.showError(this, Validator.languages[Validator.language].textbox.max.replace('{characters}', $(this).attr('data-min')));

hasErrors = true;

}

// patterns

if ($(this).attr('data-type') != undefined) {

switch ($(this).attr('data-type')) {

case 'email':

regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

if (!regex.test($(this).val()) && $(this).val() != '') {

Validator.showError(this, Validator.languages[Validator.language].textbox.email);

hasErrors = true;

}

break;

case 'url':

regex = /^(https?:\/\/)?((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|((\d{1,3}\.){3}\d{1,3}))(\:\d+)?(\/[-a-z\d%_.~+]*)*(\?[;&a-z\d%_{},.~+=-]*)?(\#[-a-z\d_]*)?$/i;

if (!regex.test($(this).val().replace('_', '')) && $(this).val() != '') {

Validator.showError(this, Validator.languages[Validator.language].textbox.url);

hasErrors = true;

}

break;

case 'number':

regex = /^\s*(\+|-)?((\d+([\.,]\d+)?)|([\.,]\d+))\s*$/;

if (!regex.test($(this).val()) && $(this).val() != '') {

Validator.showError(this, Validator.languages[Validator.language].textbox.number);

hasErrors = true;

}

break;

case 'digits':

regex = /^\s*\d+\s*$/;

if (!regex.test($(this).val()) && $(this).val() != '') {

Validator.showError(this, Validator.languages[Validator.language].textbox.digits);

hasErrors = true;

}

break;

}

// Input[type=password]

if ($(this).is('input') && $(this).attr('type') == 'password') {

// required

if ($(this).attr('data-required') != undefined && $(this).val() == '' && $(this).attr('data-required-if') == undefined) {

Validator.showError(this, Validator.languages[Validator.language].password.required);

hasErrors = true;

}

// required-if & required-if-value

Validator.showError(this, Validator.languages[Validator.language].password.required);

hasErrors = true;

}

// min

if ($(this).attr('data-min') != undefined && $(this).val().length < parseFloat($(this).attr('data-min')) && $(this).val().length != 0) {

Validator.showError(this, Validator.languages[Validator.language].password.min.replace('{characters}', $(this).attr('data-min')));

hasErrors = true;

}

// max

if ($(this).attr('data-max') != undefined && $(this).val().length > parseFloat($(this).attr('data-max'))) {

Validator.showError(this, Validator.languages[Validator.language].password.max.replace('{characters}', $(this).attr('data-min')));

hasErrors = true;

}

// match

if ($(this).attr('data-match') != undefined && $(this).val() != $('#' + $(this).attr('data-match')).val()) {

Validator.showError(this, Validator.languages[Validator.language].password.match);

hasErrors = true;

}

// Input[type=radio]

if ($(this).is('input') && $(this).attr('type') == 'radio') {

}

// Input[type=checkbox]

if ($(this).is('input') && $(this).attr('type') == 'checkbox') {

// required

if ($(this).attr('data-required') != undefined && !$(this).is(':checked') && $(this).attr('data-required-if') == undefined) {

Validator.showError(this, Validator.languages[Validator.language].checkbox.required);

hasErrors = true;

}

// required-if & required-if-value

Validator.showError(this, Validator.languages[Validator.language].checkbox.required);

hasErrors = true;

}

// Select

if ($(this).is('select')) {

// required

if ($(this).attr('data-required') != undefined && $(this).val() == '' && $(this).attr('data-required-if') == undefined) {

Validator.showError(this, Validator.languages[Validator.language].select.required);

hasErrors = true;

}

// required-if & required-if-value

Validator.showError(this, Validator.languages[Validator.language].select.required);

hasErrors = true;

}

// Textarea

if ($(this).is('textarea')) {

// required

if ($(this).attr('data-required') != undefined && $(this).val() == '' && $(this).attr('data-required-if') == undefined) {

Validator.showError(this, Validator.languages[Validator.language].textarea.required);

hasErrors = true;

}

// required-if & required-if-value

Validator.showError(this, Validator.languages[Validator.language].textarea.required);

hasErrors = true;

}

// min

if ($(this).attr('data-min') != undefined && $(this).val().length < parseFloat($(this).attr('data-min')) && $(this).val().length != 0) {

Validator.showError(this, Validator.languages[Validator.language].textarea.min.replace('{characters}', $(this).attr('data-min')));

hasErrors = true;

}

// max

if ($(this).attr('data-max') != undefined && $(this).val().length > parseFloat($(this).attr('data-max'))) {

Validator.showError(this, Validator.languages[Validator.language].textarea.max.replace('{characters}', $(this).attr('data-min')));

hasErrors = true;

}

// patterns

if ($(this).attr('data-type') != undefined) {

switch ($(this).attr('data-type')) {

case 'url':

regex = /^(https?:\/\/)?((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|((\d{1,3}\.){3}\d{1,3}))(\:\d+)?(\/[-a-z\d%_.~+]*)*(\?[;&a-z\d%_{},.~+=-]*)?(\#[-a-z\d_]*)?$/i;

if (!regex.test($(this).val()) && $(this).val() != '') {

Validator.showError(this, Validator.languages[Validator.language].textarea.url);

hasErrors = true;

}

break;

}

// Focus first element with error

if (hasErrors && firstErrorElement == null) {

firstErrorElement = this;

$(this).focus();

}

});

return !hasErrors;

removeErrors: function (form) {

// Remove all error text divs

$(form).find('.validator-error').each(function () {

$(this).remove();

});

$(form).find('.error').each(function () {

$(this).removeClass('error');

});

// Reset error classes

$(form).find('input[type=text], input[type=password], input[type=radio], input[type=checkbox], select, textarea').each(function () {

if ($(this).attr('type') == 'radio' || $(this).attr('type') == 'checkbox') {

$(this).closest('label').removeClass(Validator.elementErrorClass);

} else {

$(this).removeClass(Validator.elementErrorClass);

}

});

}

};

$(function () {

$('form.validator').each(function () {

$(this).submit(function () {

return Validator.validate(this);

});

});

使用的时候，在form添加class="validator" 然后在表单内的输入框或者checkbox添加
data-type="url" data-required

验证的类型有

属性	有效值	描述
data-required	no value	If this is set, then the input will require some content
data-required-if	element id	If set to an id of an element, then it will only be required if said element is checked or has the value of `data-required-if-value`
data-required-if-value	element value	If `data-required-if` is set to an element id, then it will only be required if said element has said value
data-min=0-9	`0-9`	The minimum length of the input
data-max=0-9	`0-9`	The maximum length of the input
data-type	`email`,`url`,`number`,`digits`	email are url are self explanatory, number are the characters `0-9+` `-` `.` `,`, digits are the characters `0-9` only
data-error-position	`before`,`after`,`before-{tagname}`,`after-{tagname}`	By default the error messages will appear before the input element in the DOM, but you can also set it to appear `after`. If neede then you can also set it t be `before` or `after` the closest parent matching the tagname specified after the dash `-`

密码输入:

Attribute	Valid values	Description
data-required	no value	If this is set, then the input will require some content
data-required-if	element id	If set to an id of an element, then it will only validate if said element is checked or has the value of `data-required-if-value`
data-required-if-value	element value	If `data-required-if` is set to an element id, then it will only validate if said element has said value
data-min=0-9	`0-9`	The minimum length of the input
data-max=0-9	`0-9`	The maximum length of the input
data-match	element id	If set to an id of another input element, it will match the contents against that element
data-error-position	`before`,`after`,`before-{tagname}`,`after-{tagname}`	By default the error messages will appear before the input element in the DOM, but you can also set it to appear `after`. If neede then you can also set it t be `before` or `after` the closest parent matching the tagname specified after th

栏目分类

最新文章

访问最多

扫码访问微信小程序

validator表单验证插件

关于