标签：group 校验 validity alert field nbsp var 表单 amazeUI

需求：需要一个表单不断的添加奖品信息
问题：在第一次表单后，只清空对象数据，不刷新页面（提高体验），会存在第二次提交时，不校验表单数据就可以提交。
思路：提交后销毁校验，然后再初始化。
文档链接

1、HTML

<form id="questForm" name="questForm" class="form-horizontal">
				<div class="am-panel-bd" style="padding: 15px 0px;">
					<div class="am-g am-form-group" style="margin-top:5px">
						<div class="am-u-sm-3">
							<label><span style="color: #ff0000;">*</span>问卷内容:</label>
						</div>
						<div class="am-u-sm-9">
							<textarea rows="4" cols="6" class="am-form-field am-u-sm-9"
								data-validation-message="自定义问卷内容" placeholder="输入自定义问卷类容"
								ng-model="quest.contents" required />
						</div>
					</div>
					<br />
					<div class="am-g am-form-group" style="margin-top:5px">
						<div class="am-u-sm-3">
							<label><span style="color: #ff0000;">*</span>排序号:</label>
						</div>
						<div class="am-u-sm-9">
							<input type="text" class="am-form-field am-u-sm-9"
								data-validation-message="最小人数为正整数" pattern="^[1-9]\d*$" required
								placeholder="最小人数" ng-model="quest.sort" />
						</div>
					</div>
					<br />
					<div class="am-g am-form-group" style="margin-top:5px">
						<div class="am-u-sm-3">
							<label><span style="color: #ff0000;">*</span>状态:</label>
						</div>
						<div class="am-u-sm-9">
							<select class="am-form-field" ng-model="quest.state"
								ng-options="m.code as m.value for m in stateList"></select>
						</div>
					</div>
				</div>
				<div class="am-panel-footer">
					<button type="submit" class="am-btn am-btn-warning">保&nbsp;存</button>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<button data-am-modal-close class="am-btn am-btn-secondary"
						style="color: #fff;">取&nbsp;消</button>
				</div>
			</form>

2、js

	$(function() {
		$('#questForm').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-7"></div>').hide().appendTo($group);
				}
				$alert.html(msg).show();
			},
			submit : function() {
				var formValidity = this.isFormValid();
				if (formValidity) {
					$scope.questsave();//调用后台接口
					var options = this.options;
					$("#questForm").validator('destroy');//销毁
					$('#questForm').validator(options);//初始化
				}
			}
		});
	});

标签：group,校验,validity,alert,field,nbsp,var,表单,amazeUI
来源： https://blog.csdn.net/qq_44872773/article/details/120457658

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。