jQuery Validar

biblioteca de importación js (CDN uso de este tutorial)

<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

Las reglas de validación por defecto

Consejos predeterminados

messages: {
	required: "This field is required.",
	remote: "Please fix this field.",
	email: "Please enter a valid email address.",
	url: "Please enter a valid URL.",
	date: "Please enter a valid date.",
	dateISO: "Please enter a valid date ( ISO ).",
	number: "Please enter a valid number.",
	digits: "Please enter only digits.",
	creditcard: "Please enter a valid credit card number.",
	equalTo: "Please enter the same value again.",
	maxlength: $.validator.format( "Please enter no more than {0} characters." ),
	minlength: $.validator.format( "Please enter at least {0} characters." ),
	rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
	range: $.validator.format( "Please enter a value between {0} and {1}." ),
	max: $.validator.format( "Please enter a value less than or equal to {0}." ),
	min: $.validator.format( "Please enter a value greater than or equal to {0}." )
}

Validar jQuery proporciona consejos paquete de información de China, que se encuentra en la descarga del paquete dist / localización / messages_zh.js, dice lo siguiente:

(function( factory ) {
	if ( typeof define === "function" && define.amd ) {
		define( ["jquery", "../jquery.validate"], factory );
	} else {
		factory( jQuery );
	}
}(function( $ ) {

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhongwén), 汉语, 漢語)
 */
$.extend($.validator.messages, {
	required: "这是必填字段",
	remote: "请修正此字段",
	email: "请输入有效的电子邮件地址",
	url: "请输入有效的网址",
	date: "请输入有效的日期",
	dateISO: "请输入有效的日期 (YYYY-MM-DD)",
	number: "请输入有效的数字",
	digits: "只能输入数字",
	creditcard: "请输入有效的信用卡号码",
	equalTo: "你的输入不相同",
	extension: "请输入有效的后缀",
	maxlength: $.validator.format("最多可以输入 {0} 个字符"),
	minlength: $.validator.format("最少要输入 {0} 个字符"),
	rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
	range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
	max: $.validator.format("请输入不大于 {0} 的数值"),
	min: $.validator.format("请输入不小于 {0} 的数值")
});

}));

Puede localizar el archivo de información de localización / dist / messages_zh.js introducidas a la página:

<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

uso

1, el control de reglas de validación escrito

<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
    $("#commentForm").validate();
});
</script>

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>输入您的名字，邮箱，URL，备注。</legend>
    <p>
      <label for="cname">Name (必需, 最小两个字母)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (必需)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (可选)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">备注 (必需)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>

Trate »

2, el código js reglas de validación escrito

$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母",
        equalTo: "两次密码输入不一致"
      },
      email: "请输入一个正确的邮箱",
      agree: "请接受我们的声明",
      topic: "请选择两个主题"
    }
});

mensajes en un control si no hay mensaje, utilizaremos la información por defecto

<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" type="text">
    </p>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" name="password" type="password">
    </p>
    <p>
      <label for="confirm_password">验证密码</label>
      <input id="confirm_password" name="confirm_password" type="password">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
    <p>
      <label for="agree">请同意我们的声明</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
      <label for="newsletter">我乐意接收新信息</label>
      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
    </p>
    <fieldset id="newsletter_topics">
      <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
      <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash
      </label>
      <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz
      </label>
      <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester
      </label>
      <label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>

Trate »

requerido: verdadero valor es una necesidad.
requiere: "#AA: activada" es una expresión de la verdad, es necesario verificar.
requerido: function () {return true}, expresado la necesidad de verificación.

Dos utilizado comúnmente en la parte posterior, en forma necesitan para llenar o no llenar elementos.

Los métodos comunes y la atención a los problemas

1, si no, sustituir el valor por defecto en ENVIAR

$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){
            alert("提交事件!");   
            form.submit();
        }    
    });
});

Manera de utilizar Ajax

 $(".selector").validate({     
 submitHandler: function(form) 
   {      
      $(form).ajaxSubmit();     
   }  
 }) 

Puede establecer valores por defecto validan redactados como sigue:

