RuleForm.vue 4.5 KB

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