jquery validation用法

文档地址

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();
    }
});