$.validator.setDefaults({
  submitHandler: function(form) { alert("提交事件!");form.submit(); }
});

Si desea enviar el formulario, es necesario utilizar form.submit (), en lugar de $ (forma) .submit ().

2, de depuración, la verificación no sólo se envía el formulario

Si este parámetro es cierto, entonces el formulario no se presenta, sólo los controles realizados, es muy conveniente cuando se depura.

$().ready(function() {
 $("#signupForm").validate({
        debug:true
    });
});

Si una página tiene múltiples formas quieren establecer para depurar, utilice:

$.validator.setDefaults({
   debug: true
})

3, ignorar: ignorar ciertos elementos no son verificados

ignore: ".ignore"

4. Cambio de la ubicación del mensaje de error que aparece

errorPlacement：Callback

Indican la ubicación de fuera de lugar, el valor predeterminado es: error.appendTo (element.parent ()), es decir el mensaje equivocado detrás elemento de autenticación.

errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}

Ejemplos

<p>将错误信息放在 label 元素后并使用 span 元素包裹它</p>

<form method="get" class="cmxform" id="form1" action="">
  <fieldset>
    <legend>Login Form</legend>
    <p>
      <label for="user">Username</label>
      <input id="user" name="user" required minlength="3">
    </p>
    <p>
      <label for="password">Password</label>
      <input id="password" type="password" maxlength="12" name="password" required minlength="5">
    </p>
    <p>
      <input class="submit" type="submit" value="Login">
    </p>
  </fieldset>
</form>

Trate »

El papel del código es: En circunstancias normales, se muestra el mensaje de error en el <td class = "status"> </ td> si la radio se muestra en la <td> </ td>, si la casilla de verificación aparece en el contenido de atrás.

Por lo general, estos tres atributos simultáneamente, para lograr la pantalla todas las funciones de error en un recipiente, y ninguna información se oculta automáticamente.

errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"

5, cambiar el estilo del mensaje de error que aparece

Error de ajuste de estilo, puede aumentar aparece el icono, el sistema ha establecido un validation.css, diseñado para mantener el estilo del documento de verificación.

input.error {border: 1px rojo sólido;}
label.error {
  background: url ( "Demo / images / unchecked.gif ./") no-repeat 0px 0px;

  padding-left: 16px;

  padding-bottom: 2px;

  font-weight: bold;

  color: # EA5200;
}
label.checked {
  background: url ( "./ demo / images / checked.gif") no-repeat 0px 0px;
}

6, cada campo se verifica mediante la realización de una función

 el éxito: String, devolución de llamada 

Para verificar que los elementos de la operación después de la verificación, si es seguido por una cadena que va a ser tratado como una clase css, pero también con una función.

el éxito: function (etiqueta) {
    // Set & nbsp; como texto para IE
    label.html ( "& nbsp;"). addClass ( "marcado");
    //label.addClass("valid").text("Ok! ")
}

Añadir "válido" para verificar los elementos definidos en el estilo CSS <style> label.valid {} </ style>.

el éxito: "válida"

7, modificar la validación de disparo

A pesar de que el siguiente es un valor lógico, pero se recomienda a menos que desee falso, de lo contrario añadió Freeze.

// Cambiar la forma $ (). Ready (function () {
 var validador = $ ( "# signupForm"). validar ({
        submitHandler: function (formulario) {
            alert ( "presentado");   
            form.submit ();
        }    
    });
    $ ( "# Reinicio"). Click (function () {
        validator.resetForm ();
    });

});

8, la verificación asíncrono

 remoto: URL 

Forma de autentificar usando ajax, presentado en el valor predeterminado actual a una verificación de la dirección a distancia, si se requiere para presentar otros valores, puede utilizar la opción de datos.

 remoto: "check-email.php" 

remoto: {
    url: "check-email.php", // Tipo de cola: "post", // tipoDatos modo de transmisión de datos: "json", // recibir datos de formato de datos: los datos de nombre de usuario {// que se pasarán: function ( ) {
            devolver $ ( "# nombre de usuario") val () .;
        }
    }
}

