jquery validate插件內(nèi)置了常用輸入框格式的校驗(yàn)，同時(shí)支持添加自定義校驗(yàn)；
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link 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">校驗(yàn)</button>
</div>
</div>
</form>
</body>
<script type="text/javascript">
function save(){
$('#passengerForm').valid();
}
</script>
</html>
1.git.gif
引入需要的JS文件后，在input 控件中添加required屬性即可實(shí)現(xiàn)非空校驗(yàn)。
自定義提示文字顏色
查看頁(yè)面源碼發(fā)現(xiàn)，提示語(yǔ)有error樣式，所以我們?cè)陧?yè)面中添加error樣式即可實(shí)現(xiàn)提示語(yǔ)的樣式自定義。
image.png
在頁(yè)面中添加如下樣式后，提示語(yǔ)變成了紅色
<style type="text/css">
.error {
color: red;
}
</style>
1.git.gif
設(shè)定錯(cuò)誤提示語(yǔ)位置
插件默認(rèn)放置錯(cuò)誤提示語(yǔ)位置為 input父元素中，我們可以使用如下屬性來(lái)自定義
//default
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
結(jié)果
<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>
修改錯(cuò)誤信息位置
function save() {
$('#passengerForm').validate({
errorPlacement: function(error, element) {
error.appendTo(element.parents(".form-group"));
}
});
$('#passengerForm').valid();
}
結(jié)果
<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
自定義提示語(yǔ)
插件提供了中文素材，引用即可，當(dāng)然你也可以手動(dòng)修改其中的內(nèi)容；
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
或者
$.extend($.validator.messages, {
required: "這是必填字段",
remote: "請(qǐng)修正此字段",
email: "請(qǐng)輸入有效的電子郵件地址",
url: "請(qǐng)輸入有效的網(wǎng)址",
date: "請(qǐng)輸入有效的日期",
dateISO: "請(qǐng)輸入有效的日期 (YYYY-MM-DD)",
number: "請(qǐng)輸入有效的數(shù)字",
digits: "只能輸入數(shù)字",
creditcard: "請(qǐng)輸入有效的信用卡號(hào)碼",
equalTo: "你的輸入不相同",
extension: "請(qǐng)輸入有效的后綴",
maxlength: $.validator.format("最多可以輸入 {0} 個(gè)字符"),
minlength: $.validator.format("最少要輸入 {0} 個(gè)字符"),
rangelength: $.validator.format("請(qǐng)輸入長(zhǎng)度在 {0} 到 {1} 之間的字符串"),
range: $.validator.format("請(qǐng)輸入范圍在 {0} 到 {1} 之間的數(shù)值"),
max: $.validator.format("請(qǐng)輸入不大于 {0} 的數(shù)值"),
min: $.validator.format("請(qǐng)輸入不小于 {0} 的數(shù)值")
});
1.git.gif
自定義校驗(yàn)
$.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可以對(duì)輸入框進(jìn)行一些校驗(yàn)，可以自定義錯(cuò)誤提示信息、顏色和位置。
下面咱們看看插件自帶了哪些常用格式校驗(yàn)：
image.png
