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)$)/; 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('
')); } } 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('至少有一个单选按钮被选中'); } 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('至少要有一个多选按钮被选中'); } 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); });