jquery validate插件内置了常用输入框格式的校验，同时支持添加自定义校验；
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>
</head>
<body>
<form id="passengerForm" class="form-horizontal form-update">
<div class="form-group">
<label class="col-sm-3 control-label"><span style="color: red;">*</span>姓名</label>
<div class="col-sm-3">
<input type="text" class="input-sm form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-sm-4">
<button type="button" data-style="zoom-in" onclick="save()" class="ladda-button btn btn-w-m btn-primary btn-update-footer" id="btn_save">校验</button>
</div>
</div>
</form>
</body>
<script type="text/javascript">
function save(){
$('#passengerForm').valid();
}
</script>
</html>
1.git.gif
引入需要的JS文件后，在input 控件中添加required属性即可实现非空校验。
自定义提示文字颜色
查看页面源码发现，提示语有error样式，所以我们在页面中添加error样式即可实现提示语的样式自定义。
image.png
在页面中添加如下样式后，提示语变成了红色
<style type="text/css">
.error {
color: red;
}
</style>
1.git.gif
设定错误提示语位置
插件默认放置错误提示语位置为 input父元素中，我们可以使用如下属性来自定义
//default
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
结果
<div class="form-group">
<label class="col-sm-3 control-label"><span style="color: red;">*</span>姓名</label>
<div class="col-sm-3">
<input type="text" class="input-sm form-control error" required="">
<label id="-error" class="error" for="">This field is required.</label>
</div>
</div>
修改错误信息位置
function save() {
$('#passengerForm').validate({
errorPlacement: function(error, element) {
error.appendTo(element.parents(".form-group"));
}
});
$('#passengerForm').valid();
}
结果
<div class="form-group">
<label class="col-sm-3 control-label"><span style="color: red;">*</span>姓名</label>
<div class="col-sm-3">
<input type="text" class="input-sm form-control error" required="">
</div>
<label id="-error" class="error" for="">This field is required.</label>
</div>
1.git.gif
自定义提示语
插件提供了中文素材，引用即可，当然你也可以手动修改其中的内容；
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
或者
$.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} 的数值")
});
1.git.gif
自定义校验
$.validator.addMethod("containsChar",function(value,element,params){
return value.indexOf(params[0])!=-1||value.indexOf(params[1])!=-1||value.indexOf(params[1])!=-1;
},"必须包含{0}");
1.git.gif
到此为止，咱们知道了jquery validate可以对输入框进行一些校验，可以自定义错误提示信息、颜色和位置。
下面咱们看看插件自带了哪些常用格式校验：
image.png
网友评论