JQuery Validation + JQuery Validation Bootstrap Tooltip
柴英博
前言
本片文章主要介绍JQuery的两个非常流行的插件，分别是JQuery Validation和JQuery Validation Bootstrap Tootip。JQuery Validation是一款非常流行的前端校验插件，除了为我们提供了基础的校验规则外还能够让开发者自定义校验规则。JQuery Validation Bootstrap Tooltip插件主要弥补JQuery Validation插件的在错误信息提醒方面的不足，以Tooltip的方式提示错误信息，能够让应用程序为用户提供更好的用户体验。
前端引用
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- JQuery Validation 表单验证插件 -->
<script th:src="@{/js/jquery.validate.min.js}"></script>
<script th:src="@{/js/jquery.validate.extend.js}"></script>
<!-- 中文信息提示包 -->
<script th:src="@{/js/messages_zh.min.js}"></script>
<!-- 扩展校验规则-->
<script th:src="@{/js/additional-methods.min.js}"></script>
<!-- JQuery Validation Bootstrap Tooltip 错误提示插件，需要引入jQuery, jQuery Validation, Twitter Bootstrap -->
<script th:src="@{/js/jquery-validate.bootstrap-tooltip.min.js}"></script>
基础格式
<form id="formId">
...
<input name="phoneNumber" type="text" placeholder="手机号" />
...
</form>
$("#formId").validate({
// 取消在用户输入过程中的实时校验
onkeyup: false,
// 在一个元素获得焦点时，去除元素的错误样式和提示信息
focusCleanup: true,
rules: {
phoneNumber: {
required: true,
// 可自定义校验规则
isMobile: true
}
},
messages: {
phoneNumber: {
required: "请输入您的手机号",
isMobile: "手机号格式错误"
}
},
// 以ToolTip的形式来提示错误信息
tooltip_options: {
phoneNumber: {
placement: 'left'
}
},
submitHandler: function(form) {
// 等待后台处理数据的时候，有时候为了更好的用户体验，要弹出正在加载的图标，在数据返回后关闭
$.modal.loading();
var phoneNumber = $("input[name='phoneNumber']").val().trim();
// ajax异步请求后台数据
$.ajax({
type: "post",
url: "url",
data: {
"phoneNumber": phoneNumber
},
success: function(data) {
if (data.code == 0) {
// 前端重定向
top.location.href = 'url'
} else {
$.modal.closeLoading();
$.modal.msg(data.msg);
}
}
})
}
})
JQuery Validation 提供的标准校验方法
<form>
...
<input id="formId" name="formName" ... />
...
</form>
rules : {
fieldName : {
// 可以是true or false，如果是checkBox可以校验是否选中，还可以使用方法（方法返回值为true or false)
requried : true | "#checkBoxId:checked" | function() {} ,
// number, 最小长度
minlength : 3,
// Number, 最大长度10
maxlength: 10,
// 文本框中的字符长度，复选框的选择个数，下拉框的选择个数，在2到6之间
rangelength: [2, 6]，
// 最小值13
min: 13,
// 最大值23
max: 23,
// 大小在13到23之间
range: [13, 23],
// 10的倍数
step: 10,
// 合法的email格式
email: true,
// 合法的url格式
url: true,
// 合法的日期格式（在2.0.0将被废除，因为在不同的浏览器和地区，他的表现差强人意）
date: true,
// 合法的ISO日期格式, 只验证格式，不验证有效性
dateISO: true,
// 合法的十进制数(负数，小数）
number: true,
// 整数
digits: true
// 和另外一个值相等
equalTo: "#fieldId"
}
}
rules : {
fieldName : {
// 调用远程接口，通过远程接口返回的数据判断返回true还是false
remote : {
url : prefix + "/checkDeviceNameUnique",
type : "post",
data : {
fieldName : function() {
return $("input[name='fieldName']").val().trim();
}
},
dataFilter : function (data, type) {
if (data.code == 0) return true;
return false;
}
}
}
}
Additional Methods
引入扩展校验规则
<!-- 中文信息提示包 -->
<script th:src="@{/js/messages_zh.min.js}"></script>
rules : {
fieldName : {
// mime-types, 用，分割，默认image/*
accept: "audio/*",
// 合法的信用卡格式
creditcard: true,
// 文件扩展名，用| or ,分割，默认png|jpeg|gif,
extension: "xls|csv"
// 只允许输入字母，数字，下划线
alphanumeric: true,
// 正整数
integer: true,
// 合法的ipv4地址
ipv4: true,
// 合法的ipv6地址
ipv6: true,
// 只输入字母
lettersonly: true,
// 只有字母和标点符号
letterswithbasicpunc: true,
// 没有空格
nowhitespace: true,
// 正则校验
pattern: "RegExp",
// 合法的时间，在00:00 到 23：59之间
time: true,
// 12小时制时间，带有am/pm后缀
time12h: true,
}
}
自定义校验规则
$.validator.addMethod("isMobile", function(value, element) {
var mobileReg = /^1(3|4|5|7|8|9)\d{9}$/;
return this.optional(element) || mobileReg.test(value);
}, "手机号码格式错误");
注意事项
- 如果在表单中存在两个按钮，例如“发送验证码”和“提交”按钮，一般把发送验证码改写为“链接”的形式，这样就可以避免点击“发送验证码”按钮触发表单校验，而只在点击“提交”按钮才进行表单校验。
链接
JQuery Validation
JQuery Validation Bootstrap Tooltip
1.13.0
jquery.validate.js
jquery.validate.min.js
additional-methods.js
additional-methods.min.js
1.19.1
jquery.validate.js
jquery.validate.min.js
additional-methods.js
additional-methods.min.js
类似资料：