Instrucciones de verificación de forma común
1. Verificación requerida
Si se ha completado una entrada de formulario, simplemente agregue la etiqueta HTML5 requerida al elemento de campo de entrada:
Copie el código de la siguiente manera: <input type = "text" requerido />
2. Longitud mínima
Verifique que la longitud de texto de la entrada de formulario sea mayor que un cierto valor mínimo, y use la instrucción ng-minleng = "{número}" en el campo de entrada:
Copie el código de la siguiente manera: <input type = "text" ng-minLength = "5" />
3. Longitud máxima
Verifique que la longitud de texto de la entrada de formulario sea menor o igual a un cierto valor máximo, y use la instrucción ng-maxLength = "{number}" en el campo de entrada:
Copie el código de la siguiente manera: <input type = "text" ng-maxLength = "20" />
4. Mataje de patrones
Use Ng-Pattern = "/Pattern/" para asegurarse de que la entrada coincida con la expresión regular especificada:
Copie el código de código de la siguiente manera: <input type = "text" ng-pattern = "/[a-lza-z]/"/>
5. Correo electrónico
Verifique que el contenido de entrada sea un correo electrónico, simplemente configure el tipo de entrada en correo electrónico como a continuación:
Copie el código de la siguiente manera: <input type = "correo electrónico" name = "correo electrónico" ng-model = "user.email" />
6. Números
Verifique que el contenido de entrada sea un número y establezca el tipo de entrada en el número:
Copie el código de la siguiente manera: <input type = "number" name = "edad" ng-model = "user.age" />
7. URL
Verifique que el contenido de entrada sea una URL y establezca el tipo de entrada en URL:
Copie el código de la siguiente manera: <input type = "url" name = "homePage" ng-model = "user.facebook_url" />
Probemos estas verificaciones de formulario en implementaciones específicas:
<Div> <form role = "form"> <div> <div> <etiqueta for = "name"> 1.Required </labe> </div> <div> <input id = "name" type = "text" requerido ng-model = 'us.name'/> </div> </div> <div> <div> <label de etiqueta para = "minlength"> 2. Longitud mínima = 5 </label> </div> <div> <input type = "text" id = "minlength" ng-minlength = "5" ng-model = "user.minlength"/> </div> </div> <div> <label for = "minlength"> 3.maximum longitud = 20 </etiqueta> </div> <div> <put type = "text" ng-mmodel longitud longitud "ngmodel" " ng-maxLength = "20"/> </div> </div> <div> <div> <etiqueta for = "minLength"> 4. Coincidencia de patrones </label> </div> <div> <input type = "text" id = "minlength" ng-model = "user.pattern" ng-pattern = "/^[a-za-z]*/d $/"/> </div> </div> <div> <div> <label de etiqueta para = "correo electrónico"> 5. Correo electrónico </label> </div> </div> <div> <etiqueta for = "correo electrónico"> 5. Correo electrónico </label> </div> <div> <input type = "correo electrónico" id = "correo electrónico" name = "correo electrónico" ng-model = "user.email"/> </div> </div> <div> <div> <etiqueta for = "edad"> 6. Número </selebel> </div> <viv> <input type = "number" id = "edad" name = "edad" ng-model = "user.age"/> </div> </div> <div> <div> <div> <lelkel etiqueta for = "url"> 7. url </label> </div> <div> <input type = "url id =" url "name =" homepage "ng-model </div> </div> <div> <input type = "subt" value = "shipt"/> </div> </div> <div> 1. campos requeridos: {{user.name}} <br> 2. min. Longitud = 5: {{user.minlength}} <br> 3. Máximo Longitud = 20: {{user.maxLength}} <br> 4. Matriota de patrón: {{user.pattern}} <br> 5. Correo electrónico: {{user.EMail}}} <br> 6. Number: {{User.age}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} 7.URL: {{user.url}} <br> </div>En la prueba, encontramos que la unión de dos vías se realizará en tiempo real solo cuando la expresión satisfaga la verificación. Al mismo tiempo, también descubrimos que las representaciones son las siguientes:
Parece que nada ha sucedido, pero si lo transferimos a un navegador con un equipo de verificación HTML5 que no es muy bueno, probemos [es decir, en este ejemplo], el problema es que algunos campos no se verifican en absoluto.
De hecho, en el ejemplo anterior, utilizamos la verificación HTML5 y la verificación propia de Ng para combinarla. No admite la verificación HTML5, pero la verificación gratuita de Ng funciona bien. La solución es muy simple. Puede usar la coincidencia de patrones para resolver estas situaciones, o puede personalizar las instrucciones de verificación para reescribir o redefinir las reglas de verificación.
Bloquee el comportamiento de verificación predeterminado del navegador para formularios
Simplemente agregue la etiqueta Novalidate en el elemento de formulario. La pregunta es ¿cómo sabemos qué campos de nuestra forma son válidos y qué cosas son ilegales o inválidas? Ng también proporciona una gran solución para esto. Se puede acceder a las propiedades del formulario en el objeto $ alcance al que pertenece, y podemos acceder al objeto $ alcance, por lo que JavaScript puede acceder indirectamente a las propiedades del formulario en el DOM. Con estas propiedades, podemos responder en tiempo real a la forma.
Se puede acceder a estas propiedades utilizando el formato formname.inputfieldname.property.
Forma no modificada
Propiedad booleana que indica si el usuario ha modificado el formulario. Si es ture, significa que no ha sido modificado; falso significa que ha sido modificado:
La copia del código es la siguiente: FormName.InputFieldName. $ Pristine; forma modificada
Propiedad booleana si y solo si el usuario realmente ha modificado el formulario. Independientemente de si el formulario está verificado o no:
La copia del código es la siguiente: FormName.InputFieldName. $ Dirty
Forma verificada
Propiedad booleana que indica si el formulario ha pasado la verificación. Si el formulario está validado actualmente, será cierto:
El código de copia es el siguiente: FormName.InputFieldName. $ Válido El código de copia es el siguiente: FormName.InputFieldName. $ Inválido
Las dos últimas propiedades son particularmente útiles cuando se usan para mostrar o ocultar el elemento DOM. Al mismo tiempo, también son muy útiles si desea configurar una clase específica.
error
Esta es otra propiedad muy útil proporcionada por AngularJS: el objeto de error $. Contiene todo el contenido de verificación del formulario actual, así como información sobre si son legítimos. Acceda a esta propiedad utilizando la siguiente sintaxis
La copia del código es la siguiente: FormName.InputFieldName. $ Error
Si la verificación falla, el valor de esta propiedad es verdadero; Si el valor es falso, significa que el valor del campo de entrada ha pasado la verificación.
A continuación probamos estas instrucciones de verificación:
<! Doctype html> <html ng-app = "mytest"> <head> <meta name = "viewport" content = "width = dispositivo-width"/> <title> index </title> <link href = "~/content/css/bootstrap.min.csss" rel = "Stylesheet"/> <script src = "~/javascript/angular.min.js"> </script> <style type = "text/css"> cuerpo {padding-top: 30px; } </style> </head> <body ng-controller = "mycontroller"> <div> <form role = "form" name = "myForm" ng-subMit = "Submitform (myform. $ válido)" Novalidate> <div> <div> <label for = "name"> 1.Required </label> </div> <div> <iv Id = "nombre" name = "name" text "" ng-model = 'user.name'/> <span ng-show = "myform.name. $ sucio && myform.name. $ válido"> </span> </div> </div> <div> <div> <etiqueta for = "minlength"> 2. Minimum length=5</label> </div> <div> <input type="text" id="minlength" name="minlength" ng-minlength="5" ng-model="user.minlength" /> <span ng-show="myForm.minlength.$dirty && myForm.minlength.$valid"></span> </div> </div> <div> <div> <label for = "maxLength"> 3.maximum longitud = 20 </label> </div> <div> <input type = "text" id = "maxLength" name = "maxLength" ng-model = "user.maxLength" ng-maxLength = "20"/> <span ng-show = "myform.maxLength. $ Dirty && myform.maxlength. </div> <div> <div> <etiqueta for = "patrón"> 4. Coincidencia de patrón </label> </div> <div> <input type = "text" id = "patrón" name = "patrón" ng-model = "user.pattern" ng-pattern = "/^[a-za-z]*/d $/"/> <span ng-show = "myform.pattern. $ Sucio && myform.pattern. $ Válido"> </span> <shiv> <div> div> <div> <div> Dive <divsi for = "correo electrónico"> 5. Correo electrónico </label> </div> <div> <input type = "correo electrónico" id = "correo electrónico" name = "correo electrónico" ng-model = "user.email"/> <span ng-show = "myform.email. $ Sucio && myform.email. $ Válido"> </span> </div> </div> <div> <div> <etiqueta para = "edad"> 6. Número </selebel> </div> <viv> <input type = "number" id = "edad" name = "edad" ng-model = "user.age"/> <span ng-show = "myform.age. $ Sucio && myform.age. $ Válido"> </span> </biv> <1/div> <div <belebel para = "url"> 7. Url </sel> </diviv <viV> id = "url" name = "url" ng-model = "user.url"/> <span ng-show = "myform.url. $ sucio && myform.url. $ válido"> </span> </div> </div> <viv> <viv> <input ng-disable = "myform. $ inválido" tipo = "enviar"/> </div> </form> {{user.name}} $ pristine [no modificado]: {{myForm.name. $ pristine}} $ sucio [modificado]: {{myForm.name. $ sucio}} $ invalid [verificación fallido]: {{myForm.name. $ invalid}} $ invalid [verificación exitosa]: {{{{{{{{{{{{{{{{{{{{{myform.name. requerido: {{myForm.name. $ Error.Required}} <br> 2. Longitud mínima = 5: {{user.minlength}} $ pristine [no modificado]: {{myForm.Minlength. $ pristine}} $ sucio 【modificado】: {myForm.MinLength. {{myForm.MinLength. $ invalid}} $ invalid 【verificación exitosa】: {{myForm.minLength. $ válida}} $ error 【Detalles de error】: {{myForm.MinLength. $ Error}} <br> 3. Maximum longitud = 20: {{User.MaxLength longitud {{myForm.maxLength. $ pristine}} $ sucio 【modificado】: {{myForm.maxLength. $ sucio}} $ invalid 【verificación fallida】: {{myForm.maxLLength. $ inválido}} $ inválido 【verificación exitosa】: {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{】 【【【 {{myForm.maxlength.$error}}<br> 4. Pattern matching: {{user.pattern}} $pristine 【Not modified】: {{myForm.pattern.$pristine }} $dirty【Modified】: {{myForm.pattern.$dirty}} $invalid【Verification failed】: {{myform.pattern. $ invalid}} $ invalid 【verificación exitosa】: {{myForm.pattern. $ invalid}} $ error 【Detalles de error】: {{myForm.pattern. $ error}} <br> 5. correo electrónico: {{user.Email}} $ pristine 【no modificado】: {{myForm.email. $ pristine}} $ sucio 【modificado】: {{myForm.email. $ sucio}} $ invalid 【verificación fallida】: {{myform.email. $ invalid}} $ inválido 【verificación exitosa】: {myForm.EMAIL. $ válido}}} $ error 【【【【【【【【【【【【【【【【【【 {{myForm.email. $ Error}} <br> 6. Número: {{user.age}} $ pristine 【no modificado】: {{myform.age. $ pristine}} $ sucio 【modificado】: {{myform.age. $ Dirty}} $ invalid 【falló】: {{myform.age. $ inválido 【Verificación exitosa】: {{myForm.age. $ válida}} $ error 【Detalles de error】: {{myForm.age. $ error}} <br> 7.URL: {{user.url}} $ pristine 【no modificado】: {{myForm.url. $ pristine}}} 【【【【no modificado】: {{myForm.url. $ pristine}}} 【【【【modificado】 【no modificado】: {{myForm.url. {{MyForm.url. $ Dirty}} $ Invalid 【Verificación fallida】: {{myForm.url. $ Invalid}} $ Invalid 【Verificación exitosa】: {{MyForm.url. $ Valid}} $ Error 【Detalles de error】: {{MyForm.url. $ Error}}} <Br> </Div Div> </body> </html> <script type = "text/javascript"> angular.module ('mytest', []) .Controller ('mycontroller', function ($ scope) {$ scope.subMitForm = function (isvalid) {if (! isvalid) {verification falló ');}};};};}Los efectos son los siguientes:
Al mismo tiempo, NG ha establecido algunos estilos CSS para estas instrucciones de verificación de manera específica.
Ellos incluyen:
La copia del código es la siguiente: .ng-valid {} .ng-invalid {} .ng-pristine {} .ng-dirty {}/ * reglas de CSS realmente específicas aplicadas por angular */. Ng-invalid-requited {} .ng-invalid-mindength {} .ng-valid-long-long-longil {} {} {} {} {} {}
Corresponden al estado específico del campo de entrada de formulario.
Por ejemplo, cuando la entrada en un campo es ilegal, la clase .ng-Invlid se agregará a este campo. Puedes editar tu CSS favorito. Puede personalizar estas clases en privado para implementar aplicaciones de escenarios específicas.
Sin embargo, las instrucciones de verificación predeterminadas pueden no poder cumplir completamente nuestros escenarios de aplicación reales, y Ng también proporciona las funciones de las instrucciones de verificación personalizadas.
Primero, echemos un vistazo a un ejemplo simple:
angular.module ("mytest", []) .directive ('múltipleMail', [function () {return {request: "ngmodel", link: function (scope, element, attr, ngmodel) {if (ngmodel) {var ageicsegexp = /^(bar-Z0-9_ icke y'*+//=?^_`{| ÚNICA Ngmodel.El código de la página HTML es el siguiente:
<form de rol = "form" id = "custom_form" name = "custom_form" novelidate> <div> <label> múltiples correos electrónicos </selabel> <div> <input múltiple-mail name = "user_email" ng-model = "user.email" VERIFICACIÓN DE LA VERIFICACIÓN DEL PLACO Custom, múltiples, dividido con ";" o ";" </div> </div> <div> <input ng-disable = "custom_form. $ invalid" type = "subt" value = "subt"/> </div> </form>
El código es muy simple, y el efecto es el siguiente:
Este código es muy simple, pero implica varias propiedades importantes de NGModelController. $ ViewValue
La propiedad $ ViewValue contiene la cadena real requerida para actualizar la vista.
$ ModelValue
$ ModelValue está en manos del modelo de datos. $ ModelValue y $ ViewValue pueden ser diferentes dependiendo de si la tubería de $ Parser opera en él.
$ analizadores
El valor de $ parsers es una matriz compuesta de funciones. Cuando el usuario interactúa con el controlador y el método $ setViewValue () en el NGModelController se llama a las funciones en el Método NGModelController. El valor leído por NGModel del DOM se pasa a la función en $ analizadores y es procesado por el analizador en secuencia. Esto es para procesar y modificar los valores.
Nota: La función NGModel. $ SetViewValue () se usa para establecer el valor de vista en el alcance.
La función ngmodel. $ SetViewValue () puede aceptar un parámetro.
Valor (String): el parámetro de valor es el valor real que queremos asignar a la instancia de NGModel.
Este método actualiza el ViewValue de $ local en el controlador y pasa el valor a cada función de $ analizador (incluido el validador). Cuando se analiza el valor y se llaman a todas las funciones en la tubería $ analizadora, el valor se asignará a la propiedad $ ModelValue y se pasará a la expresión proporcionada por la propiedad NG-Model en la instrucción. Finalmente, después de que se completen todos los pasos, se llamarán a todos los oyentes en $ ViewChangeListeners . Tenga en cuenta que llamar a $ setViewValue () solo no evocará un nuevo bucle de resumen, por lo que si desea actualizar la Directiva, debe activar manualmente el resumen después de configurar $ ViewValue. El método $ setViewValue () es adecuado para escuchar eventos personalizados en directivas personalizadas (como usar un complemento jQuery con funciones de devolución de llamada), nos gustaría establecer $ ViewValue y ejecutar bucles Digest cuando se llame a la devolución de llamada.
$ Formatters
El valor de $ Formatters es una variedad de funciones que se denominan una por una en forma de tuberías cuando cambia el valor del modelo de datos. No tiene ningún efecto en la tubería de $ analizador y se utiliza para formatear y convertir valores para mostrar en controles con este valor unido.
$ ViewChangelisteners
El valor de $ ViewChangeListeners es una variedad de funciones que se denominan una por una en forma de tuberías cuando cambia el valor en la vista. Con $ ViewChangeListeners, se puede lograr un comportamiento similar sin usar $ Watch. Dado que se ignora el valor de retorno, estas funciones no necesitan devolver los valores.
$ error
El objeto de error $ contiene el nombre del validador que no ha pasado la verificación y la información de error correspondiente.
$ prístino
El valor de $ Pristine es booleano, lo que puede decirnos si el usuario ha modificado el control.
$ sucio
El valor de $ Dirty es lo contrario de $ Pristine, lo que puede decirnos si el usuario ha interactuado con el control.
$ válido
El valor $ válido nos dice si hay errores en el control actual. El valor es falso cuando hay un error, y el valor es verdadero cuando no hay error.
$ inválido
El valor $ inválido nos dice si hay al menos un error en el control actual, y su valor es lo contrario de $ válido.
Después de aprender los puntos de conocimiento básico, debe aprender profundamente el método de escritura de verificación personalizada. Después de NG1.3, se ha mejorado la facilidad de uso de las instrucciones de verificación.
Lo anterior es una explicación detallada de los ejemplos de uso de la verificación de AngularJS introducido por el editor. Espero que pueda ayudarte. Continuaré actualizando el conocimiento relevante del formulario de verificación AngularJS en el futuro. ¡Presta atención al sitio web de Wulin.com!