Dirección remota única salida "verdadero" o "falso", no puede tener otra salida.

9, validación personalizada añadiendo

 addMethod: nombre, el método, el mensaje 

métodos de autenticación personalizados

// Caracteres dos bytes jQuery.validator.addMethod ( "byteRangeLength", de función (valor, elemento, param) {
    var = longitud value.length;
    for (var i = 0; i <value.length; i ++) {
        si (value.charCodeAt (i)> 127) {
            longitud ++;
        }
    }
  volver this.optional (elemento) || (longitud> = param [0] && longitud <= param [1]);   
}, $ .validator.format ( "Asegúrese de que el valor introducido en {0} - {1} entre bytes (caracteres de un byte cuentan 2)"));

// Verificación Código postal jQuery.validator.addMethod ( "isZipCode", la función (valor, elemento) {   
    var = tel / ^ [0-9] {6} $ /;
    volver this.optional (elemento) || (tel.test (valor));
} "Por favor, rellene el correcto su código postal");

Nota: Para añadir ficheros adicionales-methods.js o añadir archivos jquery.validate.js.Recomendaciones generalmente escritos en el archivo adicional-methods.js.

Nota: archivo messages_cn.js, añadir: isZipCode: "puede incluir texto, letras, números y guiones bajos."Antes de llamar Para añadir referencias de archivo adicional-methods.js.

10, la radio y la casilla de verificación, seleccione la verificación

La radio debe seleccionar una representación requerida.

<Input type = "radio" id = "gender_male" value = "m" name = "género" se requiere />
<Input type = "radio" id = valor "gender_female" = "f" name = "género" />

casilla de verificación debe seleccionar la representación requerida.

<Input type = "checkbox" class = "casilla de verificación" id = "de acuerdo" name = "de acuerdo" requerido />

representa el número mínimo de casilla de verificación minLength debe ser comprobado, maxlength representa el número máximo de seleccionado, rangelength: [2,3] representa el número de la gama seleccionada.

<Input type = "checkbox" class = "casilla de verificación" id = "spam_email" value = "email" name = "correo no deseado []" requerido minLength = "2" />
<Input type = "checkbox" class = "casilla de verificación" id = "spam_phone" value = nombre de "teléfono" = "correo no deseado []" />
<Input type = "checkbox" class = "casilla de verificación" id = valor "spam_mail" = "correo" name = "correo no deseado []" />

Seleccione el requerido que muestra el valor seleccionado no puede estar vacío.

<Select id = "jungla" name = título de "jungla" = "Por favor seleccione algo!" Obligatorio>
    <Option value = ""> </ option>
    <Option value = "1"> Buga </ option>
    <Option value = "2"> Baga </ option>
    <Option value = "3"> Oi </ option>
</ Select>

seleccionar el número seleccionado representación minLength mínimo de (opción múltiple de select), maxlength representa el número máximo de seleccionado, rangelength: [2,3] representa el número del intervalo seleccionado.

<Select id = name = título "fruto" "fruto" = "Por favor seleccione al menos dos frutas" class = "{required: true, MINLENGTH: 2}" multiple = "múltiple">
    <Opción value = "b"> plátano </ option>
    <Option value = "a"> Apple </ option>
    <Option value = "p"> melocotón </ option>
    <Opción value = "t"> tortuga </ option>
</ Select>

API chino jQuery.validate

validador

validar el método devuelve un objeto validador. el objeto del validador tiene muchos métodos se pueden utilizar para iniciar el procedimiento de calibración o cambiar el contenido de la forma, varios métodos comúnmente utilizados se enumeran a continuación.

Built-in de autenticación

validar () es opcional

$(".selector").validate
({
	debug:true
})

$.validator.setDefaults({
	debug:true
})

$(".selector").validate({
	submitHandler:function(form) {
		$(form).ajaxSubmit();
	}
})

$("#myform").validate({
	ignore:".ignore"
})

$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	}
})

$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	},
	messages:{
		name:"Name不能为空",
		email:{       
			required:"E-mail不能为空",
			email:"E-mail地址不正确"
		}
	}
})

