Jquery中使用Validate插件使表单验证更加简单

场景

效果

介绍

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

官方网站：

https://jqueryvalidation.org/

Github:

https://github.com/jquery-validation/jquery-validation/releases/tag/1.19.0

菜鸟教程：

https://www.runoob.com/jquery/jquery-plugin-validate.html

实现

引入js文件

使用官网最新的CDN:

或者将其下载并引入

js文件以及中文语言包下载：

https://download.csdn.net/download/badao_liumang_qizhi/11225659

默认校验规则

序号	规则	描述
1	required:true	必须输入的字段。
2	remote:"check.php"	使用 ajax 方法调用 check.php 验证输入值。
3	email:true	必须输入正确格式的电子邮件。
4	url:true	必须输入正确格式的网址。
5	date:true	必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6	dateISO:true	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7	number:true	必须输入合法的数字（负数，小数）。
8	digits:true	必须输入整数。
9	creditcard:	必须输入合法的信用卡号。
10	equalTo:"#field"	输入值必须和 #field 相同。
11	accept:	输入拥有合法后缀名的字符串（上传文件的后缀）。
12	maxlength:5	输入长度最多是 5 的字符串（汉字算一个字符）。
13	minlength:10	输入长度最小是 10 的字符串（汉字算一个字符）。
14	rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15	range:[5,10]	输入值必须介于 5 和 10 之间。
16	max:5	输入值不能大于 5。
17	min:10	输入值不能小于 10。

默认提示

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date ( ISO ).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    maxlength: $.validator.format( "Please enter no more than {0} characters." ),
    minlength: $.validator.format( "Please enter at least {0} characters." ),
    rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
    range: $.validator.format( "Please enter a value between {0} and {1}." ),
    max: $.validator.format( "Please enter a value less than or equal to {0}." ),
    min: $.validator.format( "Please enter a value greater than or equal to {0}." )
}

示例代码

// 初始化架构验证
function initOrgAddFormValidate(op) {
    // 架构添加form提交操作
    $("#orgAdd").validate({
        rules: {
            text: {
                required: true,
                remote: {
                    url: '/sysEnterpriseOrg/doValidateByOrgName.do',
                    type: 'POST',
                    data: {
                        name: function () {
                            return $("#orgAdd input[name='text']").val();
                        },
                        id: function () {
                            return $("#orgAdd input[name='id']").val();
                        },
                        op: function () {
                            return op;
                        }
                    }
                }
            }
        },
        messages: {
            name: {
                required: "请输入架构名称",
                remote:"架构名称重复或不可用，请更换后重新尝试！"
            }
        },
        submitHandler:function(form){
            $.post("/sysEnterpriseOrg/doAddSingleOrg.do",$("#orgAdd").serialize()).done(function (res) {
                if(res.status){
                    $("#orgAddModel").modal('hide');
                    $('#org_tree').data('jstree', false).empty();
                    initJsTree();
                    swal({
                        type: 'success',
                        title: '成功提示:',
                        text: "editAction" == op ? "权限编辑成功" : "sameLevel" == op ? "添加同级权限成功" : "添加下级权限成功",
                        confirmButtonColor: "#1ab394",
                    })
                }else{
                    swal({
                        type: 'error',
                        title: '失败提示:',
                        text: "editAction" == op ? "权限编辑失败" : "sameLevel" == op ? "添加同级权限失败" : "添加下级权限失败",
                        confirmButtonColor: "#1ab394",
                    })
                }

            }).fail(function (err) {
                swal({
                    type: 'fail',
                    title: '异常提示:',
                    text:  "editAction" == op ? "权限编辑保存异常" : "sameLevel" == op ? "添加同级权限保存异常" : "添加下级权限保存异常",
                    confirmButtonColor: "#1ab394",
                })
            });

        }
    });
}

其中后他验证部分代码：

 @Description("架构名称字段重复性验证")
    @RequestMapping(value = "/doValidateByOrgName.do", method = RequestMethod.POST)
    @ResponseBody
    public boolean doValidateByPermissionName(String name, String op, String id){
        // 前端条件判断
        if(StringUtils.isBlank(name))
            return false;
        try {
            QueryWrapper queryWrapper = new QueryWrapper<SysEnterpriseOrg>().eq("text",name);
            if("editAction".equals(op))
                queryWrapper.ne("id",id);
            int count = this.mSysEnterpriseOrgService.count(queryWrapper);
            return 0==count?true:false;
        } catch (Exception e) {
            return false;
        }
    }