在被验证的控件的后一个元素控制显示
errorPlacement: function(error, element) {
element.next().css("color","red");
if(error.text() == ''){
element.next().html("ok");
} else {
element.next().html(error.text());
}
},
errorElement : 'span',
errorPlacement: function(error, element) {
error.appendTo(element.parent());
},
success: function(label) {
label.addClass("valid")
},
// 中文验证
$.validator.addMethod("stringCheck", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "只能包括中文字、英文字母、数字和下划线");
// 只能中文
$.validator.addMethod("CNonly", function(value, element) {
return this.optional(element) || /^[\u4e00-\u9fa5]+$/.test(value);
}, "只能输入汉字");
one(type, [data], fn)
概述
为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。
在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false
可以使用jq 自带的属性改变错误的显示的位置,其中element是验证未通过的当前表单元素,error为错误后的提示信息 $("#subscribeForm").validate({ errorPlacement : function(error, element) { if (element.is(":radio")) error.appendTo(element.parent()); else if (element.is(":checkbox")) error.appendTo(element.parent().parent()); else error.appendTo(element.parent().next()); } rules : {username:required : true,maxlength : 20} }); 使用jq为我们自带的属性可以在不"破解原界面的情况下"方便的统一修改,希望我的回答能给你带来帮助!
jQuery验证框架(一) 可选项 (jQuery validation)
jQuery验证框架
- <script type="text/javascript" src=js/jquery-1.3.2.min.js></script>
- <script type="text/javascript" src=js/jquery.validate.pack.js></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("#textForm").validate();
- });
- </script>
- <form class="cmxform" id="commentForm" method="get" action="">
- Name<input id="cname" name="name" size="25" class="required" minlength="2" />
- <input class="submit" type="submit" value="Submit"/>
- </form>
- $(".selector").validate({
- debug: true
- })
- $(".selector").validate({
- submitHandler: function(form) {
- // do other stuff for a valid form
- form.submit();
- }
- })
- $(".selector").validate({
- invalidHandler: function(form, validator) {
- var errors = validator.numberOfInvalids();
- if (errors) {
- var message = errors == 1
- ? 'You missed 1 field. It has been highlighted'
- : 'You missed ' + errors + ' fields. They have been highlighted';
- $("div.error span").html(message);
- $("div.error").show();
- } else {
- $("div.error").hide();
- }
- }
- })
- $("#myform").validate({
- ignore: ".ignore"
- })
- $(".selector").validate({
- rules: {
- // simple rule, converted to {required:true}
- name: "required",
- // compound rule
- email: {
- required: true,
- email: true
- }/*
- email: {
- depends: function(element) {
- return $("#contactform_email:checked")
- }
- }*/
- }
- })
- $(".selector").validate({
- rules: {
- name: "required",
- email: {
- required: true,
- email: true
- }
- },
- messages: {
- name: "Please specify your name",
- email: {
- required: "We need your email address to contact you",
- email: "Your email address must be in the format of name@domain.com"
- }
- }
- })
- $("#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
- })
- $("#myform").validate({
- meta: "validate"
- })
- <input type="text" name="email" class="{validate:{ required: true, email:true}}" />
- $(".selector").validate({
- errorClass: "invalid"
- })
- $(".selector").validate({
- validClass: "success"
- })
- $(".selector").validate({
- errorElement: "em"
- })
- $(".selector").validate({
- wrapper: "li"
- })
- $("#myform").validate({
- errorLabelContainer: "#messageBox",
- wrapper: "li"
- })
- $("#myform").validate({
- errorContainer: "#messageBox1, #messageBox2",
- errorLabelContainer: "#messageBox1 ul",
- wrapper: "li", debug:true,
- 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",
- success: function(label) {
- label.addClass("valid").text("Ok!")
- }
- })
- $(".selector").validate({
- highlight: function(element, errorClass) {
- $(element).fadeOut(function() {
- $(element).fadeIn()
- })
- }
- })
- $(".selector").validate({
- highlight: function(element, errorClass) {
- $(element).addClass(errorClass);
- $(element.form).find("label[for=" + element.id + "]")
- .addClass(errorClass);
- },
- unhighlight: function(element, errorClass) {
- $(element).removeClass(errorClass);
- $(element.form).find("label[for=" + element.id + "]")
- .removeClass(errorClass);
- }
- });
-
- $(".selector").validate({
- ignoreTitle: true
- })