• JQ——表单验证插件(validation)


    1、使用validation插件先要下载相应文件:

     打开dist文件夹:

     打开dist中的localization文件夹(控制汉字):

     打开该文件,主要内容如下:

     1     required: "这是必填字段",
     2     remote: "请修正此字段",
     3     email: "请输入有效的电子邮件地址",
     4     url: "请输入有效的网址",
     5     date: "请输入有效的日期",
     6     dateISO: "请输入有效的日期 (YYYY-MM-DD)",
     7     number: "请输入有效的数字",
     8     digits: "只能输入数字",
     9     creditcard: "请输入有效的信用卡号码",
    10     equalTo: "你的输入不相同",
    11     extension: "请输入有效的后缀",
    12     maxlength: $.validator.format("最多可以输入 {0} 个字符"),
    13     minlength: $.validator.format("最少要输入 {0} 个字符"),
    14     rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
    15     range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
    16     max: $.validator.format("请输入不大于 {0} 的数值"),
    17     min: $.validator.format("请输入不小于 {0} 的数值")

    2、validation的简单使用(校验用户名和密码):

    (1)核心代码:

    <script>
                $(function(){
                    $("#checkForm").validate({
                        rules:{
                            username:{
                                required:true,
                                minlength:6
                            },
                            password:{
                                required:true,
                                digits:true,
                                minlength:6
                            }
                        },
                        messages:{
                            username:{
                                required:"用户名不能为空!",
                                minlength:"用户名不得少于6位!"
                            },
                            password:{
                                required:"密码不能为空!",
                                digits:"密码必须是数字!",
                                minlength:"密码不得少于6位!"
                            }
                        }
                    });
                });
            </script>

    先要获取要校验的表单的ID,然后再定义用户名和密码的属性值,来完成表单的校验。其中message可以修改提示信息(覆盖已经定义好的)。

    (2)完整代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>validate</title>
            <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
            <script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
            <script type="text/javascript" src="../js/messages_zh.js" ></script>
            <script>
                $(function(){
                    $("#checkForm").validate({
                        rules:{
                            username:{
                                required:true,
                                minlength:6
                            },
                            password:{
                                required:true,
                                digits:true,
                                minlength:6
                            }
                        },
                        messages:{
                            username:{
                                required:"用户名不能为空!",
                                minlength:"用户名不得少于6位!"
                            },
                            password:{
                                required:"密码不能为空!",
                                digits:"密码必须是数字!",
                                minlength:"密码不得少于6位!"
                            }
                        }
                    });
                });
            </script>
            
        </head>
        <body>
            <form action="#" id="checkForm">
                用户名:<input type="text" name="username" /><br />
                密码:<input type="password" name="password"/><br />
                <input type="submit"/>
            </form>
        </body>
    </html>

    (3)效果展示:

    输入不符合要求的用户名和密码:

     输入符合要求的用户名和密码:

     插件的使用减少的代码量和开发的复杂度。可以与JS的表单校验对比(https://www.cnblogs.com/zhai1997/p/12217085.html),JS开发里面的校验函数都要自己手动编写,开发难度较大,但是JQ开发只需要设置相应的属性值即可,不需要手动编写校验函数。

  • 相关阅读:
    linux运维、架构之路-K8s中部署Jenkins集群高可用
    linux运维、架构之路-K8s数据管理
    linux运维、架构之路-K8s通过Service访问Pod
    linux运维、架构之路-K8s应用
    linux运维、架构之路-K8s健康检查Health Check
    linux运维、架构之路-K8s滚动更新及回滚
    linux运维、架构之路-Kubernetes基础(一)
    Python前端HTML
    linux运维、架构之路-Kubernetes离线集群部署-无坑
    linux运维、架构之路-MongoDB单机部署
  • 原文地址:https://www.cnblogs.com/zhai1997/p/12237467.html
Copyright © 2020-2023  润新知