表单最外测form

  <n-form
      ref="formRef" //ref钩子
      :model="userForm" //双向绑定的表单对象
      :rules="rules" //验证规则
      label-placement="left"//标签显示的位置left top
      label-width="auto"//标签宽度 number | string | 'auto'
      require-mark-placement="right-hanging"//必填星号的位置 'left' | 'right' | 'right-hanging'
    >
  </n-form>

验证规则

const rules = {
  xx: [
    {
      required: true,//是否为必填
      validator (rule, value) {
        if (!value) {
          return new Error('xx不能为空！')
        } else if (!/^[a-zA-Z0-9]{3,10}$/.test(value)) {
          return new Error('应设置3至10位的账号(字母、数字)！')
        }
        return true //通过
      },
      trigger: [ 'input', 'blur' ]
    }
  ],

输入input

<n-input v-model:value="Form.xx" />

下拉选择 select

                 <n-select
                    v-model:value="Form.xx"
                    placeholder="请选择"
                    :options="Options"
                  />

const Options = [
  {
    label: 'xx',
    value: '1'
  },
  {
    label: 'yy',
    value: '2'
  },
  {
    label: 'zz',
    value: '3'
  }
]

单选 Radio

<n-radio-group v-model:value="Form.xx" name="radiogroup">
    <n-space>
      <n-radio v-for="song in songs" :key="song.value" :value="song.value">
        {{ song.label }}
      </n-radio>
    </n-space>
  </n-radio-group>

//直接生成
const generalOptions = [ 'groode', 'veli good', 'emazing', 'lidiculous' ].map((v) => ({
  label: v,
  value: v
}))
//手工写
songs:[
value:"",//同步到表单的值
label:"",//显示的值
]