jQuery EasyUI Form Plugin -Validatebox

jQuery EasyUI 插件jQuery EasyUI Plugins

Override default settings via $.fn.validatebox.defaults.

The validatebox is designed to validate form input fields. If the user enters an invalid value, it will change the background color, display a warning icon and a prompt message. The validatebox can be integrated with the form plugin to prevent invalid fields from being submitted.

Dependencies

  • tooltip

Usage

Create a validatebox from markup.

<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'">

Create a validatebox using JavaScript.

<input id="vv">

$('#vv').validatebox({
    required: true,
    validType: 'email'
});

Check whether the password and re-entered password are the same.

// extend the 'equals' rule
$.extend($.fn.validatebox.defaults.rules, {
    equals: {
        validator: function(value,param){
            return value == $(param[0]).val();
        },
        message: 'Field do not match.'
    }
});

<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true">
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"
    required="required" validType="equals['#pwd']">

Validation Rules

Validation rules are defined by using the `required` and `validType` attributes. Here are the rules that have been implemented:

  • email: matches the email regular expression rule.
  • url: matches the URL regular expression rule.
  • length[0,100]: allows from x to y characters.
  • remote['http://.../action.do','paramName']: sends an ajax request to validate the value, returning 'true' on success.

To customize a validation rule, override $.fn.validatebox.defaults.rules to define a validation function and an invalid message. For example, define a minLength validation type:

$.extend($.fn.validatebox.defaults.rules, {
    minLength: {
        validator: function(value, param){
            return value.length >= param[0];
        },
        message: 'Please enter at least {0} characters.'
    }
});

Now you can use this minLength validation type to define an input box that requires at least 5 characters:

<input class="easyui-validatebox" data-options="validType:'minLength[5]'">

Properties

Name Type Description Default
required boolean Defines whether the field should be entered. false
validType string,array Defines the validation type of the field, such as email, url, etc. Possible values:
1. A validation type string, applying a single validation rule.
2. An array of validation types, applying multiple validation rules. Multiple validation rules on a single field are available since version 1.3.2.

Code example:
<input class="easyui-validatebox" data-options="required:true,validType:'url'">
<input class="easyui-validatebox" data-options="
    required:true,
    validType:['email','length[0,20]']
">
null
delay number Delay validating the last input value. This property is available since version 1.3.2. 200
missingMessage string The prompt text displayed when the textbox is empty. The field is required.
invalidMessage string The prompt text displayed when the textbox content is invalid. null
tipPosition string Defines the position of the prompt message when the textbox content is invalid. Possible values: 'left', 'right'. This property is available since version 1.3.2. right
deltaX number The prompt offset in the X direction. This property is available since version 1.3.3. 0
novalidate boolean When set to true, disables validation. This property is available since version 1.3.4. false

Methods

Name Parameters Description
destroy none Remove and destroy the component.
validate none Perform validation to determine whether the textbox content is valid.
isValid none Call the validate method and return the validation result, true or false.
enableValidation none Enable validation. This method is available since version 1.3.4.
disableValidation none Disable validation. This method is available since version 1.3.4.
jQuery EasyUI 插件jQuery EasyUI Plugins Other Extensions