jQuery.validate.js API 2

時間  2020-09-10
標籤 jquery.validate.js jquery validate api 欄目 JQuery 简体版
原文   原文鏈接
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">        
<html>        
<head>        
    <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>        
            
    <mce:script type="text/javascript"><!--        
        $(document).ready(function(){        
            $("#myform").validate({        
                errorLabelContainer: "#messageBox",        
                wrapper: "li",        
                submitHandler: function() { alert("Submitted!") }        
            })        
        });        
            
// --></mce:script>        
            
</head>        
<body>        
    <mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>        
<ul id="messageBox"></ul>        
<form id="myform" action="/login" method="post">        
     <label>Firstname</label>        
     <input name="fname" class="required" />        
     <label>Lastname</label>        
     <input name="lname" title="Your lastname, please!" class="required" />        
     <br/>        
     <input type="submit" value="Submit"/>        
</form>        
</body>        
</html>        
errorContainer    Selector                
顯示或者隱藏驗證信息        
使用一個額外的容器去顯示錯誤信息        
Uses an additonal container for error messages. The elements given as the errorContainer are all shown and hidden when errors occur. But the error labels themselve are added to the element(s) given as errorLabelContainer, here an unordered list. Therefore the error labels are also wrapped into li elements (wrapper option).        
$("#myform").validate({        
     errorContainer: "#messageBox1, #messageBox2",        
     errorLabelContainer: "#messageBox1 ul",        
     wrapper: "li", debug:true,        
     submitHandler: function() { alert("Submitted!") }        
})        
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">        
<html>        
<head>        
    <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>        
            
    <mce:script type="text/javascript"><!--        
    $(document).ready(function(){        
        $("#myform").validate({        
             errorContainer: "#messageBox1, #messageBox2",        
             errorLabelContainer: "#messageBox1 ul",        
             wrapper: "li", debug:true,        
             submitHandler: function() { alert("Submitted!") }        
        })        
    });        
            
// --></mce:script>        
    <mce:style><!--    
#messageBox1, #messageBox2 { display: none }        
--></mce:style><style mce_bogus="1">#messageBox1, #messageBox2 { display: none }</style>        
</head>        
<body>        
    <mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>        
<div id="messageBox1">        
    <ul></ul>        
</div>        
<form id="myform" action="/login" method="post">        
    <label>Firstname</label>        
    <input name="fname" class="required" />        
    <label>Lastname</label>        
    <input name="lname" title="Your lastname, please!" class="required" />        
    <br/>        
    <input type="submit" value="Submit"/>        
</form>        
<div id="messageBox2">        
    <h3>There are errors in your form, see details above!</h3>        
</div>        
</body>        
</html>        
showErrors    Callback        Default: None, uses built-in message disply.        
獲得錯誤的顯示句柄        
Gets the map of errors as the first argument and and array of errors as the second, called in the context of the validator object. The arguments contain only those elements currently validated, which can be a single element when doing validation onblur/keyup. You can trigger (in addition to your own messages) the default behaviour by calling this.defaultShowErrors().        
Code        
Update the number of invalid elements each time an error is displayed. Delegates to the default implementation for the actual error display.        
$(".selector").validate({        
     showErrors: function(errorMap, errorList) {        
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors, see details below.");        
        this.defaultShowErrors();        
     }        
})        
errorPlacement    Callback        Default: 把錯誤label放在驗證的元素後面        
可選錯誤label的放置位置. First argument: The created error label as a jQuery object. Second argument: The invalid element as a jQuery object.        
Use a table layout for the form, placing error messags in the next cell after the input.        
$("#myform").validate({        
    errorPlacement: function(error, element) {        
         error.appendTo( element.parent("td").next("td") );        
     },        
     debug:true    
})        
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">        
<html>        
<head>        
    <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>        
    <mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>        
    <mce:script type="text/javascript"><!--        
    $(document).ready(function(){        
        $("#myform").validate({        
             errorPlacement: function(error, element) {        
                 error.appendTo( element.parent("td").next("td") );        
             },        
             debug:true    
         })        
    });        
            
// --></mce:script>        
            
