jQuery EasyUI Plugin de Formulario -Validatebox Caja de validación

jQuery EasyUI 插件Plugins de jQuery EasyUI

Reescriba los defaults por defecto mediante $.fn.validatebox.defaults.

La caja de validación (validatebox) está diseñada para validar los campos de entrada de un formulario. Si el usuario ingresa un valor no válido, cambiará el color de fondo, mostrará un ícono de advertencia y un mensaje de aviso. La caja de validación (validatebox) puede integrarse con el plugin de formulario (form) para evitar enviar campos no válidos.

Dependencias

  • tooltip

Uso

Crear una caja de validación (validatebox) a partir del marcado.

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

Crear una caja de validación (validatebox) usando JavaScript.

<input id="vv">

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

Verificar que la contraseña y la contraseña reingresada son iguales.

// 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']">

Reglas de validación

Las reglas de validación se definen mediante los atributos required y validType. Estas son las reglas ya implementadas:

  • email: coincide con la regla de expresión regular para email.
  • url: coincide con la regla de expresión regular para URL.
  • length[0,100]: permite de x a y caracteres.
  • remote['http://.../action.do','paramName']: envía una solicitud ajax para validar el valor; devuelve 'true' si tiene éxito.

Para personalizar las reglas de validación, sobrescriba $.fn.validatebox.defaults.rules para definir una función de validación y un mensaje de invalidez. Por ejemplo, defina un tipo de validación minLength:

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

Ahora puede usar este tipo de validación minLength para definir un campo de entrada con al menos 5 caracteres:

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

Propiedades

Nombre Tipo Descripción Valor por defecto
required boolean Define si el campo debe ser ingresado. false
validType string,array Define el tipo de validación del campo, por ejemplo email, url, etc. Valores posibles:
1. Cadena de tipo de validación, que aplica una sola regla de validación.
2. Matriz de tipos de validación, que aplica múltiples reglas de validación. Múltiples reglas de validación en un solo campo están disponibles desde la versión 1.3.2.

Ejemplo de código:
<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 Retrasa la validación del último valor ingresado. Esta propiedad está disponible desde la versión 1.3.2. 200
missingMessage string Texto de aviso que aparece cuando el cuadro de texto está vacío. El campo es obligatorio.
invalidMessage string Texto de aviso que aparece cuando el contenido del cuadro de texto no es válido. null
tipPosition string Define la posición del mensaje de aviso cuando el contenido del cuadro de texto no es válido. Valores posibles: 'left', 'right'. Esta propiedad está disponible desde la versión 1.3.2. right
deltaX number Desplazamiento del aviso en la dirección X. Esta propiedad está disponible desde la versión 1.3.3. 0
novalidate boolean Cuando se establece en true, la validación se deshabilita. Esta propiedad está disponible desde la versión 1.3.4. false

Métodos

Nombre Parámetros Descripción
destroy none Elimina y destruye el componente.
validate none Realiza la validación para determinar si el contenido del cuadro de texto es válido.
isValid none Llama al método validate y devuelve el resultado de la validación, true o false.
enableValidation none Habilita la validación. Este método está disponible desde la versión 1.3.4.
disableValidation none Deshabilita la validación. Este método está disponible desde la versión 1.3.4.
jQuery EasyUI 插件Plugins de jQuery EasyUI Otras extensiones