Form.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425
  1. import '../jquery-form/jquery.form.min';
  2. let formCallbacks = {
  3. before: [], success: [], error: []
  4. };
  5. class Form {
  6. constructor(options) {
  7. let _this = this;
  8. _this.options = $.extend({
  9. // 表单的 jquery 对象或者css选择器
  10. form: null,
  11. // 开启表单验证
  12. validate: false,
  13. // 确认弹窗
  14. confirm: {title: null, content: null},
  15. // 是否使用Toastr展示字段验证错误信息
  16. validationErrorToastr: false,
  17. // 表单错误信息class
  18. errorClass: 'has-error',
  19. // 表单错误信息容器选择器
  20. errorContainerSelector: '.with-errors',
  21. // 表单组css选择器
  22. groupSelector: '.form-group,.form-label-group,.form-field',
  23. // tab表单css选择器
  24. tabSelector: '.tab-pane',
  25. // 错误信息模板
  26. errorTemplate: '<label class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {message}</label><br/>',
  27. // 是否允许跳转
  28. redirect: true,
  29. // 自动移除表单错误信息
  30. autoRemoveError: true,
  31. // 表单提交之前事件监听,返回false可以中止表单继续提交
  32. before: function () {},
  33. // 表单提交之后事件监听,返回false可以中止后续逻辑
  34. after: function () {},
  35. // 成功事件,返回false可以中止后续逻辑
  36. success: function () {},
  37. // 失败事件,返回false可以中止后续逻辑
  38. error: function () {},
  39. }, options);
  40. _this.originalValues = {};
  41. _this.$form = $(_this.options.form).first();
  42. _this._errColumns = {};
  43. _this.init();
  44. }
  45. init() {
  46. let _this = this;
  47. let confirm = _this.options.confirm;
  48. if (! confirm.title) {
  49. return _this.submit();
  50. }
  51. Dcat.confirm(confirm.title, confirm.content, function () {
  52. _this.submit();
  53. });
  54. }
  55. submit() {
  56. let _this = this,
  57. $form = _this.$form,
  58. options = _this.options,
  59. $submitButton = $form.find('[type="submit"],.submit');
  60. // 移除所有错误信息
  61. _this.removeErrors();
  62. $form.ajaxSubmit({
  63. data: {_token: Dcat.token},
  64. beforeSubmit: function (fields, form, _opt) {
  65. if (options.before(fields, form, _opt, _this) === false) {
  66. return false;
  67. }
  68. // 触发全局事件
  69. if (fire(formCallbacks.before, fields, form, _opt, _this) === false) {
  70. return false;
  71. }
  72. // 开启表单验证
  73. if (options.validate) {
  74. $form.validator('validate');
  75. if ($form.find('.' + options.errorClass).length > 0) {
  76. return false;
  77. }
  78. }
  79. $submitButton.buttonLoading();
  80. },
  81. success: function (response) {
  82. setTimeout(function () {
  83. $submitButton.buttonLoading(false);
  84. }, 700);
  85. if (options.after(true, response, _this) === false) {
  86. return;
  87. }
  88. if (options.success(response, _this) === false) {
  89. return;
  90. }
  91. if (fire(formCallbacks.success, response, _this) === false) {
  92. return;
  93. }
  94. if (response.redirect === false || ! options.redirect) {
  95. if (response.data && response.data.then) {
  96. delete response.data['then'];
  97. delete response.data['then'];
  98. delete response.data['then'];
  99. }
  100. }
  101. Dcat.handleJsonResponse(response);
  102. },
  103. error: function (response) {
  104. $submitButton.buttonLoading(false);
  105. if (options.after(false, response, _this) === false) {
  106. return;
  107. }
  108. if (options.error(response, _this) === false) {
  109. return;
  110. }
  111. if (fire(formCallbacks.error, response, _this) === false) {
  112. return;
  113. }
  114. try {
  115. var error = JSON.parse(response.responseText),
  116. key;
  117. if (response.status != 422 || ! error || ! Dcat.helpers.isset(error, 'errors')) {
  118. let json = response.responseJSON;
  119. if (json && json.message) {
  120. return Dcat.error(json.message);
  121. }
  122. return Dcat.error(response.status + ' ' + response.statusText);
  123. }
  124. error = error.errors;
  125. for (key in error) {
  126. // 显示错误信息
  127. _this._errColumns[key] = _this.showError($form, key, error[key]);
  128. }
  129. } catch (e) {
  130. return Dcat.error(response.status + ' ' + response.statusText);
  131. }
  132. }
  133. });
  134. }
  135. // 显示错误信息
  136. showError($form, column, errors) {
  137. let _this = this,
  138. $field = _this.queryFieldByName($form, column),
  139. $group = $field.closest(_this.options.groupSelector),
  140. render = function (msg) {
  141. $group.addClass(_this.options.errorClass);
  142. if (typeof msg === 'string') {
  143. msg = [msg];
  144. }
  145. for (let j in msg) {
  146. $group.find(_this.options.errorContainerSelector).first().append(
  147. _this.options.errorTemplate.replace('{message}', msg[j])
  148. );
  149. }
  150. if (_this.options.validationErrorToastr) {
  151. Dcat.error(msg.join('<br/>'));
  152. }
  153. };
  154. queryTabTitleError(_this, $field).removeClass('d-none');
  155. // 保存字段原始数据
  156. _this.originalValues[column] = _this.getFieldValue($field);
  157. if (! $field) {
  158. if (Dcat.helpers.len(errors) && errors.length) {
  159. Dcat.error(errors.join(" \n "));
  160. }
  161. return;
  162. }
  163. render(errors);
  164. if (_this.options.autoRemoveError) {
  165. removeErrorWhenValChanged(_this, $field, column);
  166. }
  167. return $field;
  168. }
  169. // 获取字段值
  170. getFieldValue($field) {
  171. let vals = [],
  172. type = $field.attr('type'),
  173. checker = type === 'checkbox' || type === 'radio',
  174. i;
  175. for (i = 0; i < $field.length; i++) {
  176. if (checker) {
  177. vals.push($($field[i]).prop('checked'));
  178. continue;
  179. }
  180. vals.push($($field[i]).val());
  181. }
  182. return vals;
  183. }
  184. // 判断值是否改变
  185. isValueChanged($field, column) {
  186. return ! Dcat.helpers.equal(this.originalValues[column], this.getFieldValue($field));
  187. }
  188. // 获取字段jq对象
  189. queryFieldByName($form, column) {
  190. if (column.indexOf('.') !== -1) {
  191. column = column.split('.');
  192. let first = column.shift(),
  193. i,
  194. sub = '';
  195. for (i in column) {
  196. sub += '[' + column[i] + ']';
  197. }
  198. column = first + sub;
  199. }
  200. var $c = $form.find('[name="' + column + '"]');
  201. if (!$c.length) $c = $form.find('[name="' + column + '[]"]');
  202. if (!$c.length) {
  203. $c = $form.find('[name="' + column.replace(/start$/, '') + '"]');
  204. }
  205. if (!$c.length) {
  206. $c = $form.find('[name="' + column.replace(/end$/, '') + '"]');
  207. }
  208. if (!$c.length) {
  209. $c = $form.find('[name="' + column.replace(/start\]$/, ']') + '"]');
  210. }
  211. if (!$c.length) {
  212. $c = $form.find('[name="' + column.replace(/end\]$/, ']') + '"]');
  213. }
  214. return $c;
  215. }
  216. // 移除给定字段的错误信息
  217. removeError($field, column) {
  218. let options = this.options,
  219. parent = $field.parents(options.groupSelector),
  220. errorClass = this.errorClass;
  221. parent.removeClass(errorClass);
  222. parent.find(options.errorContainerSelector).html('');
  223. // tab页下没有错误信息了,隐藏title的错误图标
  224. let tab;
  225. if (! queryTabByField(this, $field).find('.'+errorClass).length) {
  226. tab = queryTabTitleError(this, $field);
  227. if (! tab.hasClass('d-none')) {
  228. tab.addClass('d-none');
  229. }
  230. }
  231. delete this._errColumns[column];
  232. }
  233. // 删除所有错误信息
  234. removeErrors() {
  235. let _this = this,
  236. column,
  237. tab;
  238. // 移除所有字段的错误信息
  239. _this.$form.find(_this.options.errorContainerSelector).each(function (_, $err) {
  240. $($err).parents(_this.options.groupSelector).removeClass(_this.options.errorClass);
  241. $($err).html('');
  242. });
  243. // 移除tab表单tab标题错误信息
  244. for (column in _this._errColumns) {
  245. tab = queryTabTitleError(_this._errColumns[column]);
  246. if (! tab.hasClass('d-none')) {
  247. tab.addClass('d-none');
  248. }
  249. }
  250. // 重置
  251. _this._errColumns = {};
  252. }
  253. }
  254. // 监听表单提交事件
  255. Form.submitting = function (callback) {
  256. typeof callback == 'function' && (formCallbacks.before.push(callback));
  257. return this
  258. };
  259. // 监听表单提交完毕事件
  260. Form.submitted = function (success, error) {
  261. typeof success == 'function' && (formCallbacks.success.push(success));
  262. typeof error == 'function' && (formCallbacks.error.push(error));
  263. return this
  264. };
  265. // 当字段值变化时移除错误信息
  266. function removeErrorWhenValChanged(form, $field, column) {
  267. let remove = function () {
  268. form.removeError($field, column)
  269. };
  270. $field.one('change', remove);
  271. $field.off('blur', remove).on('blur', function () {
  272. if (form.isValueChanged($field, column)) {
  273. remove();
  274. }
  275. });
  276. // 表单值发生变化就移除错误信息
  277. let interval = function () {
  278. setTimeout(function () {
  279. if (! $field.length) {
  280. return;
  281. }
  282. if (form.isValueChanged($field, column)) {
  283. return remove();
  284. }
  285. interval();
  286. }, 500);
  287. };
  288. interval();
  289. }
  290. function getTabId(form, $field) {
  291. return $field.parents(form.options.tabSelector).attr('id');
  292. }
  293. function queryTabByField(form, $field)
  294. {
  295. let tabId = getTabId(form, $field);
  296. if (! tabId) {
  297. return $('<none></none>');
  298. }
  299. return $(`a[href="#${tabId}"]`);
  300. }
  301. function queryTabTitleError(form, $field) {
  302. return queryTabByField(form, $field).find('.has-tab-error');
  303. }
  304. // 触发钩子事件
  305. function fire(callbacks) {
  306. let i, j,
  307. result,
  308. args = arguments,
  309. argsArr = [];
  310. delete args[0];
  311. args = args || [];
  312. for (j in args) {
  313. argsArr.push(args[j]);
  314. }
  315. for (i in callbacks) {
  316. result = callbacks[i].apply(callbacks[i], argsArr);
  317. if (result === false) {
  318. return result; // 返回 false 会代码阻止继续执行
  319. }
  320. }
  321. }
  322. // 开启form表单模式
  323. $.fn.form = function (options) {
  324. let $this = $(this);
  325. options = $.extend(options, {
  326. form: $this,
  327. });
  328. $this.on('submit', function () {
  329. return false;
  330. });
  331. $this.find('[type="submit"],.submit').click(function (e) {
  332. Dcat.Form(options);
  333. return false;
  334. });
  335. };
  336. export default Form