</head>        
<body>        
    <form id="myform" action="/login" method="post">        
        <table>        
                <tr>        
                        <td><label>Firstname</label>        
                        <td><input name="fname" class="required" value="Pete" /></td>        
                        <td></td>        
                </tr>        
                <tr>        
                        <td><label>Lastname</label></td>        
                        <td><input name="lname" title="Your lastname, please!" class="required" /></td>        
                        <td></td>        
                </tr>        
                <tr>        
                        <td></td><td><input type="submit" value="Submit"/></td><td></td>        
        </table>        
</form>        
</body>        
</html>        
success String , Callback            
成功時的class.If specified, the error label is displayed to show a valid element. If a String is given, its added as a class to the label. If a Function is given, its called with the label (as a jQuery object) as its only argument. That can be used to add a text like "ok!".        
添加"valid" 到驗證驗證元素, 在CSS中定義的樣式        
$("#myform").validate({        
        success: "valid",        
        submitHandler: function() { alert("Submitted!") }        
})        
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">        
<html>        
<head>        
    <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>        
    <mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>        
    <mce:script type="text/javascript"><!--        
    $(document).ready(function(){        
        $("#myform").validate({        
        success: "valid",        
        submitHandler: function() { alert("Submitted!") }        
         })        
    });        
            
// --></mce:script>        
    <mce:style><!--        
label.valid {        
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/p_w_picpaths/checked.gif') no-repeat;        
        height:16px;        
        width:16px;        
        display: block;        
        position: absolute;        
        top: 4px;        
        left: 152px;        
}        
--></mce:style><style mce_bogus="1">label.valid {        
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/p_w_picpaths/checked.gif') no-repeat;        
        height:16px;        
        width:16px;        
        display: block;        
        position: absolute;        
        top: 4px;        
        left: 152px;        
}</style>        
</head>        
<body>        
            
<form id="myform">        
    <input type="text" name="email" class="required" />        
    <br/>        
    <input type="submit" value="Submit" />        
</form>        
</body>        
</html>        
添加"valid" 到驗證驗證元素, 在CSS中定義的樣式,並加入「ok」的文字        
$("#myform").validate({        
     success: function(label) {        
         label.addClass("valid").text("Ok!")        
     },        
     submitHandler: function() { alert("Submitted!") }        
})        
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">        
<html>        
<head>        
    <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>        
    <mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>        
    <mce:script type="text/javascript"><!--        
    $(document).ready(function(){        
                $("#myform").validate({        
        success: function(label) {        
                        label.addClass("valid").text("Ok!")        
                },        
                submitHandler: function() { alert("Submitted!") }        
                })        
     });        
            
// --></mce:script>        
    <mce:style><!--        
label.valid {        
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/p_w_picpaths/checked.gif') no-repeat;        
        height:16px;        
        width:16px;        
        display: block;        
        position: absolute;        
        top: 4px;        
        left: 152px;        
        padding-left: 18px;        
}        
--></mce:style><style mce_bogus="1">label.valid {        
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/p_w_picpaths/checked.gif') no-repeat;        
        height:16px;        
        width:16px;        
        display: block;        
        position: absolute;        
        top: 4px;        
        left: 152px;        
        padding-left: 18px;        
}</style>        
</head>        
<body>        
            
<form id="myform">        
    <input type="text" name="email" class="required" />        
    <br/>        
    <input type="submit" value="Submit" />        
</form>        
</body>        
</html>        
highlight     Callback        Default: Adds errorClass (see the option) to the Element        
高亮顯示錯誤信息。 或者說重寫出錯時的出錯元素的顯示。Override to decide which fields and how to highlight.        
Code        
Highlights an invalid element by fading it out and in again.        
$(".selector").validate({        
    highlight: function(element, errorClass) {        
         $(element).fadeOut(function() {        
             $(element).fadeIn()        
         })        
    }        
})        
Code        
Adds the error class to both the invalid element and it's label        
$(".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);        
    }        
});        
unhighlight Callback        Default: 默認是去掉error類        
Called to revert changes made by option highlight, same arguments as highlight.        
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程