场景
效果
介绍
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。
官方网站：
/
Github:
/jquery-validation/jquery-validation/releases/tag/1.19.0
菜鸟教程：
/jquery/jquery-plugin-validate.html
实现
引入js文件
使用官网最新的CDN:
或者将其下载并引入
js文件以及中文语言包下载：
/download/badao_liumang_qizhi/11225659
默认校验规则
默认提示
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)@ResponseBodypublic 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;}}
