Cualquier página que involucre información y guardado de edición del usuario implica verificar si los datos cumplen con los requisitos y requieren verificación desde el lado del cliente y el servidor;
La verificación en el lado del servicio al cliente es principalmente para mejorar la experiencia del usuario, mientras que la verificación en el lado del servidor es garantizar el cumplimiento de los datos.
Este complemento también admite la verificación de formulario para usted. Agregue un requerido: fiel a la configuración de las columnas que deben verificarse. Al regenerar la etiqueta delante del elemento de formulario, se generará automáticamente en frente de la etiqueta, que se utiliza para solicitar que los datos se vuelvan a colummar.
Se utiliza la verificación. Para un uso específico, consulte la API de validación de jQuery.
El código es el siguiente (dirección de página: https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form5-validation.html):
<! Doctype html> <html lang = "en"> <fead> <meta charset = "utf-8"> <title> verificación de formulario </title> <meta name = "viewport" content = "width = dispositivo-width, inicial-scale = 1"> <link rel = "stylesheet" href = "../ css/bootstrap.css" estilo-> <link rel = "stylesheet" href = "../ css/site.css"> <script src = "../ lib/jQuery.js"> </script> <script src = "../ lib/jQuery.validate.js"> </script> <script src = "../ lib/bootstrap.js </script-<! src = "../ scripts/global.js"> </script> <!-complemento-> <script src = "../ scripts/plugin.js"> </script> </thead> <body> <div> <div> <label> formulario con verificación </etiqueta> <divs> <botte id = "btnsubmit"> Enviar formulario </botón> </boton> <viv> <viv> <div> <div>##"#"#"#" " id = "FormContainer"> </form> </div> <div> <div> <label> Introducción </labor> </div> <div> <label> Verificación de formularios </h3> <CLOCKQuote> <p> Use la validación de jQuery para la validación. Para otros métodos de verificación, consulte la validación de jQuery. Verificación personalizada global.fn.setDefaultValidator () Método En el archivo global.js, el archivo se cambia a un archivo de herramienta, que define muchos métodos de herramienta, incluida la serialización de formulario, el formato de fecha, el juicio de la matriz, la configuración de la verificación predeterminada, el mensaje de visualización, la ventana emergente, el complemento de inicialización, el formulario de inicialización, la descarga del archivo, el guardado de formulario, etc. </p> </bloququote> </diviv> <script> Eles = [[{etiqueta: {text: 'personalizado nombre de usuario: '}, ele: {type:' text ', nombre:' nombre de usuario ', título:' username: ', requerido: true}}, {ele: {type:' radio ', nam E: 'Sex', Título: 'Género:', Elementos: [{texto: 'masculino', valor: 1}, {text: 'femenino', valor: 2}]}}, {ele: {type: 'checkbox', Nombre: 'Planta', Título: 'Uso de la plataforma:', Elementos: [{Text: 'App', Value: 'App'}, {Text: 'Web', Value: 'Web'}]}} ], [{{ele: {tipo: 'seleccionar', nombre: 'provincia', título: 'provincia:', withnull: true, elementos: [{text: 'guangdong', valor: 'gd'}, {text: 'hunan', valor: 'hn'}]}}, {ele: {pre: {text: '<input type = "radio"> '}, type:' text ', name:' displayName ', title:' Display Name: '}}, {ele: {type:' Search ', Title:' Product ', Id:' ProductName ', requerido: verdadero}}], [{ele: {Type:' Detetime ', Nombre:' Fromedate ', Title: Validation Período: '}}, {ele: {type:' dateTime ', name:' Todate ', title:' ~ '}},]]]; // Los elementos de forma oculta se usan principalmente para editar. '1,3'}). Render ('formcontainer', function (bf) {var modelo = {primario: 1, nombre de usuario: 'xxg', sexo: 1, planta: ['app', 'web'], provincia: 'GD', DisplayName: 'test', ProductName: 'NoteB OOK ', Fromedate:' 2015-06-10 ', Todate:' 2015-08-08 '}; bf.initformData (modelo);}); $ ("#btnsubmit"). bind (' click ', function () {if (! $ ("#formcontainer"). válido ()) {alert ("fallado de verificación!");} else {var postdata = bsform.getFormData (); alert ("el datos de expresión obtenidos es:"+json.Stringify (postdata)); Reglas de verificación $ ("#formcontainer"). Validate ({reglas: {username: {required: true, minLength: 3, maxLength: 10}, productName: {requerido: true}}});}); </script> </body> </html>La columna de nombre de usuario está configurada con la verificación de llenado y longitud requerida. La interfaz en ejecución elimina el valor del nombre de usuario. Puede ver el efecto al enviar el formulario:
Las representaciones son las siguientes: