formMixin.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. "use strict";
  2. var formMixin = {
  3. data: {
  4. validData: {},
  5. rules: {
  6. title: [{
  7. required: true,
  8. type: 'string',
  9. message: '请输入文章标题',
  10. trigger: 'blur'
  11. }],
  12. label: [{
  13. required: true,
  14. message: '请输入文章标签',
  15. trigger: ['blur', 'change']
  16. }],
  17. keyword: [{
  18. required: true,
  19. message: '请输入文章seo关键词',
  20. trigger: 'blur'
  21. }],
  22. publisher: [{
  23. required: true,
  24. message: '请输入发布人',
  25. trigger: 'blur'
  26. }],
  27. recommendContent: [{
  28. required: true,
  29. message: '请输入文章推荐语',
  30. trigger: 'blur'
  31. }],
  32. articleContent: [{
  33. required: true,
  34. message: '请输入文章内容',
  35. trigger: 'change'
  36. }],
  37. typeId: [{
  38. required: true,
  39. message: '请选择文章分类',
  40. trigger: 'change'
  41. }],
  42. guidanceImage: [{
  43. required: true,
  44. message: '请上传文章引导图',
  45. trigger: 'change'
  46. }],
  47. status: [{
  48. required: true,
  49. message: '请选择文章状态',
  50. trigger: 'change'
  51. }]
  52. }
  53. },
  54. mounted: function mounted() {
  55. //初始化表单验证
  56. this.initValidForm(this.formData);
  57. },
  58. created: function created() {
  59. //初始化验证关系对象
  60. this.initValidData();
  61. },
  62. methods: {
  63. //初始化验证关系对象
  64. initValidData: function initValidData() {
  65. for (var key in this.rules) {
  66. this.$set(this.validData, key, {
  67. valid: true,
  68. message: ''
  69. });
  70. }
  71. },
  72. //初始化表单验证
  73. initValidForm: function initValidForm(formData) {
  74. var _this = this;
  75. var that = this;
  76. var _loop = function _loop(key) {
  77. var rules = _this.rules[key];
  78. var input = document.querySelector(".form-item[prop=\"".concat(key, "\"] input"));
  79. var textarea = document.querySelector(".form-item[prop=\"".concat(key, "\"] textarea"));
  80. var trigger = rules[0].trigger.toString();
  81. if (trigger.indexOf('blur') > -1) {
  82. if (input) {
  83. input.addEventListener('blur', function () {
  84. that.validInputHandle(formData, key, rules);
  85. });
  86. }
  87. if (textarea) {
  88. textarea.addEventListener('blur', function () {
  89. that.validInputHandle(formData, key, rules);
  90. });
  91. }
  92. }
  93. if (trigger.indexOf('change') > -1) {
  94. var str = 'formData.' + key;
  95. that.$watch(str, function (newVal, oldVal) {
  96. that.validInputHandle(formData, key, rules);
  97. });
  98. }
  99. };
  100. for (var key in this.rules) {
  101. _loop(key);
  102. }
  103. },
  104. //数据校验
  105. validInputHandle: function validInputHandle(formData, key, rules) {
  106. var validData = {
  107. valid: true,
  108. message: ''
  109. };
  110. rules.forEach(function (rule, index) {
  111. if (!validData.valid) return; // 字符长度
  112. var len = formData[key].toString().trim().length; // 是否必填
  113. if (rule.required && !formData[key]) {
  114. validData.valid = false;
  115. validData.message = rule.message || '';
  116. } // 最大值最小值
  117. if (rule.maxLength && len < rule.minLength || rule.maxLength && len > rule.maxLength) {
  118. validData.valid = false;
  119. validData.message = rule.message || '';
  120. } // 自定义校验规则
  121. if (rule.pattern && !rule.pattern.test(formData[key])) {
  122. validData.valid = false;
  123. validData.message = rule.message || '';
  124. }
  125. });
  126. this.validData[key] = validData;
  127. },
  128. // 验证全部数据
  129. validAll: function validAll(formData) {
  130. for (var key in this.rules) {
  131. var rules = this.rules[key];
  132. this.validInputHandle(formData, key, rules);
  133. }
  134. for (var _key in this.validData) {
  135. // console.log(key, this.validData[key].valid);
  136. if (!this.validData[_key].valid) {
  137. return Promise.reject(false);
  138. }
  139. }
  140. return Promise.resolve(true);
  141. }
  142. }
  143. };