📄 livevalidation_standalone.js
字号:
}
},
/**
* makes it do the all the validations and fires off the onValid or onInvalid callbacks
*
* @return {Boolean} - whether the all the validations passed or if one failed
*/
validate: function(){
if(!this.element.disabled){
var isValid = this.doValidations();
if(isValid){
this.onValid();
return true;
}else {
this.onInvalid();
return false;
}
}else{
return true;
}
},
/**
* enables the field
*
* @return {LiveValidation} - the LiveValidation object for chaining
*/
enable: function(){
this.element.disabled = false;
return this;
},
/**
* disables the field and removes any message and styles associated with the field
*
* @return {LiveValidation} - the LiveValidation object for chaining
*/
disable: function(){
this.element.disabled = true;
this.removeMessageAndFieldClass();
return this;
},
/** Message insertion methods ****************************
*
* These are only used in the onValid and onInvalid callback functions and so if you overide the default callbacks,
* you must either impliment your own functions to do whatever you want, or call some of these from them if you
* want to keep some of the functionality
*/
/**
* makes a span containg the passed or failed message
*
* @return {HTMLSpanObject} - a span element with the message in it
*/
createMessageSpan: function(){
var span = document.createElement('span');
var textNode = document.createTextNode(this.message);
span.appendChild(textNode);
return span;
},
/**
* inserts the element containing the message in place of the element that already exists (if it does)
*
* @var elementToIsert {HTMLElementObject} - an element node to insert
*/
insertMessage: function(elementToInsert){
this.removeMessage();
if( (this.displayMessageWhenEmpty && (this.elementType == LiveValidation.CHECKBOX || this.element.value == ''))
|| this.element.value != '' ){
var className = this.validationFailed ? this.invalidClass : this.validClass;
elementToInsert.className += ' ' + this.messageClass + ' ' + className;
if(this.insertAfterWhatNode.nextSibling){
this.insertAfterWhatNode.parentNode.insertBefore(elementToInsert, this.insertAfterWhatNode.nextSibling);
}else{
this.insertAfterWhatNode.parentNode.appendChild(elementToInsert);
}
}
},
/**
* changes the class of the field based on whether it is valid or not
*/
addFieldClass: function(){
this.removeFieldClass();
if(!this.validationFailed){
if(this.displayMessageWhenEmpty || this.element.value != ''){
if(this.element.className.indexOf(this.validFieldClass) == -1) this.element.className += ' ' + this.validFieldClass;
}
}else{
if(this.element.className.indexOf(this.invalidFieldClass) == -1) this.element.className += ' ' + this.invalidFieldClass;
}
},
/**
* removes the message element if it exists, so that the new message will replace it
*/
removeMessage: function(){
var nextEl;
var el = this.insertAfterWhatNode;
while(el.nextSibling){
if(el.nextSibling.nodeType === 1){
nextEl = el.nextSibling;
break;
}
el = el.nextSibling;
}
if(nextEl && nextEl.className.indexOf(this.messageClass) != -1) this.insertAfterWhatNode.parentNode.removeChild(nextEl);
},
/**
* removes the class that has been applied to the field to indicte if valid or not
*/
removeFieldClass: function(){
if(this.element.className.indexOf(this.invalidFieldClass) != -1) this.element.className = this.element.className.split(this.invalidFieldClass).join('');
if(this.element.className.indexOf(this.validFieldClass) != -1) this.element.className = this.element.className.split(this.validFieldClass).join(' ');
},
/**
* removes the message and the field class
*/
removeMessageAndFieldClass: function(){
this.removeMessage();
this.removeFieldClass();
}
} // end of LiveValidation class
/*************************************** LiveValidationForm class ****************************************/
/**
* This class is used internally by LiveValidation class to associate a LiveValidation field with a form it is icontained in one
*
* It will therefore not really ever be needed to be used directly by the developer, unless they want to associate a LiveValidation
* field with a form that it is not a child of
*/
/**
* handles validation of LiveValidation fields belonging to this form on its submittal
*
* @var element {HTMLFormElement} - a dom element reference to the form to turn into a LiveValidationForm
*/
var LiveValidationForm = function(element){
this.initialize(element);
}
/**
* namespace to hold instances
*/
LiveValidationForm.instances = {};
/**
* gets the instance of the LiveValidationForm if it has already been made or creates it if it doesnt exist
*
* @var element {HTMLFormElement} - a dom element reference to a form
*/
LiveValidationForm.getInstance = function(element){
var rand = Math.random() * Math.random();
if(!element.id) element.id = 'formId_' + rand.toString().replace(/\./, '') + new Date().valueOf();
if(!LiveValidationForm.instances[element.id]) LiveValidationForm.instances[element.id] = new LiveValidationForm(element);
return LiveValidationForm.instances[element.id];
}
LiveValidationForm.prototype = {
/**
* constructor for LiveValidationForm - handles validation of LiveValidation fields belonging to this form on its submittal
*
* @var element {HTMLFormElement} - a dom element reference to the form to turn into a LiveValidationForm
*/
initialize: function(element){
this.name = element.id;
this.element = element;
this.fields = [];
// preserve the old onsubmit event
this.oldOnSubmit = this.element.onsubmit || function(){};
var self = this;
this.element.onsubmit = function(e){
return (LiveValidation.massValidate(self.fields)) ? self.oldOnSubmit.call(this, e || window.event) !== false : false;
}
},
/**
* adds a LiveValidation field to the forms fields array
*
* @var element {LiveValidation} - a LiveValidation object
*/
addField: function(newField){
this.fields.push(newField);
},
/**
* removes a LiveValidation field from the forms fields array
*
* @var victim {LiveValidation} - a LiveValidation object
*/
removeField: function(victim){
var victimless = [];
for( var i = 0, len = this.fields.length; i < len; i++){
if(this.fields[i] !== victim) victimless.push(this.fields[i]);
}
this.fields = victimless;
},
/**
* destroy this instance and its events
*
* @var force {Boolean} - whether to force the detruction even if there are fields still associated
*/
destroy: function(force){
// only destroy if has no fields and not being forced
if (this.fields.length != 0 && !force) return false;
// remove events - set back to previous events
this.element.onsubmit = this.oldOnSubmit;
// remove from the instances namespace
LiveValidationForm.instances[this.name] = null;
return true;
}
}// end of LiveValidationForm prototype
/*************************************** Validate class ****************************************/
/**
* This class contains all the methods needed for doing the actual validation itself
*
* All methods are static so that they can be used outside the context of a form field
* as they could be useful for validating stuff anywhere you want really
*
* All of them will return true if the validation is successful, but will raise a ValidationError if
* they fail, so that this can be caught and the message explaining the error can be accessed ( as just
* returning false would leave you a bit in the dark as to why it failed )
*
* Can use validation methods alone and wrap in a try..catch statement yourself if you want to access the failure
* message and handle the error, or use the Validate::now method if you just want true or false
*/
var Validate = {
/**
* validates that the field has been filled in
*
* @var value {mixed} - value to be checked
* @var paramsObj {Object} - parameters for this particular validation, see below for details
*
* paramsObj properties:
* failureMessage {String} - the message to show when the field fails validation
* (DEFAULT: "Can't be empty!")
*/
Presence: function(value, paramsObj){
var paramsObj = paramsObj || {};
var message = paramsObj.failureMessage || "不能为空!";
if(value === '' || value === null || value === undefined){
Validate.fail(message);
}
return true;
},
/**
* validates that the value is numeric, does not fall within a given range of numbers
*
* @var value {mixed} - value to be checked
* @var paramsObj {Object} - parameters for this particular validation, see below for details
*
* paramsObj properties:
* notANumberMessage {String} - the message to show when the validation fails when value is not a number
* (DEFAULT: "Must be a number!")
* notAnIntegerMessage {String} - the message to show when the validation fails when value is not an integer
* (DEFAULT: "Must be a number!")
* wrongNumberMessage {String} - the message to show when the validation fails when is param is used
* (DEFAULT: "Must be {is}!")
* tooLowMessage {String} - the message to show when the validation fails when minimum param is used
* (DEFAULT: "Must not be less than {minimum}!")
* tooHighMessage {String} - the message to show when the validation fails when maximum param is used
* (DEFAULT: "Must not be more than {maximum}!")
* is {Int} - the length must be this long
* minimum {Int} - the minimum length allowed
* maximum {Int} - the maximum length allowed
* onlyInteger {Boolean} - if true will only allow integers to be valid
* (DEFAULT: false)
*
* NB. can be checked if it is within a range by specifying both a minimum and a maximum
* NB. will evaluate numbers represented in scientific form (ie 2e10) correctly as numbers
*/
Numericality: function(value, paramsObj){
var suppliedValue = value;
var value = Number(value);
var paramsObj = paramsObj || {};
var minimum = ((paramsObj.minimum) || (paramsObj.minimum == 0)) ? paramsObj.minimum : null;;
var maximum = ((paramsObj.maximum) || (paramsObj.maximum == 0)) ? paramsObj.maximum : null;
var is = ((paramsObj.is) || (paramsObj.is == 0)) ? paramsObj.is : null;
var notANumberMessage = paramsObj.notANumberMessage || "必须是数字!";
var notAnIntegerMessage = paramsObj.notAnIntegerMessage || "必须是整数!";
var wrongNumberMessage = paramsObj.wrongNumberMessage || "必须是 " + is + "!";
var tooLowMessage = paramsObj.tooLowMessage || "不能小于 " + minimum + "!";
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -