jquery validation用法

不念不忘少年蓝@ 2023-03-03 13:25 5阅读 0赞

文档地址

> https://jqueryvalidation.org/documentation/

$(function () {
        //jquery validate
        $('#form1').validate({
            rules: {
                groupName: {
                    required: true,
                    minlength: 5,
                    maxlength: 30,
                    checkName: true
                }
            },
            messages: {
                groupName: {
                    required: "不能为空",
                    minlength: "最短5字符",
                    maxlength: "最长30个字符"
                },
                bizName: {
                    required: "不能为空",
                    minlength: "最短5字符",
                    maxlength: "最长30个字符"
                }
            },
            //失焦校验
            onfocusout: function (element) {
                $(element).valid();
            },
            //校验失败后错误追加提示的dom类型
            errorElement: 'div',
            errorPlacement: function (error, element) {
                //错误的class
                error.addClass('invalid-feedback col-sm-1');
                //拼接错误信息的位置，以下代码是找最近的 class为form-group 的元素后进行接入错误信息
                element.closest('.form-group').append(error);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
    }
    //自定义正则表达示验证方法
    $.validator.addMethod("checkName",function(value,element,params){
    			var checkName = /^[A-Za-z0-9\-_]+$/;
    			return this.optional(element)||(checkName.test(value));
    		},"只能包含大小写英文字符，数字，下划线，中划线！");

手动调用校验

$("#form").valid()

在失焦时对元素进行校验

$("#form").validate({
        onfocusout: function(element){
            $(element).valid();
        }
    });