jQuery Validation使用教程

1、导入js库

jQuery Validation是基于jQuery为核心的，所以必须先导入jQuery核心js文件

/js/bootstrap/jquery-3.2.1.min.js">

登录后复制

接着导入jQuery Validation核心js

/js/jqueryValidation/jquery.validate.min.js">

登录后复制

导入中文提示信息js

/js/jqueryValidation/messages_zh.js">

登录后复制

2、默认校验规则

3、默认提示

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

登录后复制

由于已经导入了中文信息提示包，所以默认提示信息为：

$.extend( $.validator.messages, {    required: "这是必填字段",    remote: "请修正此字段",    email: "请输入有效的电子邮件地址",    url: "请输入有效的网址",    date: "请输入有效的日期",    dateISO: "请输入有效的日期 (YYYY-MM-DD)",    number: "请输入有效的数字",    digits: "只能输入数字",    creditcard: "请输入有效的信用卡号码",    equalTo: "你的输入不相同",    extension: "请输入有效的后缀",    maxlength: $.validator.format( "最多可以输入 {0} 个字符" ),    minlength: $.validator.format( "最少要输入 {0} 个字符" ),    rangelength: $.validator.format( "请输入长度在 {0} 到 {1} 之间的字符串" ),    range: $.validator.format( "请输入范围在 {0} 到 {1} 之间的数值" ),    max: $.validator.format( "请输入不大于 {0} 的数值" ),    min: $.validator.format( "请输入不小于 {0} 的数值" )} );

登录后复制

4、使用方式

①将校验规则写到控件中

本文讲解了jQuery Validation使用教程 ，更多相关内容请关注【创想鸟】。

相关推荐：

gulp模块的方法

gulp模块的方法

gulp模块的方法

以上就是jQuery Validation使用教程的详细内容，更多请关注【创想鸟】其它相关文章！