jQuery之表单验证插件validate

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

$(form).validate({options})

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

validate 插件是非常强大的插件,更详细的配置信息可以访问下面的URL
http://www.runoob.com/jquery/jquery-plugin-validate.html

例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>表单验证插件</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.js"></script>
        <script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.messages_cn.js"></script>
    </head>
    <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>
</html>

© 2016 – 2018, 飞向上帝的板砖. 版权所有. 转载请注明出处.

发表评论

电子邮件地址不会被公开。 必填项已用*标注