学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

214 lines
7.2 KiB

1 year ago
  1. <template>
  2. <view class="u-form">
  3. <slot />
  4. </view>
  5. </template>
  6. <script>
  7. import props from "./props.js";
  8. import Schema from "../../libs/util/async-validator";
  9. // 去除警告信息
  10. Schema.warning = function() {};
  11. /**
  12. * Form 表单
  13. * @description 此组件一般用于表单场景可以配置Input输入框Select弹出框进行表单验证等
  14. * @tutorial https://www.uviewui.com/components/form.html
  15. * @property {Object} model 当前form的需要验证字段的集合
  16. * @property {Object | Function | Array} rules 验证规则
  17. * @property {String} errorType 错误的提示方式见上方说明 ( 默认 message )
  18. * @property {Boolean} borderBottom 是否显示表单域的下划线边框 ( 默认 true
  19. * @property {String} labelPosition 表单域提示文字的位置left-左侧top-上方 ( 默认 'left'
  20. * @property {String | Number} labelWidth 提示文字的宽度单位px ( 默认 45
  21. * @property {String} labelAlign lable字体的对齐方式 ( 默认 left'
  22. * @property {Object} labelStyle lable的样式对象形式
  23. * @example <u--formlabelPosition="left" :model="model1" :rules="rules" ref="form1"></u--form>
  24. */
  25. export default {
  26. name: "u-form",
  27. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  28. provide() {
  29. return {
  30. uForm: this,
  31. };
  32. },
  33. data() {
  34. return {
  35. formRules: {},
  36. // 规则校验器
  37. validator: {},
  38. // 原始的model快照,用于resetFields方法重置表单时使用
  39. originalModel: null,
  40. };
  41. },
  42. watch: {
  43. // 监听规则的变化
  44. rules: {
  45. immediate: true,
  46. handler(n) {
  47. this.setRules(n);
  48. },
  49. },
  50. // 监听属性的变化,通知子组件u-form-item重新获取信息
  51. propsChange(n) {
  52. if (this.children?.length) {
  53. this.children.map((child) => {
  54. // 判断子组件(u-form-item)如果有updateParentData方法的话,就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
  55. typeof child.updateParentData == "function" &&
  56. child.updateParentData();
  57. });
  58. }
  59. },
  60. // 监听model的初始值作为重置表单的快照
  61. model: {
  62. immediate: true,
  63. handler(n) {
  64. if (!this.originalModel) {
  65. this.originalModel = uni.$u.deepClone(n);
  66. }
  67. },
  68. },
  69. },
  70. computed: {
  71. propsChange() {
  72. return [
  73. this.errorType,
  74. this.borderBottom,
  75. this.labelPosition,
  76. this.labelWidth,
  77. this.labelAlign,
  78. this.labelStyle,
  79. ];
  80. },
  81. },
  82. created() {
  83. // 存储当前form下的所有u-form-item的实例
  84. // 不能定义在data中,否则微信小程序会造成循环引用而报错
  85. this.children = [];
  86. },
  87. methods: {
  88. // 手动设置校验的规则,如果规则中有函数的话,微信小程序中会过滤掉,所以只能手动调用设置规则
  89. setRules(rules) {
  90. // 判断是否有规则
  91. if (Object.keys(rules).length === 0) return;
  92. if (process.env.NODE_ENV === 'development' && Object.keys(this.model).length === 0) {
  93. uni.$u.error('设置rules,model必须设置!如果已经设置,请刷新页面。');
  94. return;
  95. };
  96. this.formRules = rules;
  97. // 重新将规则赋予Validator
  98. this.validator = new Schema(rules);
  99. },
  100. // 清空所有u-form-item组件的内容,本质上是调用了u-form-item组件中的resetField()方法
  101. resetFields() {
  102. this.resetModel();
  103. },
  104. // 重置model为初始值的快照
  105. resetModel(obj) {
  106. // 历遍所有u-form-item,根据其prop属性,还原model的原始快照
  107. this.children.map((child) => {
  108. const prop = child?.prop;
  109. const value = uni.$u.getProperty(this.originalModel, prop);
  110. uni.$u.setProperty(this.model, prop, value);
  111. });
  112. },
  113. // 清空校验结果
  114. clearValidate(props) {
  115. props = [].concat(props);
  116. this.children.map((child) => {
  117. // 如果u-form-item的prop在props数组中,则清除对应的校验结果信息
  118. if (props[0] === undefined || props.includes(child.prop)) {
  119. child.message = null;
  120. }
  121. });
  122. },
  123. // 对部分表单字段进行校验
  124. async validateField(value, callback, event = null) {
  125. // $nextTick是必须的,否则model的变更,可能会延后于此方法的执行
  126. this.$nextTick(() => {
  127. // 校验错误信息,返回给回调方法,用于存放所有form-item的错误信息
  128. const errorsRes = [];
  129. // 如果为字符串,转为数组
  130. value = [].concat(value);
  131. // 历遍children所有子form-item
  132. this.children.map((child) => {
  133. // 用于存放form-item的错误信息
  134. const childErrors = [];
  135. if (value.includes(child.prop)) {
  136. // 获取对应的属性,通过类似'a.b.c'的形式
  137. const propertyVal = uni.$u.getProperty(
  138. this.model,
  139. child.prop
  140. );
  141. // 属性链数组
  142. const propertyChain = child.prop.split(".");
  143. const propertyName =
  144. propertyChain[propertyChain.length - 1];
  145. const rule = this.formRules[child.prop];
  146. // 如果不存在对应的规则,直接返回,否则校验器会报错
  147. if (!rule) return;
  148. // rule规则可为数组形式,也可为对象形式,此处拼接成为数组
  149. const rules = [].concat(rule);
  150. // 对rules数组进行校验
  151. for (let i = 0; i < rules.length; i++) {
  152. const ruleItem = rules[i];
  153. // 将u-form-item的触发器转为数组形式
  154. const trigger = [].concat(ruleItem?.trigger);
  155. // 如果是有传入触发事件,但是此form-item却没有配置此触发器的话,不执行校验操作
  156. if (event && !trigger.includes(event)) continue;
  157. // 实例化校验对象,传入构造规则
  158. const validator = new Schema({
  159. [propertyName]: ruleItem,
  160. });
  161. validator.validate({
  162. [propertyName]: propertyVal,
  163. },
  164. (errors, fields) => {
  165. if (uni.$u.test.array(errors)) {
  166. errorsRes.push(...errors);
  167. childErrors.push(...errors);
  168. }
  169. child.message =
  170. childErrors[0]?.message ?? null;
  171. }
  172. );
  173. }
  174. }
  175. });
  176. // 执行回调函数
  177. typeof callback === "function" && callback(errorsRes);
  178. });
  179. },
  180. // 校验全部数据
  181. validate(callback) {
  182. // 开发环境才提示,生产环境不会提示
  183. if (process.env.NODE_ENV === 'development' && Object.keys(this.formRules).length === 0) {
  184. uni.$u.error('未设置rules,请看文档说明!如果已经设置,请刷新页面。');
  185. return;
  186. }
  187. return new Promise((resolve, reject) => {
  188. // $nextTick是必须的,否则model的变更,可能会延后于validate方法
  189. this.$nextTick(() => {
  190. // 获取所有form-item的prop,交给validateField方法进行校验
  191. const formItemProps = this.children.map(
  192. (item) => item.prop
  193. );
  194. this.validateField(formItemProps, (errors) => {
  195. if(errors.length) {
  196. // 如果错误提示方式为toast,则进行提示
  197. this.errorType === 'toast' && uni.$u.toast(errors[0].message)
  198. reject(errors)
  199. } else {
  200. resolve(true)
  201. }
  202. });
  203. });
  204. });
  205. },
  206. },
  207. };
  208. </script>
  209. <style lang="scss" scoped>
  210. </style>