jquery中validate与form插件提交的方式小结

来详细讲解一下“jquery中validate与form插件提交的方式小结”的完整攻略。

一、什么是jQuery Validation？

jQuery Validation 是一个非常流行的 jQuery 表单验证插件，它可以帮助我们验证用户输入的数据是否合法。使用jQuery Validation可以方便地进行表单验证，使用方式简单易懂，可以兼容不同浏览器、支持自定义验证规则等特性。

二、jQuery Validation中常见的验证方法和使用方式

2.1 常见的验证方法

在JQuery Validation中，有很多验证方法，常见的包括：

required 验证必填项；
email 验证邮箱格式；
url 验证URL格式；
digits 只允许输入整数；
number 验证数字格式；
minlength 验证最小长度；
maxlength 验证最大长度；
equalTo 验证两个输入框的值是否相等；
remote 通过 AJAX 请求验证。

2.2 使用方式

代码示例

<form id="form" action="#" method="post">
    <div>
        <label for="name">名称：</label>
        <input type="text" id="name" name="name">
    </div>
    <div>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email">
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password">
    </div>
    <div>
        <label for="password-confirm">确认密码：</label>
        <input type="password" id="password-confirm" name="password-confirm">
    </div>
    <button type="submit">提交</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script>
    // 表单验证
    $(function() {
        // 验证规则
        var rules = {
            name: {
                required: true,
                minlength: 2,
                maxlength: 10
            },
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 6
            },
            'password-confirm': {
                required: true,
                minlength: 6,
                equalTo: '#password'
            }
        };
        // 验证提示信息
        var messages = {
            name: {
                required: '名称不能为空！',
                minlength: '名称长度不能少于2位！',
                maxlength: '名称长度不能超过10位！'
            },
            email: {
                required: '邮箱不能为空！',
                email: '请输入正确的邮箱格式！'
            },
            password: {
                required: '密码不能为空！',
                minlength: '密码长度不能少于6位！'
            },
            'password-confirm': {
                required: '确认密码不能为空！',
                minlength: '确认密码长度不能少于6位！',
                equalTo: '两次密码输入不一致！'
            }
        };
        // 表单验证
        $('#form').validate({
            rules: rules,
            messages: messages,
            submitHandler: function(form) {
                alert('表单验证通过！');
                form.submit();
            }
        });
    });
</script>

使用方法说明

引入jQuery、jQuery Validation 插件的 JS 文件；
在 HTML 中编写表单；
在 JavaScript 中定义验证规则和提示信息；
使用 $(form).validate() 方法对表单进行验证。

三、jQuery Form插件是什么？

jQuery Form 插件是一个处理表单的 jQuery 插件。它提供了一个简单的方式来使用 AJAX 方式提交表单数据，并提供了所有的常用特性，如表单提交前的验证、表单数据的序列化等等。

四、jQuery Form插件中常见的方法和使用方式

4.1 常见的方法

在 jQuery Form 插件中，有很多常见的方法，例如：

ajaxSubmit()：提交表单；
ajaxForm()：提交表单，并在提交前对表单进行验证；
resetForm()：重置表单；
clearForm()：清空表单。

4.2 使用方式

示例1：基本使用方法

<form id="form" action="server.php" method="post">
    <div>
        <label for="name">名称：</label>
        <input type="text" id="name" name="name">
    </div>
    <div>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email">
    </div>
    <button type="button" id="submit-btn">提交</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
    // 使用 jQuery Form 提交表单数据
    $(document).ready(function() {
        $('#submit-btn').click(function() {
            $('#form').ajaxSubmit({
                success: function(result) {
                    console.log(result);
                    alert(result.msg);
                }
            });
        });
    });
</script>

示例2：在提交前进行表单验证

<form id="form" action="server.php" method="post">
    <div>
        <label for="name">名称：</label>
        <input type="text" id="name" name="name">
    </div>
    <div>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email">
    </div>
    <button type="submit" id="submit-btn">提交</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
    // 使用 jQuery Validation 插件对表单进行验证
    $('#form').validate({
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                success: function(result) {
                    console.log(result);
                    alert(result.msg);
                }
            });
        }
    });
</script>