Copie el código de código de la siguiente manera:
//Ponlo en la función(){} de onReady
Ext.QuickTips.init(); // Proporciona una función de información de solicitud para los componentes. La información de solicitud principal del formulario es el mensaje de error de verificación del cliente.
Ext.form.Field.prototype.msgTarget='side'; //Método de solicitud, el valor de enumeración es:
qtip: muestra una sugerencia cuando el mouse se mueve sobre el control;
título: el título que se muestra en el navegador, pero el resultado de la prueba es el mismo que qtip;
muestra debajo un mensaje de error bajo el control;
lateral: muestra un ícono de error en el lado derecho del control y muestra un mensaje de error cuando el mouse apunta al ícono Valor predeterminado;
El mensaje de error id-[elemento id] se muestra en el elemento HTML de la identificación especificada
1. El ejemplo más simple: verificación nula
Copie el código de código de la siguiente manera:
//Dos parámetros para verificación nula
enableBlank:false//false no puede estar vacío, el valor predeterminado es verdadero
BlankText:string//Mensaje de error cuando está vacío
El código js es:
Copie el código de código de la siguiente manera:
var formulario1 = nuevo Ext.form.FormPanel({
ancho: 350,
renderTo:"formulario1",
título:"Panel de formulario",
valores predeterminados:{xtype:"campo de texto",inputType:"contraseña"},
elementos:[
{fieldLabel:"no puede estar vacío",
enableBlank:false, //el espacio en blanco no está permitido
BlankText:"no puede estar vacío", //mensaje de error, el valor predeterminado es ¡Este campo es obligatorio!
id: "más en blanco",
}
]
});
2. Utilice el formato vtype para una verificación sencilla.
En este ejemplo de verificación por correo electrónico, reescriba la configuración de elementos del código anterior:
Copie el código de código de la siguiente manera:
elementos:[
{fieldLabel:"no puede estar vacío",
vtype:"correo electrónico",//verificación del formato del correo electrónico
vtypeText: "No es una dirección de correo electrónico válida", //mensaje de error, no ingresaré el valor predeterminado.
id: "más en blanco",
ancla: "90%"
}
Puede modificar el vtype anterior a las siguientes verificaciones admitidas por los siguientes vtypes de extjs de forma predeterminada:
//El tipo de vtype admitido por defecto en la validación de formularios
1.alpha //Solo se pueden ingresar letras, no se pueden ingresar otros (como números, símbolos especiales, etc.)
2.alphanum//Solo se pueden ingresar letras y números, no se permite ninguna otra entrada
3.correo electrónico // verificación de correo electrónico, el formato requerido es ""
4.url // verificación del formato de URL, el formato requerido es http://www.baidu.com
3. Verificación avanzada de contraseña personalizada
Todas las verificaciones anteriores son proporcionadas por extjs y también podemos personalizar las funciones de verificación.
Copie el código de código de la siguiente manera:
//Primero usa el método Ext.apply para agregar una función de verificación de contraseña personalizada (también puedes darle otro nombre)
Aplicación.ext(Ext.form.VTypes,{
contraseña: función (val, campo){// val se refiere al valor del cuadro de texto aquí, el campo se refiere a este componente del cuadro de texto, todos deben comprender este significado
if(field.confirmTo){//confirmTo es nuestro parámetro de configuración personalizado, generalmente utilizado para guardar el valor de identificación de otro componente
var pwd=Ext.get(field.confirmTo);//Obtener el valor de la identificación de confirmTo
retorno (val==pwd.getValue());
}
devolver verdadero;
}
});
//Configurar parámetros de elementos
elementos:[{fieldLabel:"Contraseña",
identificación: "contraseña1",
},{
fieldLabel:"Confirmar contraseña",
identificación: "contraseña2",
vtype:"contraseña",//Tipo de verificación personalizado
vtypeText: "¡Las dos contraseñas son inconsistentes!",
confirmTo:"pass1",//La identificación de otro componente a comparar
}
4. Utilice la verificación de expresiones regulares.
Copie el código de código de la siguiente manera:
nuevo formulario ext.textfield({
etiqueta de campo: "Nombre",
nombre: "nombre_autor",
regex: /[/u4e00-/u9fa5]/, //La expresión regular está entre /......./. [/u4e00-/u9fa5]: solo se puede ingresar chino.
regexText: "¡Solo se puede ingresar chino!", //Mensaje de error de expresión regular
enableBlank: false //Esta verificación aún es válida. No puede estar vacía.