【Javascript】【jQuery】使用jQuery.Validate进行表单校验

jQuery.Validate是一个基于jQuery开发的插件，使用方法如下


<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery</title>
    </head>

    <link rel="stylesheet" type="text/css" href="../css/test.css"/>
    <script type="text/javascript" src="../js/jquery-3.4.0.js"></script>
    <script type="text/javascript" src="../js/jquery.validate.js"></script>
    <script type="text/javascript" src="../js/jquery.validate.messages_zh.js"></script>
    <script type="text/javascript" src="../js/test.js"></script>

    <body>
        <form id="form">
            姓名<input name="name" id="name"/>
            密码<input name="password" id="password"/>
            确认<input name="confirm"/>
            <br/>
            <input type="submit" value="提交表单"/>
        </form>
    </body>

    <style>
        #form > input {
            display: block;
            width: 300px;
        }

        /*
            设置jquery.validate的错误样式
            由于validate插件默认会把校验失败的input也设置为error类
            如果不想让input和错误文本一样的样式，应当对选择器进行过滤
        */
        :not(input).error {
            color: red;
            display: block;
            width: 300px;
        }
    </style>

    <script>
        $(function () {
            //使用默认规则和消息进行校验
            // $("#form").validate();

            //自定义规则和消息进行校验
            $("#form").validate({
                //调试模式：只校验表单，不提交表单
                debug: true,
                //校验不通过时，自动移入焦点
                focusInvalid: true,
                //自定义校验规则
                rules: {
                    name: {
                        required: true
                    },
                    password: {
                        required: true,
                        minlength: 6,
                        maxlength: 20,
                        rangelength: [6, 20]
                    },
                    confirm: {
                        equalTo: "#password"
                    }
                },
                //自定义错误提示
                messages: {
                    name: {
                        required: "用户名为必填项"
                    },
                    password: {
                        required: "密码为必填项",
                        minlength: "密码长度至少需要6个字符",
                        maxlength: "密码长度最多允许20个字符",
                        rangelength: "密码长度必须在6到20个字符之间"
                    },
                    confirm: {
                        equalTo: "两次输入的密码不一致"
                    }
                }
            });
        });
    </script>
</html>

运行效果如下
在这里插入图片描述
实际应用中，可能会出现多种校验规则，大家熟练掌握基本用法后，可以自己参考文档和百度，去实现更高级的功能

【Javascript】【jQuery】使用jQuery.Validate进行表单校验

猜你喜欢