EasyCheck is a jQuery based front-end JavaScript forms authentication framework, without programming through HTML enhanced form validation work, simplifying the front-end development work, and maintain a unified style, improve efficiency. Custom interface, and provides a flexible support plug-in extension based on validation engine.
Main feature:
-
Lightweight, No JavaScript programming
-
Support class-based, based on a combination of property and validators, Built to meet the daily development of a dozen popular validator
-
Verify that the text box to automatically switch styles
-
By default, errors and correct three kinds of message content, custom message location
-
Anti-client resubmit function
-
Asynchronous validation support, support for
ES6 Promiseprogramming (validation code automatically fallback to sync verification when the environment is not supported forPromise) -
Server-side validation message, according to manually add and remove validation messages (such as the page to submit to the server check forwarding back to news, the news of the Ajax...)
-
scalability, support for registered users to develop new validator
-
Engine framework extension plugins, now support plug-ins: DIV, ToolTip, Bootstrap3
Compatibility:
- jQuery:
1.9+,2.X,3.X
That the bootstrap validation plugin is compatible with Bootstrap minimum compatibility requirements
Support plug-ins:
- DIV
- ToolTip
- Bootstrap3
Description: EasyCheck is the same plugin as the ECheck plugin. In the early ECheck corresponds to the English version, EasyCheck corresponds to the Chinese version, in the
4.0.0version, through the language file control, no longer distinguish by region to download.
- DIV plugin
use code:
<!-- EasyCheck start -->
<!-- Div plugin CSS -->
<link rel="stylesheet" type="text/css" href="easycheck/plugins/div/easycheck-div.css"/>
<!-- <link rel="stylesheet" type="text/css" href="easycheck/plugins/div/easycheck-div2.css"/> -->
<!-- jQuery: must first -->
<script type="text/javascript" src="easycheck/jquery-1.12.4.min.js"></script>
<!-- EasyCheck & DIV Plugin JS -->
<script type="text/javascript" src="easycheck/plugins/div/easy.easycheck-div-all.min.js"></script>
<!-- EasyCheck language file: i18n message -->
<script type="text/javascript" src="easycheck/lang/easy.easycheck-lang-zh_CN.js"></script>
<!-- Other optional -->
<script type="text/javascript">
EasyCheck.msgs['uname']={
'.required':"Required ah!"
,
'[reg]':'Only allow alphanumeric, cannot begin with Numbers'
};
</script>
<!-- EasyCheck end -->- ToolTip plugin
use code:
<!-- EasyCheck start -->
<!-- Tooltip plugin CSS -->
<link rel="stylesheet" type="text/css" href="easycheck/plugins/tooltip/easycheck-tooltip.css"/>
<!-- jQuery: must first -->
<script type="text/javascript" src="easycheck/jquery-1.12.4.min.js"></script>
<!-- EasyCheck & Tooltip Plugin JS -->
<script type="text/javascript" src="easycheck/plugins/tooltip/easy.easycheck-tooltip-all.min.js"></script>
<!-- EasyCheck language file: i18n message -->
<script type="text/javascript" src="easycheck/lang/easy.easycheck-lang-zh_CN.js"></script>
<!-- Other optional -->
<script type="text/javascript">
EasyCheck.msgs['uname']={
'.required':"Required ah!"
,
'[reg]':'Only allow alphanumeric, cannot begin with Numbers'
};
</script>
<!-- EasyCheck end -->- Bootstrap3 plugin
use code:
<!-- EasyCheck start -->
<!-- jQuery: must first -->
<script type="text/javascript" src="easycheck/jquery-1.12.4.min.js"></script>
<!-- EasyCheck & DIV Plugin JS -->
<script type="text/javascript" src="easycheck/plugins/bootstrap3/easy.easycheck-bootstrap3-all.min.js"></script>
<!-- EasyCheck language file: i18n message -->
<script type="text/javascript" src="easycheck/lang/easy.easycheck-lang-zh_CN.js"></script>
<!-- Other optional -->
<script type="text/javascript">
EasyCheck.msgs['uname']={
'.required':"Required ah!"
,
'[reg]':'Only allow alphanumeric, cannot begin with Numbers'
};
</script>
<!-- EasyCheck end -->
<!-- Bootstrap3 start-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- Bootstrap3 end-->Follow the Bootstrap3 form design specification by putting the form elements in the form-group and adding form-control to the form elements.
EasyCheck built in 16 daily development commonly used validator. Is divided into three types:
- Class: 5
- Attribute：9
- Combination： 2
The name of the class validator within EasyCheck are . start: .validatorName。
<Validator internal name> <use>
required Required <input type="text" name="name" class="required"/>
email Email <input type="text" name="name" class="email"/>
url URL <input type="text" name="name" class="url"/>
number A number <input type="text" name="name" class="number"/>
integer integer <input type="text" name="name" class="integer"/>Simultaneous use of multiple classes validators , separated by spaces :
Can not be empty , and the mailbox <input type="text" name="name" class=" required email" />Attribute names EasyCheck internal verifier is to [] surround,like: [validatorName].
<Validator internal name> <use>
equalTo value must be equal to the specified element ElementId <input type="password" name="name" equalTo="ElementId"/>
equallength value must be equal to the length of equallength <input type="password" name="name" equallength ="4"/>
maxlength The maximum character length can not exceed maxlength maxlength <input type="text" name="name" maxlength="20"/>
minlength minimum character length can not be eliminated on minlength <input type="text" name="name" minlength="6"/>
max number can not be greater than max <input type="text" name="name" max="20"/>
min number can not be less than min <input type="text" name="name" min="2"/>
extension extension validation extension, multiple extensions use a comma -delimited , the default is "png, jpeg, jpg, gif" <input type="file" name="name" extension=""/>
reg custom regular verification <input type="text" name="name" reg="[A-Z]*"/>
vc Ajax request using vc vc specified URL, for verification code detection , URL returns true Congress passed , false representatives did not pass <input type="text" vc="chkvc.jsp" name="vc" />
Server-side custom processing Demo (JSP):
<%
//Get the input verification code via text box name
String vc = request.getParameter("vc"); //data
String res = "false";
if (vc != null && vc.equals(session.getAttribute("randomNumber"))) {
res = "true";
}
out.print(res); //output true Congress passed , false representatives did not pass
%>That by default in order to avoid unnecessary server requests, only when the form is submitted captcha validation, not in the key up and lose focus when validated parameters. The implementation code: EasyCheck.easyCheckIgnore["[vc]"]=true;
EasyCheck.easyCheckIgnoreparameter can be set up and the focus of the validation to ignore the validator, can according to need to modify to false, representatives of key up and validation of the open when loses focus.
<Validator internal name> <use>
[minlength] [maxlength] length combination Validator : Using minlength property validator and validator maxlength attribute
<input type="password" value="" name="urepwd" size="20" class="txt required" equalto="upwd" maxlength="12" minlength="6"/>
[min] [max] a combination of numerical range validator : validator attributes while adding min and max attributes validator
<input type="password" value="" name="urepwd" size="20" class="txt required" min="18" max="45"/>**Recommendations for each test element specifies the only element id, in order to avoid unnecessary conflict. **
EasyCheck is not mandatory for each form element specifies the id attribute. But if the page
namesame form element, you need to useiddistinction. EasyCheck the internalidattribute values for each functional implementation reference marker - such as the need to implement the expansion of the associated with the specified element, configuration, operation, useidpriority.
Must set id and easycheck="true" to form。
<form action="login.action" method="post" id="regForm" easycheck="true"> -
Auto initialize
On document ready, EasyCheck auto detect form(
easycheck="true"), initialize. -
Dynamic from initialize
When you have a dynamic new form, can use these code(
easycheck="true"can set use or not).EasyCheck.initEasyCheck(formId);
Sometimes validate form does not need to submit the form, can be obtained by manual validation JS specified form.
// Verify the selector specified form, but not submitted
var result=EasyCheck.checkForm("formSelector");
// If asynchronized validator
if(window.Promise && result instanceof Promise){
result.then(function(data){
if(data){
// pass
}else{
// not pass
}
})
}else{
if(result){
// pass
}else{
// not pass
}
}EasyCheck global validation message definition in lang directory corresponding i18n language file, message support placeholder. Such as:
EasyCheck.msg = {
required:"Is required",
email:"Invalid email",
url:"Invalid url",
number:"Invalid number",
integer:"Invalid integer",
equalto:"Didn't match input",
equallength:"length has to be {0}",
lengthrange:"Please use between {0} and {1} characters",
minlength:"Use at least {0} characters",
maxlength:"Must have at most {0} characters",
numberrange:"Value is between{0}and{1}",
min:"The minimum value of {0}",
max:"The maximum value of {0}",
regexp:"Invalid value",
extension:"Invalid extension,only {0}",
vc:"Didn't match the word verification"
}Prompt message content of modified to specify validation rules, grammar:
// EasyCheck.msg['validatorName']="content";
EasyCheck.msg['required']="is required";
EasyCheck.msg['lengthRange']="Minimum length {0}, maximum length {1}! ";EasyCheck support completely custom error message content, and can be used for each form element each validator different messages.
- **The error message custom: **
EasyCheck.msgs['ElementId'||'ElementName']={
'.classValidator':"Content",
'[attributeValidator]': "Content",
'[validator1][validator2]':'Content'
……
};- If the form element exists
idattribute, use will be the priorityElementId - The class validator start with
., attribute validator round with[].
Example:
EasyCheck.msgs['uname']={
// required class validator（**.**）
'.required': '必须有啊！',
// reg attribute validator（**[]**）
'[reg]':'只能包含字母和数字'
};- Message processing functions:
Example:
EasyCheck.msgs['upwd']={
'[minlength][maxlength]':
// Message function, o is current jqueryDOM
function(o){
return EasyCheck.formatMsg("password length: {0}-{1}!" , o.attr('minlength') , o.attr('maxlength'));
}
};or
// Message function, o is current jqueryDOM
var upwdMsg = function(o){
return EasyCheck.formatMsg("password length: {0}-{1}!", o.attr('minlength') , o.attr('maxlength'));
};
EasyCheck.msgs['upwd']={
'[minlength][maxlength]':upwdMsg
};Note: when using a custom message, generally do not use the info in error DIV attribute set prompt message, if you use the info attribute set prompt message will cover more than a custom message content.
EasyCheck in news tips and management provides great flexibility. Each form elements on the message content and appearance can be customized, you can manually for each message element specifies three class (the default, correct and error).
Messages can be defined in div, p, span container tag, shown in the location specified. Recommended span, can be in the same line, according to the error and correct prompt default set to hide (display: none).
- Message defined in the tag body
<!-- Default （id: `default_ElementId`）-->
<span id="default_ElementID"> The default message for elementId </span>
<!-- Correct （id: `correct_ElementId`,use `.easycheck_okInfo` style）-->
<span id="correct_ElementID" style="display:none"> The correct message for elementId </span>
<!-- Error（id: `error_ElementId`,use `.easycheck_errorInfo` style）-->
<span id="error_ElementID" style="display:none"> The error message for elementId</span>The content of the error message is optional, if you specify the prompt content, will cover other prompt message. Error messages TAB has an optional attribute perfix can add a prefix for the error information content:
<span id="error_表单元素ID" style="display:none" perfix="username "></span>- Message defined in the info attribute
Prompt message can also define the info attribute, can avoid the display problems.
<span id="default_ElementID" info="The default message for elementId"></span>
<span id="correct_ElementID" info="The correct message for elementId"></span>
<span id="error_ElementID" info="The error message for elementId"></span>If you use a info attribute defines the default prompt message (defMsg), also need the page is loaded after the completion of the call EasyCheck. InitDefMsg(); effect.
$(function(){
//Manually initialize the default message to take effect
EasyCheck.initDefMsg();
})- priority
info attribute > tag body
- Example
<input type="text" id="uname" name="uname" class="txt2 required" reg="^[A-Za-z][A-Za-z0-9]*$"/>
<span id="default_uname" info="Mandatory, letter, can only contain letters and Numbers "></span>
<span id="correct_uname" info="OK!"></span>
<span id="error_uname" prefix="username " style="display:none">can only use letters and Numbers</span> - Bootstrap3
Bootstrap3 prompt message must be add class="help-block"
<span id="default_usermail" class="help-block">required&email</span >
<span id="correct_usermail" class="help-block" info="correct"></span> Clear error message.
formId: optional. When specified, only remove specifies the error message in the form; All the error messages is not specified, the removal of the current page.
EasyCheck.clearAllError( [formId] );Restore messages (error, prompt, correct display the default prompt). The reset button in the default validation form automatically calls the function to implement a form reset.
Scene: the form in the pop-up layer, close the layer to open, clear layer form before all the validation message.
formId: optional. When specified, only restore specifies the error message in the form; All the error messages is not specified, the restore of the current page.
EasyCheck.restoreAll( [formId] );4.4.3 For the specified form elements manually error message (you can use the unified style tips custom messages).
Can use this method to display the specified message returned from the server.
elementId || elementName || elementDOM: specify the form element id, or form elements DOM object.
msg: an error message.
EasyCheck.showError('elementId'||'elementName'||elementDOM , 'msg' );elementId || elementName || elementDOM: specify the form element id, or form elements DOM object.
EasyCheck.clearError('elementId'||'elementName'||elementDOM );Tip to diversify its appearance (e.g., ToolTip), EasyCheck can be extended to unified message appearance, for example will prompt message unified packaging on a custom DIV fragment. In the custom segments of the message, use the {0} tag references prompt message content.
- Global Settings:
EasyCheck.defMsg='<div class="tip">default: {0}</div>';
EasyCheck.errorMsg='<div class="tip">error: {0}</div>';
EasyCheck.correctMsg='<div class="tip">correct: {0}</div>';- Local Settings (for id specified FormId or ElementId extension)
EasyCheck.defMsgs["regForm"]='<div class="tip">default: {0}</div>';
EasyCheck.errorMsg["username"]='<div class="tip"error: {0}</div>';
EasyCheck.correctMsgs["regForm"]='<div class="tip">correct: {0}</div>';
- Format the priority
elementId > formId > global
EasyCheck.defMsgs["elementId"] > EasyCheck.defMsgs["formId"] > EasyCheck.defMsg.
- The default prompt message initialized manually
Changed the default prompt message (defMsg) format, need to manually call initDefMsg (), let the modified default information to take effect.
$(function(){
EasyCheck.defMsg='<div class="tooltip-right-def tooltip-def">'+
'<div class="tooltip-content-def">{0}</div>'+
'<div class="tooltip-arrow-outer-def"></div>'+
'<div class="tooltip-arrow-def" ></div>'+
'</div>';
// initialize the default message manually to take effect
EasyCheck.initDefMsg();
})- **Custom message tag **
The default reference message is marked as {0}, if you need a custom can directly modify msgMark properties.
EasyCheck.msgMark="{msg}";
EasyCheck.defMsg='<div class="tip">默认内容：{msg}</div>';EasyCheck can dynamically change the text box according to the event and the results of the validation and div style, show different appearance in different states, make the form item more eye-catching, to provide more abundant validation effect.
Part of the validation plug-in (DIV, Tooltip) need to first introduce the corresponding CSS file. And supports the following four types of CSS style class for customization:
- pass tip:
.easycheck_okInfo - not pass tip:
.easycheck_errorInfo - focus input:
easycheck_focusInput - not pass input:
.easycheck_errorInput
According to the practical projects need to modify CSS class above style:
.easycheck_errorInfo {
margin-left: 10px;
color:#FF2A2B;
display: inline;
font-size: 13px;
}
.easycheck_okInfo {
margin-left: 10px;
display: inline;
font-size: 13px;
color:#007C00;
}
.easycheck_focusInput{
border: 1px solid #0066FF !important;
}
.easycheck_errorInput {
border: 1px solid #DD080A !important;
}The Bootstrap is the default state of check, don't need to configure the CSS style.
By default validation fails, in addition to display an error message text box will change with calibration status. EasyCheck support for text box in the three states reference different styles:
- The default style of a text box：user-defined
- The style of a text box on focus：
.easycheck_focusInput - The style of a text box not pass：
.easycheck_errorInput
// global
EasyCheck.focusCss="focus";
// only this form
EasyCheck.formFocusCss['formId']="focus2"; // global
EasyCheck.errorCss="error";
// only this form
EasyCheck.formErrorCss['formId']="error2"; ecss ="no" attribute for disable the not pass text style.
<input type="text" name="content" class="required" ecss="no"></textarea>You can also use EasyCheck.ecss to settings:
// global
EasyCheck.ecss="no";
// only this form
EasyCheck.formEcss['regForm']="no";EasyCheck support the client to prevent repeat submit function: when users click on the submit button will disable the submit button submits the form. Prevent the user authentication by submitting data in the process, because the network did not response, users click the submit, lead to repeat submit data function.
Shut down to prevent repeat submit function form:
// close the submit button to disable the function, the default is true
EasyCheck.easyCheckSubmitDisable=false; <!-- The optional configuration parameters -->
<script type="text/javascript">
// When using loses focus, false to disable, the default is true
EasyCheck.blurChk=true;
// When using the keyboard pop-up authentication, false to disable, the default is true
EasyCheck.keyupChk=true;
// Immediately after the page is loaded whether to open the validation rules (or only when submitting the form validation, if set to false, blurChk and keyupChk invalid), the default is true
EasyCheck.loadChk=true;
// Whether form elements gains focus when the reduction for the default prompt, the default is false (Bootstrap3 defaults to true)
EasyCheck.resetOnFocus=false;
// BootStrap3
EasyCheck.bootstrap3={
// Add feedback icons
icon:true,
// Display * after required element
required:true,
// * poisition: left(label left), right(label right), after(form element after, only for 'form-horizontal', 'form-inline')
requiredPosition:'after',
// Display Dismissible alerts
alert:true,
alertMsg:'Validation failed!'
};
</script>Using EasyCheck. AddChk function only easy step can add new custom validator!
Call EasyCheck.AddChk (chkName chkFun, chkMsg) function can be realized to the system registry new custom validation plug-in function.
**The validator name naming conventions: **
- Add class validator, must start with
.,.exists - Add attribute validator, must round with
[],[theme]
Validator definition syntax:
/*
* `checkName` string, Registered [Attribute] Attribute, or .Class validator names (can only use English letters and Numbers)
* `chkFun` function, To validate the callback function
* `chkMsg` string, To validate the tip message or function of failure
*/
EasyCheck.addChk(chkName,chkFun,chkMsg);Register EasyCheck Class and Property Validator Syntax:
EasyCheck.addChk("ValidatorName",
//o is the DOM object
function(o){
// Validator implementation
// var val=$(o).val();
// return $.trim(val)!="";
// true is pass; false is not pass
return true or false;
}
,
"msg show when not pass");
EasyCheck.addChk("ValidatorName",
//o is the DOM object
function(o){
// Validator implementation
// var val=$(o).val();
// return $.trim(val)!="";
// true is pass; false is not pass
return true or false;
}
,
// use message function
// o is the DOM object
function(o){
// var val=$(o).val();
return "msg show when not pass";
});Promise Asynchronous validator registration:
EasyCheck.addChk("ValidatorName",
// o is the DOM object
function(o){
// var val=$(o).val();
if(window.Promise) {
// If Promise is supported
var p = new Promise(function(resolve, reject) {
// Validator implementation
if(condition){
resolve(true); // pass
}else{
reject(false); // not pass
}
});
});
return p;
} else {
// Do not support support for Promise, please use synchronous validation implementation to fallback
// true is pass; false is not pass
return true或false;
}
}
,
"msg show when not pass");EasyCheck support combined with multiple registered validators combined to create a new validator.
The validator naming conventions for: Validator1Validator2 validator
Such as: By combining the existing min attribute verifier and max property verifier, the realization of digital range detection verifier. The validator registration name is [min] [max].
The validator works only if both the min and max property verifiers are used. The independent validator functions for [min] and [max] are ignored and the validation function for the [min] [max] combinatorial validator is executed directly.
Check user name whether exsist.
EasyCheck.addChk(".exists",
function(o){
var val=$(o).val();
var res=false;
dwr.engine.setAsync(false);
UserInfoDWR.checkEmail(val,function(d){
res=d;
});
return res;
}
,
"The name has been used!");In order to facilitate the unified management of the prompt message, you can prompt the message is defined in the EasyCheck.msg list.
EasyCheck.msg["msgName"]= "Content, {0}, {1}……";
如：
EasyCheck.msg["exists"]="The name has been used!";
EasyCheck.addChk(".exists",
function(o){
if($(o).val()=='jay'){
return false;
}
return true;
}
,
EasyCheck.msg["exists"] // get message
);If the message contents contain placeholders ({0}, {1}, ...), the message function is used
// Defines a validator prompt message
EasyCheck.msg["exists"]="'{0}' the name has been used!";
EasyCheck.addChk(".exists",
function(o){
if($(o).val()=='jay'){
return false;
}
return true;
}
,
// Format the message function
function(o){
return EasyCheck.formatMsg(EasyCheck.msg["exists"],$(o).val());
}
);EasyCheck supports three types of validation triggering events, and the default registered validator triggers validation in three types of events:
- Keyboard up onkeyup validation
- Lose focus onblur validation
- Submit form onsubmit validation
EasyCheck supports the triggering of validators and form elements (key-up onkeyup validation, loss of focus onblur) and some validators can disable certain validation triggers that affect performance or are necessary.
If the registered validator only need to verify ( eg verification code , without losing focus or keyboard bounce verification ) at the time of submitting the form , you can registered the following code:
EasyCheck.easyCheckIgnore: Specifies the validator to ignore validation, verification after setting while ignoring loses keyboard focus events and pop events.
EasyCheck.easyCheckIgnore[" validator name "]=true;-
EasyCheck.easyCheckBlurIgnore: Specifies the validator to ignore lost focus event validationEasyCheck.easyCheckBlurIgnore[" validator name "]=true;
-
EasyCheck.easyCheckKeyupIgnore: Specifies the validator to ignore the keyboard pops up event validation
EasyCheck.easyCheckKeyupIgnore[" validator name "]=true;Specify the form elements elementId or elementName: (** elementId priority ** )
EasyCheck.easyCheckEleIgnore: Specifies the form elements, disc bounce and lost focus event to ignore verification
EasyCheck.easyCheckEleIgnore["element id or name"]=true;EasyCheck.easyCheckEleBlurIgnore: Specifies the form element loses focus event to ignore verification
EasyCheck.easyCheckEleBlurIgnore["element id or name"]=true;EasyCheck.easyCheckEleKeyupIgnore: Specifies the form elements, ignoring the keyboard up event validation
EasyCheck.easyCheckEleKeyupIgnore["element id or name"]=true;If you have more comments, suggestions or ideas, please contact me.
Contact, Feedback, Custom, Train Email：inthinkcolor@gmail.com
We believe that the contribution of each bit by bit, will be driven to produce more and better free and open source products a big step.
Thank you donation to support the server running and encourage more community members.
