From 25a3a3cc78ce30bc7c26937071126bf7465b0c15 Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Mon, 21 Aug 2023 02:14:06 -0700
Subject: [PATCH] fix(form-demo): add form validateField api demo

---
 .../form-validate-field-composition-api.vue   | 151 ++++++++++++++++
 .../demos/app/form/form-validate-field.vue    | 163 ++++++++++++++++++
 examples/sites/demos/app/form/webdoc/form.js  |  13 +-
 3 files changed, 326 insertions(+), 1 deletion(-)
 create mode 100644 examples/sites/demos/app/form/form-validate-field-composition-api.vue
 create mode 100644 examples/sites/demos/app/form/form-validate-field.vue

diff --git a/examples/sites/demos/app/form/form-validate-field-composition-api.vue b/examples/sites/demos/app/form/form-validate-field-composition-api.vue
new file mode 100644
index 0000000000..35a45e4f25
--- /dev/null
+++ b/examples/sites/demos/app/form/form-validate-field-composition-api.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="demo-form">
+    <tiny-form
+      ref="ruleFormRef"
+      hide-required-asterisk
+      :model="createData"
+      :rules="rules"
+      label-width="100px"
+      show-message
+    >
+      <tiny-form-item label="姓名" prop="users" required :validate-icon="validateIcon">
+        <tiny-input v-model="createData.users"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="日期" prop="datepicker">
+        <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
+      </tiny-form-item>
+      <tiny-form-item label="URL" prop="url">
+        <tiny-input v-model="createData.url"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="等级" prop="radio">
+        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
+      </tiny-form-item>
+      <tiny-form-item label="邮件" prop="email">
+        <tiny-input v-model="createData.email"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="文本">
+        <tiny-input v-model="createData.textarea" type="textarea" maxlength="15"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="级联选择器" prop="cascader">
+        <tiny-cascader
+          v-model="createData.cascader"
+          :options="options2"
+          :popper-append-to-body="true"
+          filterable
+        ></tiny-cascader>
+      </tiny-form-item>
+      <tiny-form-item label="Numeric字段" prop="num1">
+        <tiny-numeric v-model="createData.num1"></tiny-numeric>
+      </tiny-form-item>
+      <tiny-form-item label="IP字段" prop="ip">
+        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
+      </tiny-form-item>
+      <tiny-form-item>
+        <tiny-button type="primary" @click="validateSingleField"> 检验单个字段 </tiny-button>
+        <tiny-button type="primary" @click="validateFields"> 校验特定字段 </tiny-button>
+      </tiny-form-item>
+    </tiny-form>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import {
+  Form as TinyForm,
+  FormItem as TinyFormItem,
+  Input as TinyInput,
+  DatePicker as TinyDatePicker,
+  Button as TinyButton,
+  Modal,
+  RadioGroup as TinyRadioGroup,
+  Cascader as TinyCascader,
+  Numeric as TinyNumeric,
+  IpAddress as TinyIpAddress
+} from '@opentiny/vue'
+import { iconWarning } from '@opentiny/vue-icon'
+
+const ruleFormRef = ref()
+function handleClick() {
+  Modal.message({ message: 'click' })
+}
+const validateIcon = ref(iconWarning())
+const options = ref([
+  { label: 'A', text: '很好', events: { click: handleClick } },
+  { label: 'B', text: '一般' }
+])
+const options2 = ref([
+  {
+    value: 'zhinan',
+    label: '指南',
+    children: [
+      {
+        value: 'anzhuang',
+        label: '安装'
+      },
+      {
+        value: 'kaifa',
+        label: '开发'
+      }
+    ]
+  }
+])
+const createData = reactive({
+  radio: '',
+  users: '',
+  url: '',
+  email: '',
+  datepicker: '',
+  textarea: '',
+  ip: '',
+  num1: 0,
+  cascader: [] // 注意:级联选择器放在表单中校验时，默认值必须是数组
+})
+const rules = ref({
+  radio: [{ required: true, message: '必填', trigger: 'change' }],
+  users: [
+    { required: true, message: '必填', trigger: 'blur' },
+    { min: 2, max: 11, message: '长度必须不小于2', trigger: ['change', 'blur'] }
+  ],
+  datepicker: { type: 'date' },
+  url: { type: 'url', required: true },
+  email: { type: 'email' },
+  cascader: [{ required: true, message: '必填', trigger: 'blur' }],
+  ip: [
+    {
+      validator: (rule, value, cb) => (value === '1.1.1.1' ? cb() : cb(new Error('必填1.1.1.1'))),
+      trigger: 'change'
+    }
+  ],
+  num1: [{ type: 'number', min: 2, max: 11, message: '必填 2~11 之间的数字', trigger: 'change' }]
+})
+
+function validateSingleField() {
+  ruleFormRef.value.validateField('users', (errMsg, fieldConfig) => {
+    if (errMsg) {
+      console.log(fieldConfig)
+    } else {
+      Modal.alert('姓名通过校验')
+    }
+  }) 
+}
+
+async function validateFields() {
+  const errArray = []
+  await ruleFormRef.value.validateField(['url', 'datepicker'], (errMsg, fieldConfig) => {
+    if (errMsg) {
+      errArray.push(fieldConfig)
+    }
+  })
+  if (errArray.length > 0) {
+    console.log(errArray)
+  } else {
+    Modal.alert('日期和url通过校验')
+  }
+}
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+</style>
diff --git a/examples/sites/demos/app/form/form-validate-field.vue b/examples/sites/demos/app/form/form-validate-field.vue
new file mode 100644
index 0000000000..ca6f73b872
--- /dev/null
+++ b/examples/sites/demos/app/form/form-validate-field.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="demo-form">
+    <tiny-form
+      ref="ruleFormRef"
+      hide-required-asterisk
+      :model="createData"
+      :rules="rules"
+      label-width="100px"
+      show-message
+    >
+      <tiny-form-item label="姓名" prop="users" required :validate-icon="validateIcon">
+        <tiny-input v-model="createData.users"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="日期" prop="datepicker">
+        <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
+      </tiny-form-item>
+      <tiny-form-item label="URL" prop="url">
+        <tiny-input v-model="createData.url"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="等级" prop="radio">
+        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
+      </tiny-form-item>
+      <tiny-form-item label="邮件" prop="email">
+        <tiny-input v-model="createData.email"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="文本">
+        <tiny-input v-model="createData.textarea" type="textarea" maxlength="15"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="级联选择器" prop="cascader">
+        <tiny-cascader
+          v-model="createData.cascader"
+          :options="options2"
+          :popper-append-to-body="true"
+          filterable
+        ></tiny-cascader>
+      </tiny-form-item>
+      <tiny-form-item label="Numeric字段" prop="num1">
+        <tiny-numeric v-model="createData.num1"></tiny-numeric>
+      </tiny-form-item>
+      <tiny-form-item label="IP字段" prop="ip">
+        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
+      </tiny-form-item>
+      <tiny-form-item>
+        <tiny-button type="primary" @click="validateSingleField"> 检验单个字段 </tiny-button>
+        <tiny-button type="primary" @click="validateFields"> 校验特定字段 </tiny-button>
+      </tiny-form-item>
+    </tiny-form>
+  </div>
+</template>
+
+<script>
+import {
+  Form,
+  FormItem,
+  Input,
+  DatePicker,
+  Button,
+  Modal,
+  RadioGroup,
+  Cascader,
+  Numeric,
+  IpAddress
+} from '@opentiny/vue'
+import { iconWarning } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyForm: Form,
+    TinyFormItem: FormItem,
+    TinyInput: Input,
+    TinyDatePicker: DatePicker,
+    TinyButton: Button,
+    TinyRadioGroup: RadioGroup,
+    TinyCascader: Cascader,
+    TinyNumeric: Numeric,
+    TinyIpAddress: IpAddress
+  },
+  data() {
+    return {
+      validateIcon: iconWarning(),
+      options: [
+        { label: 'A', text: '很好', events: { click: this.handleClick } },
+        { label: 'B', text: '一般' }
+      ],
+      options2: [
+        {
+          value: 'zhinan',
+          label: '指南',
+          children: [
+            {
+              value: 'anzhuang',
+              label: '安装'
+            },
+            {
+              value: 'kaifa',
+              label: '开发'
+            }
+          ]
+        }
+      ],
+      createData: {
+        radio: '',
+        users: '',
+        url: '',
+        email: '',
+        datepicker: '',
+        textarea: '',
+        ip: '',
+        num1: 0,
+        cascader: [] // 注意:级联选择器放在表单中校验时，默认值必须是数组
+      },
+      rules: {
+        radio: [{ required: true, message: '必填', trigger: 'change' }],
+        users: [
+          { required: true, message: '必填', trigger: 'blur' },
+          { min: 2, max: 11, message: '长度必须不小于2', trigger: ['change', 'blur'] }
+        ],
+        datepicker: { type: 'date' },
+        url: { type: 'url', required: true },
+        email: { type: 'email' },
+        cascader: [{ required: true, message: '必填', trigger: 'blur' }],
+        ip: [
+          {
+            validator: (rule, value, cb) => (value === '1.1.1.1' ? cb() : cb(new Error('必填1.1.1.1'))),
+            trigger: 'change'
+          }
+        ],
+        num1: [{ type: 'number', min: 2, max: 11, message: '必填 2~11 之间的数字', trigger: 'change' }]
+      }
+    }
+  },
+  methods: {
+    validateSingleField() {
+      this.$refs.ruleFormRef.validateField('users', (errMsg, fieldConfig) => {
+        if (errMsg) {
+          console.log(fieldConfig)
+        } else {
+          Modal.alert('姓名通过校验')
+        }
+      }) 
+    },
+    async validateFields() {
+      const errArray = []
+      await this.$refs.ruleFormRef.validateField(['url', 'datepicker'], (errMsg, fieldConfig) => {
+        if (errMsg) {
+          errArray.push(fieldConfig)
+        }
+      })
+      if (errArray.length > 0) {
+        console.log(errArray)
+      } else {
+        Modal.alert('日期和url通过校验')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+</style>
diff --git a/examples/sites/demos/app/form/webdoc/form.js b/examples/sites/demos/app/form/webdoc/form.js
index 7c8bd548e4..cc158fe89c 100644
--- a/examples/sites/demos/app/form/webdoc/form.js
+++ b/examples/sites/demos/app/form/webdoc/form.js
@@ -35,6 +35,17 @@ export default {
       },
       'codeFiles': ['form-validation.vue']
     },
+    {
+      'demoId': 'form-validate-field',
+      'name': { 'zh-CN': '特定表单项校验', 'en-US': 'Form field Validation' },
+      'desc': {
+        'zh-CN':
+          "<p>用于校验表单中一个或多个特定表单项。</p>\n",
+        'en-US':
+          '<p>Validate one or several formItems of the form</p>\n'
+      },
+      'codeFiles': ['form-validate-field.vue']
+    },
     {
       'demoId': 'custom-validation-rule',
       'name': { 'zh-CN': '自定义校验规则', 'en-US': 'Customized Verification Rule' },
@@ -390,7 +401,7 @@ export default {
           'type': '',
           'defaultValue': '',
           'desc': { 'zh-CN': '对部分表单字段进行校验的方法', 'en-US': 'Method for verifying some fields in a form' },
-          'demoId': 'form-validation'
+          'demoId': 'form-validate-field'
         },
         {
           'name': 'resetFields',