2020版jquery-validate.js使用教程学习笔记

最新推荐文章于 2024-03-14 07:00:00 发布

吴彦希

最新推荐文章于 2024-03-14 07:00:00 发布

阅读量388

点赞数

分类专栏： 2020.12

本文链接：https://blog.csdn.net/weixin_39429811/article/details/110941940

版权

2020.12 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.引入相关的js文件

//1.引入jquery文件
<script src="../js/jquery-validation/jquery.min.js"></script>
//2.引入jquery-validate.js文件
<script src="../js/jquery-validation/jquery.validate.min.js"></script>
//3.引入messages_zh.js=》》》用来国际化提示输错的内容
<script src="../js/jquery-validation/messages_zh.js"></script>
//4.引入additional-methods.js=》》》用来扩展自定义的验证规则方法
<script src="../js/jquery-validation/additional-methods.js"></script>

2.初步了解规则参数rules校验规则

提供的默认校验规则

required:true 必须输入的字段。

remote:“check.do” 使用ajax方法调用check.do验证输入值。

email:true 必须输入正确格式的电子邮件。

url:true 必须输入正确格式的网址。

date:true 必须输入正确格式的日期

dateISO:true 必须输入正确格式的日期（ISO），如：2017-09-17，2017/09/17。只验证格式，不验证有效性。

number:true 必须输入合法的数字（负数，小数）。

digits:true 必须输入整数。

creditcard: 必须输入合法的信用卡号。

equalTo:"#field" 输入值必须和 #field 相同。

accept: 输入拥有合法后缀名的字符串（上传文件的后缀）。

maxlength:5 输入长度最多是 5 的字符串（汉字算一个字符）。

minlength:10 输入长度最小是 10 的字符串（汉字算一个字符）。

rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。

range:[5,10] 输入值必须介于5和10之间。

max:5 输入值不能大于5。

min:10 输入值不能小于10。

3.初步使用jquery-validate.js进行表单校验

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>用户信息</title>

    <script src="../js/jquery-validation/jquery.min.js"></script>

    <script src="../js/jquery-validation/jquery.validate.min.js"></script>

    <script src="../js/jquery-validation/messages_zh.js"></script>

    <script src="../js/jquery-validation/additional-methods.js"></script>

    <script>

        $().ready(function() {

            $("#userInfoForm").validate({

                rules: {

                    username: {

                        required: true,

                        minlength: 2

                    },

                    age: {

                        required: true,

                        digits:true

                    },

                    email: {

                        required: true,

                        email: true

                    }

                },

                messages: {

                    username: {

                        required: "请输入用户名",

                        minlength: "用户名必需由两个字母组成"

                    },

                    age: {

                        required: "请输入年龄",

                        digits: "必须输入整数"

                    },

                    email: "请输入一个正确的邮箱"

                }

            });

        });

    </script>

    <style>

        .error{

            color:red;

        }

    </style>

</head>

<body>

<form id="userInfoForm" method="post" action="">

    <fieldset>

        <legend>用户基本信息</legend>

        <p>

            <label for="username">用户名</label>

            <input id="username" name="username" type="text">

        </p>

        <p>

            <label for="age">年龄</label>

            <input id="age" name="age" type="text">

        </p>

        <p>

            <label for="email">Email</label>

            <input id="email" name="email" type="email">

        </p>

        <p>

            <input class="submit" type="submit" value="提交">

        </p>

    </fieldset>

</form>

</body>

</html>

4.自定义验证方法，扩展rules、messages

        $.extend(rules, {
            username: {
                required: true,
                isBackSpace: true
            }
            
        });
        $.extend(messages, {
            username: {
                required: '用户名不能为空'
            }
        });
        // 这里的value值会自动注入上面username的值，因为它使用了该方法，该方法作用不让用户输入空值以及空格
        $.validator.addMethod('isBackSpace', function (value) {
            if ($.trim(value) === '' && value.length>0) {
                return false;
            } else {
                return true;
            }
        }, '用户名不能为空');

看了许多篇文章，觉得这篇是写得不错的，要是看的还是有点迷惑，请点击这里！！！

吴彦希

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020版jquery-validate.js使用教程学习笔记

1.引入相关的js文件//1.引入jquery文件<script src="../js/jquery-validation/jquery.min.js"></script>//2.引入jquery-validate.js文件<script src="../js/jquery-validation/jquery.validate.min.js"></script>//3.引入messages_zh.js=》》》用来国际化提示输错的内容<scri
复制链接

扫一扫