場景

效果

介紹

jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡單，同時提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求。該插件捆綁了一套有用的驗(yàn)證方法，包括 URL 和電子郵件驗(yàn)證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認(rèn)使用英語作為錯誤信息，且已翻譯成其他 37 種語言。

官方網(wǎng)站：

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

實(shí)現(xiàn)

引入js文件

使用官網(wǎng)最新的CDN:

或者將其下載并引入

js文件以及中文語言包下載：

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

默認(rèn)校驗(yàn)規(guī)則

序號規(guī)則描述

1	required:true	必須輸入的字段。
2	remote:"check.php"	使用 ajax 方法調(diào)用 check.php 驗(yàn)證輸入值。
3	email:true	必須輸入正確格式的電子郵件。
4	url:true	必須輸入正確格式的網(wǎng)址。
5	date:true	必須輸入正確格式的日期。日期校驗(yàn) ie6 出錯，慎用。
6	dateISO:true	必須輸入正確格式的日期（ISO），例如：2009-06-23，1998/01/22。只驗(yàn)證格式，不驗(yàn)證有效性。
7	number:true	必須輸入合法的數(shù)字（負(fù)數(shù)，小數(shù)）。
8	digits:true	必須輸入整數(shù)。
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。

默認(rèn)提示

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}." ) }

示例代碼

// 初始化架構(gòu)驗(yàn)證 function initOrgAddFormValidate(op) {// 架構(gòu)添加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: "請輸入架構(gòu)名稱",remote:"架構(gòu)名稱重復(fù)或不可用，請更換后重新嘗試！"}},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 ? "權(quán)限編輯成功" : "sameLevel" == op ? "添加同級權(quán)限成功" : "添加下級權(quán)限成功",confirmButtonColor: "#1ab394",})}else{swal({type: 'error',title: '失敗提示:',text: "editAction" == op ? "權(quán)限編輯失敗" : "sameLevel" == op ? "添加同級權(quán)限失敗" : "添加下級權(quán)限失敗",confirmButtonColor: "#1ab394",})}}).fail(function (err) {swal({type: 'fail',title: '異常提示:',text:? "editAction" == op ? "權(quán)限編輯保存異常" : "sameLevel" == op ? "添加同級權(quán)限保存異常" : "添加下級權(quán)限保存異常",confirmButtonColor: "#1ab394",})});}}); }

其中后他驗(yàn)證部分代碼：

?@Description("架構(gòu)名稱字段重復(fù)性驗(yàn)證")@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;}}

?

總結(jié)

以上是生活随笔為你收集整理的Jquery中使用Validate插件使表单验证更加简单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。