$("#myform").validate({
	groups:{
		username:"fname 
		lname"
	},
	errorPlacement:function(error,element) {
		if (element.attr("name") == "fname" || element.attr("name") == "lname")   
			error.insertAfter("#lastname");
		else    
			error.insertAfter(element);
	},
   debug:true
})

$(".selector").validate({  
	onsubmit:false
})

$(".selector").validate({   
	onfocusout:false
})

$(".selector").validate({
   onkeyup:false
})

$(".selector").validate({
   onclick:false
})

$(".selector").validate({
   focusInvalid:false
})

$(".selector").validate({
   focusCleanup:true
})

$(".selector").validate({ 
	errorClass:"invalid"
})

$(".selector").validate
   errorElement:"em"
})

$(".selector").validate({
   wrapper:"li"
})

$("#myform").validate({   
	errorLabelContainer:"#messageBox",
	wrapper:"li",
	submitHandler:function() { 
		alert("Submitted!") 
	}
})

$(".selector").validate({  
	showErrors:function(errorMap,errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
		this.defaultShowErrors();
	}
})

$("#myform").validate({  
	errorPlacement:function(error,element) {  
		error.appendTo(element.parent("td").next("td"));
   },
   debug:true
})

$("#myform").validate({        
	success:"valid",
        submitHandler:function() { 
			alert("Submitted!") 
		}
})

addMethod (, método, mensaje de nombre) método

nombre de los parámetros es el nombre del método add.

método de parámetro es una función que toma tres parámetros (valor, elemento, param).
valor es el valor del elemento, el elemento es el elemento en sí, param es el parámetro.

Podemos utilizar addMethod que añadir, salvo el método de validación de método de autenticación incorporado. Por ejemplo, hay un campo, sólo para perder una carta, el rango es af, escrito como sigue:

$ .validator.addMethod ( "AF", la función (valor, elemento, params) {  
	si (value.length> 1) {
		return false;
	}
    if (valor => params [0] && valor <= params [1]) {
		return true;
	} Else {
		return false;
	}
}, "Debe ser una letra, y AF");

Si hay un campo de formulario id = "nombre de usuario", escrito en las reglas:

nombre de usuario: {
   AF: [ "a", "f"]
}

addMethod primer parámetro es el nombre del método de autenticación que desea agregar, es af.
addMethod tercer parámetro, aparece un mensaje de error personalizado, lo que sugiere aquí es: "debe ser una letra, y AF".
addMethod segundo parámetro es una función, esto es más importante, la redacción de la decisión de utilizar este método de verificación.

Si sólo un parámetro, escribir directamente, tales como AF: "a", entonces este es un parámetro único, si hay más de un parámetro está escrito en [], separados por comas.

el modo de cuerda meta

$ ( "# Myform"). Validar ({

   meta: "validar",

   submitHandler: function () { 
alert ( "Enviado!")}

})

<Script type = "text / javascript" 
src = "/ js jquery.metadata.js"> </ script>

<Script type = "text / javascript" 
src = "/ js jquery.validate.js"> </ script>

<Form id = "myform">

  <Input type = "text" 
name = clase "e-mail" = "{validar: {required: true, correo electrónico: true}}" />

  <Input type = "submit" 
value = "Enviar" />

</ Form>

Los ejemplos de demostración

ejemplos ficticios

• contenedor de mensajes de error
• mensaje personalizado como un elemento de datos
• (Cuadro desplegable) de radio (botones de radio), casilla (botón de verificación) y seleccione
• formulario interactivo (Formulario) y el tapón (presentación AJAX)
• métodos de medida y visualización de mensajes
• Formas dinámicas
• Utilice el estilo formulario personalizado jQuery UI Themeroller
• TinyMCE - un ligero editor WYSIWYG basado en navegador
• Caja de entrada de archivo
• jQuery Mobile autenticación de formularios

Los ejemplos de la vida real

• formulario de registro de la leche
• formulario de registro Marketo
• Venta vivienda forma de panel plegable
• CAPTCHA de distancia (PIN) de verificación

Ejemplos Descargar

Descargar las instancias oficiales