【JQuery】表单验证插件——validate

最新推荐文章于 2022-11-23 22:00:29 发布

原创最新推荐文章于 2022-11-23 22:00:29 发布 · 508 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

73 篇文章

订阅专栏

本文介绍了一款用于网页表单验证的插件，该插件内置多种验证规则，如必填项、电子邮件格式等，并支持自定义规则。文中通过实例展示了如何验证电子邮件格式，并在特定位置显示错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：

$(form).validate({options})

其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。

例子：通过插件的配置对象，验证邮件格式。

    <body>
        <form id="frmV" method="get" action="#">
            <div id="divtest">
                <div class="title">
                   
                   
                   <span class="fl">表单验证插件</span> 
                    <span class="fr">
                        <input id="btnSubmit" type="submit" value="提交" />
                    </span>
                </div>
                <div class="content"> 
                    <span class="fl">邮箱：</span><br />
                    <input id="email" name="email" type="text" /><br />
                    <span class="tip"></span>
                </div>
            </div>
        </form>
        
        <script type="text/javascript">
            $(function () {
                $("#frmV").validate(
                  {
                      /*自定义验证规则*/
                      rules: {
                          email:{
                            required:true,
                            email:true                       
                                }
                             },
                  
                      /*错误提示位置*/
                      errorPlacement: function (error, element) {
                          error.appendTo(".tip");
         }
                          } 
                );
            });
        </script>
    </body>

说明：

required:true是必填的意思 email:true是email格式必须正确的意思

errorPlacement: function (error, element) {
error.appendTo(".tip"); 如果填错了把错误信息加到.tip标签下