jquery.validate-表单验证插件的使用示例

最新推荐文章于 2018-07-19 06:21:55 发布

vcxiaohan2

最新推荐文章于 2018-07-19 06:21:55 发布

阅读量646

点赞数

分类专栏： jQuery插件

本文链接：https://blog.csdn.net/u011500781/article/details/54017836

版权

jQuery插件专栏收录该内容

29 篇文章 0 订阅

订阅专栏

请在这里查看示例 ☞ validate示例

示例包含

验证错误时，显示红色错误提示
自定义验证规则
引入中文错误提示
重置表单需要执行2句话

源码示例

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>  
    <title>demo</title>  
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/messages_zh.min.js"></script>

    <style>  
        * {  
            margin: 0;   
            padding: 0;  
        }  
        body, html {  
            width: 100%;  
            height: 100%;
        }  
        .red {
            color: red;
        } 
        .green {
            color: green;
        }
    </style>  
</head>  
<body>
    <form id="form">
        <div>
            <input type="text" name="a" />
        </div>
        <div>
            <input type="submit" value="提交">
            <input class="reset" type="button" value="重置">
        </div>
    </form>
</body>  
<script>  
    $(function() {
        var validator = $('#form').validate({
            submitHandler:function(form){
                $('body').append('表单验证成功，发送了一个请求');
            },
            rules: {
                a: {
                    required: true,
                    isEven: true,// 使用自定义的验证规则
                },
            },
            messages: {
                a: {
                    required: '<div><span class="red">*</span><span>此项必填</span></div>',
                    isEven: '<div><span class="red">*</span><span>不是偶数</span></div>',
                },
            },
            // 验证成功后的回调
            success: function(label) {
                label.html('<div><span class="green">*</span><span>通过验证</span></div>');
            }
        });

        // 自定义验证
        jQuery.validator.addMethod('isEven', function(value, element) {   
            return this.optional(element) || !(value%2);
        }, '请输入一个偶数');

        // 重置表单
        $(".reset").click(function() {
            validator.resetForm();// 插件方法-删除错误提示
            $('#form')[0].reset();// 原生方法-清空输入内容
        });



    });



</script>  
</html>