jQuery Validate pluginjQuery Validate插件入門


備註

本節概述了jquery-validate是什麼,以及開發人員可能想要使用它的原因。

它還應該提到jquery-validate中的任何大型主題,並鏈接到相關主題。由於jquery-validate的文檔是新的,您可能需要創建這些相關主題的初始版本。

安裝或設置

包括來自CDN的插件或包含jQuery後的本地插件。然後將.validate() 方法附加到表單以初始化插件。在此方法中,您可以定義規則,自定義消息和其他選項。

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
<script>
    $(document).ready(function() {  // <-- ensure form's HTML is ready
    
        $("#myform").validate({  // <-- initialize plugin on the form.
            // your rules and other options,
            rules: {
                first_name: {  // <-- this is the name attribute, NOT id
                    required: true
                },
                last_name: {
                    required: true
                },
                phone: {
                    required: true,
                    digits: true
                }
            }
        });
    
    });
</script>
 

考慮進行驗證的每個輸入都必須包含唯一的name 屬性;這就是插件跟踪輸入的方式。相應的HTML標記:

<form id="myform">
    <input type="text" name="first_name" /><br/>
    <input type="text" name="last_name" /><br/>
    <input type="text" name="phone" /><br/>
    <input type="submit" />
</form>