效果：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>表單提交驗證</title>
<link rel="stylesheet" href="css/amazeui.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/amazeui.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<form id="form2" class="am-form am-form-horizontal">
<div id="panel2" style="margin-top:5px">
<div class="am-form-group am-u-sm-12" style="margin-top:5px">
<div class="am-u-sm-6">
<label class="am-u-sm-4 am-form-label"><span style="color: #ff0000;">*</span>姓名:</label>
<div class="am-u-sm-8">
<!-- 驗證非空 -->
<input id="deptname" class="am-form-field" maxlength=10 placeholder="姓名" style="width:300px" pattern="^[\s\S]*.*[^\s][\s\S]*$"
data-validation-message="姓名" required></input>
</div>
</div>
</div>
<div class="am-form-group am-u-sm-12" style="margin-top:5px">
<div class="am-u-sm-6">
<label class="am-u-sm-4 am-form-label"><span style="color: #ff0000;">*</span>年齡:</label>
<div class="am-u-sm-8">
<!-- 驗證為正整數 -->
<input id="sortid" class="am-form-field" placeholder="請輸入正整數" pattern="^0$|^\+?[1-9]\d*$" maxlength="9" style="width: 300px"
data-validation-message="年齡" required></input>
</div>
</div>
</div>
<div class="form-actions" style=" padding-top:1%;text-align: center;">
<button type="submit" class="am-btn am-btn-warning">保存</button>
</div>
</form>
<script type="text/javascript">
//驗證提醒
$(function() {
$('#form2').validator({ //表單驗證初始化
onValid: function(validity) {
$(validity.field).closest('.am-form-group').find('.am-alert').hide();
},
onInValid: function(validity) {
var $field = $(validity.field);
var $group = $field.closest('.am-form-group');//提示語將追加在此類后 var $alert = $group.find('.am-alert');
// 使用自定義的提示信息 或 插件內置的提示信息
var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
if (!$alert.length) {
$alert = $('<div class="am-alert am-alert-danger am-u-sm-8"></div>').hide().appendTo($group);
}
$alert.html(msg).show();
},
submit: function() {
formValidity = this.isFormValid();
if (formValidity) {
//輸入框校驗
if ($('#deptname').val() == "1") { //二次驗證
alert('請正確填寫姓名！');
return;
}
alert('保存成功');
}
}
});
});
</script>
</body>
</html>
附，兩表單共用同一驗證：將表單初始化定義為一個函數，點擊不同表單時銷毀表單驗證，重新初始化並隱藏錯誤提示語
$('#form2').validator('destroy') —— 銷毀表單驗證
$('.am-form-group').find('.am-alert').hide();——隱藏錯誤提示
附，自定義驗證 參考：https://blog.csdn.net/ltllml44/article/details/52041109?locationNum=4&fps=1
html：
···
<input type="number" class="am-u-sm-12" placeholder="商品總數量 " maxlength="9" id="goodsnum" data-validation-message="請輸入商品總數量" pattern="^[0-9]*[1-9][0-9]*$" required /> <input type="number" class="am-u-sm-12 js-sync-validate" placeholder="初始數量" maxlength="9" id="goodsinit" data-validation-message="初始數量需小於等於商品總數量"/>
···
js:
$(function() {
$('#form').validator({
validate: function(validity) {//自定義驗證必須要放到validate中處理 //自定義函數處理
var v = $(validity.field).val(); //用於判斷如果當前對象是類.js-sync-validate的時候執行 if ($(validity.field).is('.js-sync-validate')) {
if($('#goodsnum').val() <= $('#goodsinit').val()){ validity.valid = false; return validity; }else{ validity.valid = true; validity.typeMismatch=true; return val } }
}, onValid : function(validity) {
$(validity.field).closest('.am-form-group').find('.am-alert').hide(); }, onInValid : function(validity) { var $field = $(validity.field); var $group = $field.closest('.am-form-group'); var $alert = $group.find('.am-alert'); // 使用自定義的提示信息 或 插件內置的提示信息 var msg = $field.data('validationMessage') || this.getValidationMessage(validity); if (!$alert.length) { $alert = $('<div class="am-alert am-alert-danger am-u-sm-7"></div>').hide().appendTo($group); } $alert.html(msg).show(); }, submit : function() { var formValidity = this.isFormValid() && validate.valid ; if (formValidity) { console.log('已保存'); } } }); });