利用JQuery Validate 插件验证表单内容

最新推荐文章于 2020-06-08 22:19:20 发布

董一刀

最新推荐文章于 2020-06-08 22:19:20 发布

阅读量291

点赞数 1

文章标签：网页设计

本文链接：https://blog.csdn.net/weixin_43132106/article/details/82494774

版权

以下是JQuery validate简介

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。目前版本是 1.14.0。

访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件。

1.14.0 版本下载地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip
今天我们在注册页面进行了加工，对文本框内内容进行了验证，判断它们是否符合标准，简易的界面如下所示：

这里写图片描述

我们设置了用户账号，用户名（感觉有点重复哈#-_-），密码，验证密码，用户手机号，邮箱。
里面默认的文字是设置文本框属性来进行的。格式如下：

下面显示不按要求输入内容会出现的问题：
这里写图片描述
此时文本框右侧会出现文字显示出错类型，并且表单不能跳转。
下面将实现此功能的代码写入下方：

以用户账号为例：

$("#a1").validate({
                rules:{
                    //userId:"required",
                    userId:{
                        required:true,
                        minlength:6,
                        maxlength:16,
                    },

在validate中写入了rules：required（表明文本框内容必须非空）、minlength和maxlength（分别限制最小和最大长度）。
仅仅写rules是不够的，我们还要写上对应的出错提示：message，代码见下

还是以用户账号为例

messages:{
                    userId:{
                        required:"请填入信息",
                        minlength:"请至少输入6位符号",
                        maxlength:"请至多输入16位符号",
                    },

<注意>，利用JQuery validate插件编写方法时，有很多细节格式需要注意：
1.rules和message后要打冒号，并且大括号外要打逗号。
2.里面的每个组件的验证规定格式为： * id名： { }，*
3.每条规则写完后要打逗号。
以上就是今天所学内容：利用JQuery validate插件实现表单验证。
下面附加完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/messages_zh.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#a1").validate({
                rules:{
                    //userId:"required",
                    userId:{
                        required:true,
                        minlength:6,
                        maxlength:16,
                    },
                    name:{
                        required:true,
                        minlength:3,
                        maxlength:8,
                    },
                    password1:{
                        required:true,
                        minlength:6,
                        maxlength:16,
                    },
                    password2:{
                        required:true,
                        minlength:6,
                        maxlength:16,
                        equalTo:"#password1"
                    },
                    phoneNum:{
                        required:true,
                        minlength:11,
                        maxlength:11,
                        digits:true
                    },
                    Email:{
                        required:true,
                        email:true
                    },
                },
                messages:{
                    userId:{
                        required:"请填入信息",
                        minlength:"请至少输入6位符号",
                        maxlength:"请至多输入16位符号",
                    },
                        name:{
                        required:"请填入信息",
                        minlength:"请至少输入3位符号",
                        maxlength:"请至多输入8位符号",
                    },
                    password1:{
                        required:"请填入密码",
                        minlength:"请至少输入6位符号",
                        maxlength:"请至多输入16位符号",
                    },
                    password2:{
                        required:"请填入密码",
                        minlength:"请至少输入6位符号",
                        maxlength:"请至多输入16位符号",
                        equalTo:"前后密码不一致"
                    },
                    phoneNum:{
                        required:"请填入信息",
                        minlength:"请输入11位数字",
                        maxlength:"请至多输入11位数字",
                        digits:"请输入阿拉伯数字"
                    },
                    Email:{
                        required:"请输入email",
                        email:"请输入正确格式的email地址"
                    },

                },
            });
        });

    </script>
    <body>
        <form id="a1" action=""method="post">
            <input id="userId" name="userId" placeholder="请输入用户账号，长度为6-16"/><br />
            <input id="name" name="name" placeholder="请输入用户名，长度为3-8"/><br />
            <input id="password1" name="password1" type="password" placeholder="请输入密码，长度为6-16" /><br />
            <input id="password2" name="password2" type="password" placeholder="请再次核对密码"/><br />
            <input id="phoneNum" name="phoneNum" placeholder="请输入手机号，长度为11位"/><br />
            <input id="Email" name="Email" placeholder="请输入邮箱" /><br />
            <input type="submit" value="注册" />
        </form>
    </body>
</html>