import{e as a,o as n,G as t}from"./vendor.js";const l={class:"markdown-body"},p=t(`

Form \u8868\u5355\u7EC4\u4EF6

\u4ECB\u7ECD

\u7528\u4E8E\u6570\u636E\u5F55\u5165\u3001\u6821\u9A8C\uFF0C\u652F\u6301\u8F93\u5165\u6846\u3001\u5355\u9009\u6846\u3001\u590D\u9009\u6846\u3001\u6587\u4EF6\u4E0A\u4F20\u7B49\u7C7B\u578B\uFF0C\u9700\u8981\u4E0E Cell \u7EC4\u4EF6\u642D\u914D\u4F7F\u7528\u3002

\u5B89\u88C5

import { createApp } from 'vue';
// vue
import { Form,FormItem,Cell,CellGroup } from '@nutui/nutui';
// taro
import { Form,FormItem,Cell,CellGroup  } from '@nutui/nutui-taro';

const app = createApp();
app.use(Form);
app.use(FormItem);
app.use(Cell);
app.use(CellGroup);

\u57FA\u7840\u7528\u6CD5

<nut-form>
    <nut-form-item label="\u59D3\u540D">
        <input class="nut-input-text" placeholder="\u8BF7\u8F93\u5165\u59D3\u540D" type="text" />
    </nut-form-item>
    <nut-form-item label="\u5E74\u9F84">
        <input class="nut-input-text" placeholder="\u8BF7\u8F93\u5165\u5E74\u9F84" type="text" />
    </nut-form-item>
    <nut-form-item label="\u8054\u7CFB\u7535\u8BDD">
        <input class="nut-input-text" placeholder="\u8BF7\u8F93\u5165\u8054\u7CFB\u7535\u8BDD" type="text" />
    </nut-form-item>
    <nut-form-item label="\u5730\u5740">
        <input class="nut-input-text" placeholder="\u8BF7\u8F93\u5165\u5730\u5740" type="text" />
    </nut-form-item>
</nut-form>

\u8868\u5355\u6821\u9A8C

<nut-form :model-value="formData" ref="ruleForm">
    <nut-form-item label="\u59D3\u540D" prop="name" required :rules="[{ required: true, message: '\u8BF7\u586B\u5199\u59D3\u540D' }]">
        <input class="nut-input-text" v-model="formData.name" placeholder="\u8BF7\u8F93\u5165\u59D3\u540D" type="text" />
    </nut-form-item>
    <nut-form-item label="\u5E74\u9F84" prop="age" required :rules="[
        { required: true, message: '\u8BF7\u586B\u5199\u5E74\u9F84' },
        { validator: customValidator, message: '\u5FC5\u987B\u8F93\u5165\u6570\u5B57' },
        { regex: /^(\\d{1,2}|1\\d{2}|200)$/, message: '\u5FC5\u987B\u8F93\u51650-200\u533A\u95F4' }
    ]">
        <input class="nut-input-text" v-model="formData.age" placeholder="\u8BF7\u8F93\u5165\u5E74\u9F84\uFF0C\u5FC5\u987B\u6570\u5B57\u4E140-200\u533A\u95F4" type="text" />
    </nut-form-item>
    <nut-form-item label="\u8054\u7CFB\u7535\u8BDD" prop="tel" required :rules="[
        { required: true, message: '\u8BF7\u586B\u5199\u8054\u7CFB\u7535\u8BDD' },
        { validator: asyncValidator, message: '\u7535\u8BDD\u683C\u5F0F\u4E0D\u6B63\u786E' }
    ]">
        <input class="nut-input-text" v-model="formData.tel" placeholder="\u8BF7\u8F93\u5165\u8054\u7CFB\u7535\u8BDD\uFF0C\u5F02\u6B65\u6821\u9A8C\u7535\u8BDD\u683C\u5F0F" type="text" />
    </nut-form-item>
    <nut-form-item label="\u5730\u5740" prop="address" required :rules="[{ required: true, message: '\u8BF7\u586B\u5199\u5730\u5740' }]">
        <input class="nut-input-text" v-model="formData.address" placeholder="\u8BF7\u8F93\u5165\u5730\u5740" type="text" />
    </nut-form-item>
    <nut-cell>
        <nut-button type="primary" size="small" style="margin-right: 10px" @click="submit">\u63D0\u4EA4</nut-button>
        <nut-button size="small" @click="reset">\u91CD\u7F6E\u63D0\u793A\u72B6\u6001</nut-button>
    </nut-cell>
</nut-form>

setup(){
    const formData = reactive({
        name: '',
        age: '',
        tel: '',
        address: ''
    });
    const validate = (item: any) => {
        console.log(item);
    };
    const ruleForm = ref<any>(null);

    const submit = () => {
      ruleForm.value.validate().then(({ valid, errors }: any) => {
        if (valid) {
          console.log('success', formData);
        } else {
          console.log('error submit!!', errors);
        }
      });
    };
    const reset = () => {
      ruleForm.value.reset();
    };
    // \u51FD\u6570\u6821\u9A8C
    const customValidator = (val: string) => /^\\d+$/.test(val);
    // Promise \u5F02\u6B65\u6821\u9A8C
    const asyncValidator = (val: string) => {
      return new Promise((resolve) => {
        Toast.loading('\u6A21\u62DF\u5F02\u6B65\u9A8C\u8BC1\u4E2D...');
        setTimeout(() => {
          Toast.hide();
          resolve(/^400(-?)[0-9]{7}$|^1\\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
        }, 1000);
      });
    };
    return { ruleForm, formData, validate, customValidator, asyncValidator, submit, reset, formData2, addressModule };
}

\u8868\u5355\u7C7B\u578B

<nut-form>
    <nut-form-item label="\u5F00\u5173">
        <nut-switch v-model="formData2.switch"></nut-switch>
    </nut-form-item>
    <nut-form-item label="\u590D\u9009\u6846">
        <nut-checkbox v-model="formData2.checkbox">\u590D\u9009\u6846</nut-checkbox>
    </nut-form-item>
    <nut-form-item label="\u5355\u9009\u6309\u94AE">
        <nut-radiogroup direction="horizontal" v-model="formData2.radio">
            <nut-radio label="1">\u9009\u98791</nut-radio>
            <nut-radio disabled label="2">\u9009\u98792</nut-radio>
            <nut-radio label="3">\u9009\u98793</nut-radio>
        </nut-radiogroup>
    </nut-form-item>
    <nut-form-item label="\u8BC4\u5206">
        <nut-rate v-model="formData2.rate" />
    </nut-form-item>
    <nut-form-item label="\u6B65\u8FDB\u5668">
        <nut-inputnumber v-model="formData2.number" />
    </nut-form-item>
    <nut-form-item label="\u6ED1\u5757">
        <nut-range hidden-tag v-model="formData2.range"></nut-range>
    </nut-form-item>
    <nut-form-item label="\u6587\u4EF6\u4E0A\u4F20">
        <nut-uploader url="http://\u670D\u52A1\u5730\u5740" v-model:file-list="formData2.defaultFileList" maximum="3" multiple>
        </nut-uploader>
    </nut-form-item>
    <nut-form-item label="\u5730\u5740">
        <input class="nut-input-text" v-model="formData2.address" @click="addressModule.methods.show" readonly
            placeholder="\u8BF7\u9009\u62E9\u5730\u5740" type="text" />
        <!-- nut-address -->
        <nut-address v-model:visible="addressModule.state.show" :province="addressModule.state.province"
            :city="addressModule.state.city" :country="addressModule.state.country" :town="addressModule.state.town"
            @change="addressModule.methods.onChange" custom-address-title="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"></nut-address>
    </nut-form-item>
</nut-form>

setup(){
    const formData2 = reactive({
      switch: false,
      checkbox: false,
      radio: 0,
      number: 0,
      rate: 3,
      range: 30,
      address: '',
      defaultFileList: [
        {
          name: '\u6587\u4EF61.png',
          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
          status: 'success',
          message: '\u4E0A\u4F20\u6210\u529F',
          type: 'image'
        },
        {
          name: '\u6587\u4EF62.png',
          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
          status: 'uploading',
          message: '\u4E0A\u4F20\u4E2D...',
          type: 'image'
        }
      ]
    });

    const addressModule = reactive({
      state: {
        show: false,
        province: [
          { id: 1, name: '\u5317\u4EAC' },
          { id: 2, name: '\u5E7F\u897F' },
          { id: 3, name: '\u6C5F\u897F' },
          { id: 4, name: '\u56DB\u5DDD' }
        ],
        city: [
          { id: 7, name: '\u671D\u9633\u533A' },
          { id: 8, name: '\u5D07\u6587\u533A' },
          { id: 9, name: '\u660C\u5E73\u533A' },
          { id: 6, name: '\u77F3\u666F\u5C71\u533A' }
        ],
        country: [
          { id: 3, name: '\u516B\u91CC\u5E84\u8857\u9053' },
          { id: 9, name: '\u5317\u82D1' },
          { id: 4, name: '\u5E38\u8425\u4E61' }
        ],
        town: []
      },
      methods: {
        show() {
          addressModule.state.show = !addressModule.state.show;
          if (addressModule.state.show) {
            formData2.address = '';
          }
        },
        onChange({ custom, next, value }: any) {
          formData2.address += value.name;
          const name = addressModule.state[next];
          if (name.length < 1) {
            addressModule.state.show = false;
          }
        }
      }
    });
    return { formData2, addressModule };
}

Form Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
model-value\u8868\u5355\u6570\u636E\u5BF9\u8C61(\u4F7F\u7528\u8868\u5355\u6821\u9A8C\u65F6\uFF0C\u5FC5\u586B)object

Form Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
validate\u4EFB\u4E00\u8868\u5355\u9879\u88AB\u6821\u9A8C\u5931\u8D25\u540E\u89E6\u53D1\u88AB\u6821\u9A8C\u7684\u8868\u5355\u9879 prop \u503C\uFF0C\u6821\u9A8C\u662F\u5426\u901A\u8FC7\uFF0C\u9519\u8BEF\u6D88\u606F\uFF08\u5982\u679C\u5B58\u5728\uFF09

FormItem Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
required\u662F\u5426\u663E\u793A\u5FC5\u586B\u5B57\u6BB5\u7684\u6807\u7B7E\u65C1\u8FB9\u7684\u7EA2\u8272\u661F\u53F7booleanfalse
label-width\u8868\u5355\u9879 label \u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apxnumber | string90px
label-align\u8868\u5355\u9879 label \u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center rightstringleft
body-align\u8F93\u5165\u6846\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center rightstringleft
error-message-align\u9519\u8BEF\u63D0\u793A\u6587\u6848\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center rightstringleft
show-error-line\u662F\u5426\u5728\u6821\u9A8C\u4E0D\u901A\u8FC7\u65F6\u6807\u7EA2\u8F93\u5165\u6846booleantrue
show-error-message\u662F\u5426\u5728\u6821\u9A8C\u4E0D\u901A\u8FC7\u65F6\u5728\u8F93\u5165\u6846\u4E0B\u65B9\u5C55\u793A\u9519\u8BEF\u63D0\u793Abooleantrue

FormItem Rule \u6570\u636E\u7ED3\u6784

\u4F7F\u7528 FormItem \u7684rules\u5C5E\u6027\u53EF\u4EE5\u5B9A\u4E49\u6821\u9A8C\u89C4\u5219\uFF0C\u53EF\u9009\u5C5E\u6027\u5982\u4E0B:

\u952E\u540D\u8BF4\u660E\u7C7B\u578B
required\u662F\u5426\u4E3A\u5FC5\u9009\u5B57\u6BB5boolean
message\u9519\u8BEF\u63D0\u793A\u6587\u6848string
validator\u901A\u8FC7\u51FD\u6570\u8FDB\u884C\u6821\u9A8C(value, rule) => boolean | string | Promise
regex\u901A\u8FC7\u6B63\u5219\u8868\u8FBE\u5F0F\u8FDB\u884C\u6821\u9A8CRegExp

Methods

\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Form \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5

\u65B9\u6CD5\u540D\u8BF4\u660E\u53C2\u6570\u8FD4\u56DE\u503C
submit\u63D0\u4EA4\u8868\u5355\u8FDB\u884C\u6821\u9A8C\u7684\u65B9\u6CD5-Promise
reset\u6E05\u7A7A\u6821\u9A8C\u7ED3\u679C--
`,25),c=[p],u={setup(r,{expose:s}){return s({frontmatter:{}}),(h,o)=>(n(),a("div",l,c))}};export{u as default};