jquery.validate中文API和應用例項（一）簡單驗證--絕對可用

瓜瓜東西發表於2014-11-05
jQueryAPI

中文版jquery.validate API下載地址： jQuery_validateAPI中文.rar

檢視在簡單驗證規則的使用，請到jquery.validate中文API和應用例項（二）簡單驗證-規則的應用

以下是簡單應用例項：

1.用class樣式進行驗證，用法簡單，但不能自定義錯誤資訊，只能修改jquery-1.4.1.min.js中的內建訊息，也不支援高階驗證規則。

    <script type="text/javascript" language="javascript" src="http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="http://www.cnblogs.com/Scripts/jquery.validate.min.js"></script>
    <h2>
        ValidateTest</h2>
<form id="loginForm" action="post">    <br>    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
　　　　　　<input type="text" id="UserEmail" class="required email" /><br>            </td>
        </tr>
        <tr>
            <td>
　　　　　　<input type="password" id="Password" class="required" /><br>            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" value="submit" onclick="checkInput();" />
            </td>
        </tr>
    </table>
     
    </form>
    <script language="javascript" type="text/javascript">
        function checkInput() {
            if ($("#loginForm").valid()) {
                return true;
            }
            return false;
        }
    </script>

當然，如果不希望使用onclick事件進行提交驗證，也可以在頁面載入時加上jQuery的監控，程式碼如下：

$(document).ready(function () {
     jQuery("#loginForm").validate();
 });  

這時就不需要在提交按鈕上加 onclick="checkInput();"這個事件了。

2.使用Json字串驗證，使用該規則驗證，必須額外引入jquery.metadata.pack.js檔案

修改上面的兩個INPUT如下：

<input type="text" id="UserEmail" class="{validate:{ required:true,email:true }}" />
<input type="password" id="Password" class="{validate:{required:true,minlength:6,messages:{required:'請輸入密碼 ',minlength:'密碼至少6位'}}}" />

可以看到，我們已經可以自定義錯誤訊息了。

另外必須在頁面中加上以下程式碼：

$(document).ready(function () {
$("#loginForm").validate({
meta: "validate"
});
});

相關文章