其他分享
首页 > 其他分享> > amazeUI重复使用一个表单校验

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