RuleForm.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <template>
  2. <div class="m-4">
  3. <div class="mb-4">
  4. <a-button @click="validateForm" class="mr-2">手动校验表单</a-button>
  5. <a-button @click="resetValidate" class="mr-2">清空校验信息</a-button>
  6. <a-button @click="getFormValues" class="mr-2">获取表单值</a-button>
  7. <a-button @click="setFormValues" class="mr-2">设置表单值</a-button>
  8. </div>
  9. <CollapseContainer title="表单校验">
  10. <BasicForm @register="register" @submit="handleSubmit" />
  11. </CollapseContainer>
  12. </div>
  13. </template>
  14. <script lang="ts">
  15. import { defineComponent } from 'vue';
  16. import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  17. import { CollapseContainer } from '/@/components/Container/index';
  18. import { useMessage } from '/@/hooks/web/useMessage';
  19. const schemas: FormSchema[] = [
  20. {
  21. field: 'field1',
  22. component: 'Input',
  23. label: '字段1',
  24. colProps: {
  25. span: 8,
  26. },
  27. required: true,
  28. },
  29. {
  30. field: 'field2',
  31. component: 'Input',
  32. label: '字段2',
  33. colProps: {
  34. span: 8,
  35. },
  36. required: true,
  37. },
  38. {
  39. field: 'field3',
  40. component: 'DatePicker',
  41. label: '字段3',
  42. colProps: {
  43. span: 8,
  44. },
  45. required: true,
  46. },
  47. {
  48. field: 'field4',
  49. component: 'Select',
  50. label: '字段4',
  51. colProps: {
  52. span: 8,
  53. },
  54. componentProps: {
  55. options: [
  56. {
  57. label: '选项1',
  58. value: '1',
  59. key: '1',
  60. },
  61. {
  62. label: '选项2',
  63. value: '2',
  64. key: '2',
  65. },
  66. ],
  67. },
  68. rules: [
  69. {
  70. required: true,
  71. message: '请输入aa',
  72. },
  73. ],
  74. },
  75. {
  76. field: 'field44',
  77. component: 'Input',
  78. label: '自定义校验',
  79. colProps: {
  80. span: 8,
  81. },
  82. rules: [
  83. {
  84. required: true,
  85. // @ts-ignore
  86. validator: async (rule, value) => {
  87. if (!value) {
  88. return Promise.reject('值不能为空');
  89. }
  90. if (value === '1') {
  91. return Promise.reject('值不能为1');
  92. }
  93. return Promise.resolve();
  94. },
  95. trigger: 'change',
  96. },
  97. ],
  98. },
  99. {
  100. field: 'field5',
  101. component: 'CheckboxGroup',
  102. label: '字段5',
  103. colProps: {
  104. span: 8,
  105. },
  106. componentProps: {
  107. options: [
  108. {
  109. label: '选项1',
  110. value: '1',
  111. },
  112. {
  113. label: '选项2',
  114. value: '2',
  115. },
  116. ],
  117. },
  118. rules: [{ required: true }],
  119. },
  120. {
  121. field: 'field7',
  122. component: 'RadioGroup',
  123. label: '字段7',
  124. colProps: {
  125. span: 8,
  126. },
  127. componentProps: {
  128. options: [
  129. {
  130. label: '选项1',
  131. value: '1',
  132. },
  133. {
  134. label: '选项2',
  135. value: '2',
  136. },
  137. ],
  138. },
  139. rules: [{ required: true, message: '覆盖默认生成的校验信息' }],
  140. },
  141. ];
  142. export default defineComponent({
  143. components: { BasicForm, CollapseContainer },
  144. setup() {
  145. const { createMessage } = useMessage();
  146. const [register, { validateFields, clearValidate, getFieldsValue, setFieldsValue }] = useForm(
  147. {
  148. labelWidth: 120,
  149. schemas,
  150. actionColOptions: {
  151. span: 24,
  152. },
  153. }
  154. );
  155. async function validateForm() {
  156. try {
  157. const res = await validateFields();
  158. console.log('passing', res);
  159. } catch (error) {
  160. console.log('not passing', error);
  161. }
  162. }
  163. async function resetValidate() {
  164. clearValidate();
  165. }
  166. function getFormValues() {
  167. const values = getFieldsValue();
  168. createMessage.success('values:' + JSON.stringify(values));
  169. }
  170. function setFormValues() {
  171. setFieldsValue({
  172. field1: 1111,
  173. field5: ['1'],
  174. field7: '1',
  175. });
  176. }
  177. return {
  178. register,
  179. schemas,
  180. handleSubmit: (values: any) => {
  181. createMessage.success('click search,values:' + JSON.stringify(values));
  182. },
  183. getFormValues,
  184. setFormValues,
  185. validateForm,
  186. resetValidate,
  187. };
  188. },
  189. });
  190. </script>