form.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. import lib from '../lib/lib';
  2. import $ from 'jquery';
  3. var exports = {};
  4. exports.validateForm = validateForm;
  5. exports.getFormData = getFormData;
  6. function addFocus(input) {
  7. $(input).addClass("focus");
  8. if ($(input).hasClass('weui-input')) {
  9. $(input).parents('.weui-cell').addClass('weui-cell_warn');
  10. }
  11. }
  12. function removeFocus(input) {
  13. $(input).removeClass("focus");
  14. if ($(input).hasClass('weui-input')) {
  15. $(input).parents('.weui-cell').removeClass('weui-cell_warn');
  16. }
  17. }
  18. function initEvent() {
  19. $("body").on("click", ".focus", function() {
  20. removeFocus(this);
  21. });
  22. }
  23. initEvent();
  24. /**
  25. * 检查参数并获取表单数据
  26. * selector:表单选择器
  27. */
  28. function getFormData(selector) {
  29. var data = {};
  30. var $input = $(selector).find('input, select, textarea');
  31. $input.removeClass("hover");
  32. for (var i = 0; i < $input.length; i++) {
  33. var $this = $($input[i]);
  34. var key = $input[i].name || $input[i].id;
  35. if (key) {
  36. var type = $this.attr("type");
  37. if (type == "checkbox") {
  38. data[key] = $this.prop("checked");
  39. } else if (type == 'radio') {
  40. data[key] = $('[name="' + $this.attr('name') + '"]:checked').val();
  41. } else if (type != 'submit' && type != 'button') {
  42. data[key] = $.trim($this.val());
  43. }
  44. }
  45. }
  46. return data;
  47. }
  48. function validateForm(selector) {
  49. var $input = $(selector).find('input, select, textarea');
  50. $input.removeClass("hover");
  51. for (var i = 0; i < $input.length; i++) {
  52. var $this = $($input[i]);
  53. if (!_validate($this)) {
  54. return false;
  55. }
  56. }
  57. return true;
  58. }
  59. function _validate($this) {
  60. var funcList = [
  61. _validateRequire,
  62. _validateLength,
  63. _validateRange,
  64. _validateReg,
  65. _validateType
  66. ];
  67. for (var i = 0; i < funcList.length; i++) {
  68. if (!funcList[i]($this)) {
  69. return false;
  70. }
  71. }
  72. return true;
  73. }
  74. // 字符串格式化
  75. function _format(str) {
  76. if (arguments.length == 0) return null;
  77. var args = Array.prototype.slice.call(arguments, 1);
  78. return str.replace(/\{(\d+)\}/g, function(m, i){
  79. return args[i];
  80. });
  81. }
  82. function _getTitle($this) {
  83. var title = $this.attr('title');
  84. if (!title) {
  85. title = $this.parent().parent().find('.weui-label').text();
  86. }
  87. return title;
  88. }
  89. function _validateRequire($this) {
  90. if (!$this.attr('required')) {
  91. return true;
  92. }
  93. var required = $this.attr('required');
  94. var inputVal = $.trim($this.val());
  95. if (required && !inputVal) {
  96. lib.showTip("请输入" + _getTitle($this));
  97. addFocus($this);
  98. return false;
  99. }
  100. return true;
  101. }
  102. function _validateRange($this) {
  103. var range = $this.attr('data-range');
  104. var value = $.trim($this.val());
  105. if (!range || !value) {
  106. return true;
  107. }
  108. var reg = /(\d+),\s*(\d+|\+)*/;
  109. if (reg.test(range)) {
  110. var dataRange = range.match(reg);
  111. if (value < parseInt(dataRange[1])) {
  112. lib.showTip(_format('{1}不能少于{0}', dataRange[1], _getTitle($this)));
  113. addFocus($this);
  114. return false;
  115. } else if (parseInt(dataRange[2]) && value > parseInt(dataRange[2])) {
  116. lib.showTip(_format("{1}不能大于{0}", _getTitle($this), dataRange[2]));
  117. addFocus($this);
  118. return false;
  119. }
  120. }
  121. return true;
  122. }
  123. function _validateLength($this) {
  124. if (!$this.attr('data-length')) {
  125. return true;
  126. }
  127. var value = $.trim($this.val());
  128. // var length = strlen(value);
  129. var length = value.length;
  130. var reg = /(\d+),\s*(\d+|\+)*/;
  131. var dataLength = $this.attr('data-length');
  132. if (reg.test(dataLength)) {
  133. var dataRange = $this.attr('data-length').match(reg);
  134. if (length < parseInt(dataRange[1])) {
  135. lib.showTip(_format('请输入{0}个字以上的{1}', dataRange[1], _getTitle($this)));
  136. addFocus($this);
  137. return false;
  138. } else if (parseInt(dataRange[2]) && length > parseInt(dataRange[2])) {
  139. lib.showTip(_format("{0}不能超过{1}个字", _getTitle($this), dataRange[2]));
  140. addFocus($this);
  141. return false;
  142. }
  143. } else if (length != dataLength) {
  144. lib.showTip(_format("{0}应该为{1}个字", _getTitle($this), dataLength));
  145. addFocus($this);
  146. return false;
  147. }
  148. return true;
  149. }
  150. function _validateReg($this) {
  151. if (!$this.attr('data-reg')) {
  152. return true;
  153. }
  154. var reg = new RegExp($this.attr('data-reg'));
  155. var value = $.trim($this.val());
  156. if (reg.test(value)) {
  157. var msg = $this.attr('data-regMsg') || "不符合规范哦!";
  158. lib.showTip(_getTitle($this) + msg);
  159. addFocus($this);
  160. return false;
  161. }
  162. return true;
  163. }
  164. function _validateType($this) {
  165. if (!$.trim($this.val())) {
  166. return true;
  167. }
  168. var dataType = $this.attr('data-type');
  169. var typeList = dataType ? dataType.split('|') : [$this.attr("type")];
  170. var result = true;
  171. for (var i = 0, len = typeList.length; i < len; i++) {
  172. var type = typeList[i];
  173. if (_validateType2($this, type)) {
  174. return true;
  175. }
  176. }
  177. return false;
  178. }
  179. function _validateType2($this, type) {
  180. switch (type) {
  181. case 'email':
  182. return _validateMail($this);
  183. case 'tel':
  184. return _validateTel($this);
  185. case 'number':
  186. return _validateNum($this);
  187. default:
  188. return true;
  189. }
  190. }
  191. function _validateTel($this) {
  192. var value = $.trim($this.val());
  193. var reg = /^\d{11}$/;
  194. var strTip = "请输入正确的手机号码!";
  195. if (reg && !reg.test(value)) {
  196. lib.showTip(strTip);
  197. addFocus($this);
  198. return false;
  199. }
  200. return true;
  201. }
  202. function _validateNum($this) {
  203. var value = $.trim($this.val());
  204. var reg = /^\d+(\.\d+)*$/;
  205. var strTip = "请输入数字!";
  206. if (reg && !reg.test(value)) {
  207. lib.showTip(strTip);
  208. addFocus($this);
  209. return false;
  210. }
  211. return true;
  212. }
  213. function _validateMail($this) {
  214. var value = $.trim($this.val());
  215. var reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
  216. if (!reg.test(value)) {
  217. lib.showTip("请输入合法的Email地址!");
  218. addFocus($this);
  219. return false;
  220. }
  221. return true;
  222. }
  223. export default exports;