form.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. (function () {
  2. /**
  3. * 表单提交
  4. *
  5. * @param opts
  6. * @constructor
  7. */
  8. var $eColumns = {};
  9. LA.Form = function (opts) {
  10. opts = $.extend({
  11. $form: null,
  12. errorClass: 'has-error',
  13. groupSelector: '.form-group',
  14. template: '<label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> _message_</label><br/>',
  15. disableRedirect: false, //
  16. columnSelectors: {}, //
  17. disableRemoveError: false,
  18. before: function () {},
  19. after: function () {},
  20. }, opts);
  21. var originalVals = {},
  22. cls = opts.errorClass,
  23. groupSlt = opts.groupSelector,
  24. tpl = opts.template,
  25. $form = opts.$form,
  26. tabSelector = '.tab-pane',
  27. get_tab_id = function ($c) {
  28. return $c.parents(tabSelector).attr('id');
  29. },
  30. get_tab_title_error = function ($c) {
  31. var id = get_tab_id($c);
  32. if (!id) return $('<none></none>');
  33. return $("[href='#" + id + "'] .text-red");
  34. };
  35. var self = this;
  36. // 移除错误信息
  37. remove_field_error();
  38. $form.ajaxSubmit({
  39. beforeSubmit: function (d, f, o) {
  40. if (opts.before(d, f, o, self) === false) {
  41. return false;
  42. }
  43. if (fire(LA._form_.before, d, f, o, self) === false) {
  44. return false;
  45. }
  46. LA.NP.start();
  47. },
  48. success: function (d) {
  49. LA.NP.done();
  50. if (opts.after(true, d, self) === false) {
  51. return;
  52. }
  53. if (fire(LA._form_.success, d, self) === false) {
  54. return;
  55. }
  56. if (!d.status) {
  57. LA.error(d.message || 'Save failed!');
  58. return;
  59. }
  60. LA.success(d.message || 'Save succeeded!');
  61. if (opts.disableRedirect || d.redirect === false) return;
  62. if (d.redirect) {
  63. return LA.reload(d.redirect);
  64. }
  65. history.back(-1);
  66. },
  67. error: function (v) {
  68. LA.NP.done();
  69. if (opts.after(false, v, self) === false) {
  70. return;
  71. }
  72. if (fire(LA._form_.error, v, self) === false) {
  73. return;
  74. }
  75. try {
  76. var error = JSON.parse(v.responseText), i;
  77. if (v.status != 422 || !error || !LA.isset(error, 'errors')) {
  78. return LA.error(v.status + ' ' + v.statusText);
  79. }
  80. error = error.errors;
  81. for (i in error) {
  82. // 显示错误信息
  83. $eColumns[i] = show_field_error($form, i, error[i]);
  84. }
  85. } catch (e) {
  86. return LA.error(v.status + ' ' + v.statusText);
  87. }
  88. }
  89. });
  90. // 触发钩子事件
  91. function fire(evs) {
  92. var i, j, r, args = arguments, p = [];
  93. delete args[0];
  94. args = args || [];
  95. for (j in args) {
  96. p.push(args[j]);
  97. }
  98. for (i in evs) {
  99. r = evs[i].apply(evs[i], p);
  100. if (r === false) return r; // 返回 false 会代码阻止继续执行
  101. }
  102. }
  103. // 删除错误有字段的错误信息
  104. function remove_field_error() {
  105. var i, p, t;
  106. for (i in $eColumns) {
  107. p = $eColumns[i].parents(groupSlt);
  108. p.removeClass(cls);
  109. p.find('error').html('');
  110. t = get_tab_title_error($eColumns[i]);
  111. if (!t.hasClass('hide')) {
  112. t.addClass('hide');
  113. }
  114. }
  115. // 重置
  116. $eColumns = {};
  117. }
  118. // 显示错误信息
  119. function show_field_error($form, column, errors) {
  120. var $c = get_field_obj($form, column);
  121. get_tab_title_error($c).removeClass('hide');
  122. // 保存字段原始数据
  123. originalVals[column] = get_val($c);
  124. if (!$c) {
  125. if (LA.len(errors) && errors.length) {
  126. LA.error(errors.join(" \n "));
  127. }
  128. return;
  129. }
  130. var p = $c.closest(groupSlt), j;
  131. p.addClass(cls);
  132. for (j in errors) {
  133. p.find('error').eq(0).append(tpl.replace('_message_', errors[j]));
  134. }
  135. if (!opts.disableRemoveError) {
  136. remove_error_when_val_changed($c, column);
  137. }
  138. return $c;
  139. }
  140. // 获取字段对象
  141. function get_field_obj($form, column) {
  142. if (column.indexOf('.') != -1) {
  143. column = column.split('.');
  144. var first = column.shift(), i, sub = '';
  145. for (i in column) {
  146. sub += '[' + column[i] + ']';
  147. }
  148. column = first + sub;
  149. }
  150. var $c = $form.find('[name="' + column + '"]');
  151. if (!$c.length) $c = $form.find('[name="' + column + '[]"]');
  152. if (!$c.length) {
  153. $c = $form.find('[name="' + column.replace(/start$/, '') + '"]');
  154. }
  155. if (!$c.length) {
  156. $c = $form.find('[name="' + column.replace(/end$/, '') + '"]');
  157. }
  158. if (!$c.length) {
  159. $c = $form.find('[name="' + column.replace(/start\]$/, ']') + '"]');
  160. }
  161. if (!$c.length) {
  162. $c = $form.find('[name="' + column.replace(/end\]$/, ']') + '"]');
  163. }
  164. return $c;
  165. }
  166. // 获取字段值
  167. function get_val($c) {
  168. var vals = [],
  169. t = $c.attr('type'),
  170. cked = t === 'checkbox' || t === 'radio',
  171. i;
  172. for (i = 0; i < $c.length; i++) {
  173. if (cked) {
  174. vals.push($($c[i]).prop('checked'));
  175. continue;
  176. }
  177. vals.push($($c[i]).val());
  178. }
  179. return vals;
  180. }
  181. // 当字段值变化时移除错误信息
  182. function remove_error_when_val_changed($c, column) {
  183. var p = $c.parents(groupSlt);
  184. $c.one('change', rm);
  185. $c.off('blur', rm).on('blur', function () {
  186. if (val_changed()) rm();
  187. });
  188. // 表单值发生变化就移除错误信息
  189. function autorm() {
  190. setTimeout(function () {
  191. if (!$c.length) return;
  192. if (val_changed()) return rm();
  193. autorm();
  194. }, 500);
  195. }
  196. autorm();
  197. // 判断值是否改变
  198. function val_changed() {
  199. return !LA.arr.equal(originalVals[column], get_val($c));
  200. }
  201. function rm() {
  202. p.removeClass(cls);
  203. p.find('error').html('');
  204. // tab页下没有错误信息了,隐藏title的错误图标
  205. var id = get_tab_id($c), t;
  206. if (id && !$('#'+id).find('.'+cls).length) {
  207. t = get_tab_title_error($c);
  208. if (!t.hasClass('hide')) {
  209. t.addClass('hide');
  210. }
  211. }
  212. delete $eColumns[column];
  213. }
  214. }
  215. };
  216. })();