oa/public/static/assets/mbui/module/form.js

mbui.define(['layer'], function (exports) {
	let layer = mbui.layer;
	var form = function (options) {
		// 默认配置选项
		var settings = $.extend({
			target: '#formBox',
			verify: {
				required: function (value) {
					if (!/[\S]+/.test(value)) {
						return '必填项不能为空';
					}
				},
				phone: function (value) {
					var EXP = /^1\d{10}$/;
					if (value && !EXP.test(value)) {
						return '手机号格式不正确';
					}
				},
				email: function (value) {
					var EXP = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
					if (value && !EXP.test(value)) {
						return '邮箱格式不正确';
					}
				},
				url: function (value) {
					var EXP = /^(#|(http(s?)):\/\/|\/\/)[^\s]+\.[^\s]+$/;
					if (value && !EXP.test(value)) {
						return '链接格式不正确';
					}
				},
				number: function (value) {
					if (value && isNaN(value)) {
						return '只能填写数字';
					}
				},
				date: function (value) {
					var EXP = /^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/;
					if (value && !EXP.test(value)) {
						return '日期格式不正确';
					}
				},
				identity: function (value) {
					//var EXP = /(^\d{15}$)|(^\d{17}(x|X|\d)$)/;
					var EXP = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X|x)$/;
					if (value && !EXP.test(value)) {
						return '身份证号格式不正确';
					}
				}
			},
			errorClass: 'mbui-form-danger',
			successClass: 'mbui-form-success',
			errorMessageContainer: null, // 可以指定错误信息容器，例如：'div#error-message'
			submit: function (data) {
				console.log(data);
			}
		}, options);

		var formBox = $(settings.target);
		formBox.on('submit', function (event) {
			event.preventDefault();
			var isValid = true; //校验判断标识
			var field = {};  // 字段集合
			formBox.find('input,select,textarea').each(function () {
				if (isValid == false) {
					return false;
				}
				var $this = $(this),
					val = $this.val(),
					rule = $this.data('verify') || '',
					rules = rule.split('|'),
					errMsg = '';
				$this.removeClass(settings.errorClass); // 移除警示样式

				for (var i = 0; i < rules.length; i++) {
					var ruleName = rules[i],
						ruleFunc = settings.verify[ruleName];
					if (ruleFunc) {
						errMsg = ruleFunc(val);
						if (errMsg) {
							// 获取自定义必填项提示文本
							if (ruleName === 'required') {
								errMsg = $this.data('errortips') || errMsg;
							}
							isValid = false;
							break;
						}
					}
				}
				if (!isValid) {
					layer.error(errMsg);
					$this.removeClass(settings.successClass).addClass(settings.errorClass).focus();
					if (settings.errorMessageContainer) {
						$(settings.errorMessageContainer).text(errors.join('<br/>'));
					}
				} else {
					$this.removeClass(settings.errorClass).addClass(settings.successClass);
				}
			});
			//校验radio是否选中
			formBox.find('[data-verify="radio"]').each(function () {
				if (isValid == false) {
					return false;
				}
				var $this = $(this),errMsg = '至少要有一个单选按钮被选中';
				if ($this.find('[type="radio"]').is(':checked')) {
					console.log(errMsg);
				} else {
					errMsg = $this.data('errortips') || errMsg;
					isValid = false;
				}
				if (!isValid) {
					layer.error(errMsg);
				}
			});
			formBox.find('[data-verify="checkbox"]').each(function () {
				if (isValid == false) {
					return false;
				}
				var $this = $(this),errMsg = '至少要有一个多选按钮被选中';
				if ($this.find('[type="checkbox"]').is(':checked')) {
					console.log(errMsg);
				} else {
					errMsg = $this.data('errortips') || errMsg;
					isValid = false;
				}
				if (!isValid) {
					layer.error(errMsg);
				}
			});
			if (isValid) {
				// 如果所有验证都通过，则提交表单
				settings.submit(form.getValue(settings.target));
			}
		});
	};

	// 取值
	form.getValue = function (itemForm) {
		var nameIndex = {} // 数组 name 索引
			, field = {}
			, fieldElem = $(itemForm).find('input,select,textarea') // 获取所有表单域

		$.each(fieldElem, function (_, item) {
			var othis = $(this), init_name; // 初始 name

			item.name = (item.name || '').replace(/^\s*|\s*&/, '');
			if (!item.name) return;

			// 用于支持数组 name
			if (/^.*\[\]$/.test(item.name)) {
				var key = item.name.match(/^(.*)\[\]$/g)[0];
				nameIndex[key] = nameIndex[key] | 0;
				init_name = item.name.replace(/^(.*)\[\]$/, '$1[' + (nameIndex[key]++) + ']');
			}
			// 复选框和单选框未选中，不记录字段     
			if (/^(checkbox|radio)$/.test(item.type) && !item.checked) return;
			field[init_name || item.name] = item.value;
		});
		return field;
	};
	// 输出接口
	exports('form', form);
});