vuejs的入门＜4＞插件Vuetify注册表单

把代码copy到HelloWorld.vue里，HelloWorld.vue原来的全不要！！！ Vuetify是好东西，但是官方开源的部分只是引子，还要自己修修改改。国内很少完整教程，都不分享！只能呵呵两声了。

<v-text-field
v-model="password.value.value"
name="password"
:counter="6"
:error-messages="password.errorMessage.value"
label="密码"

<!-- 邮箱 -->
<v-text-field
  v-model="email.value.value"
  :error-messages="email.errorMessage.value"
  label="E-mail"
></v-text-field>




<v-select
  v-model="select.value.value"
  :items="items"
  :error-messages="select.errorMessage.value"
  label="Select"
></v-select>

<v-checkbox
  v-model="checkbox.value.value"
  :error-messages="checkbox.errorMessage.value"
  value="1"
  label="Option"
  type="checkbox"
></v-checkbox>

<v-btn
  class="me-4"
  type="submit"
>
  submit
</v-btn>

<v-btn @click="handleReset">
  clear
</v-btn>

const { handleSubmit, handleReset } = useForm({
validationSchema: {
name (value) {
if (value?.length <2 )
return ‘不少于2个字’
else if (value?.length < 9 ) return true
return ‘最多8个数字’
},
phone (value) {
if (value?.length == 11 && /[0-9-]/.test(value)) return true

    return '必须是0-9的11位数字'
  },
 //  密码
  password (value) {
    if (value?.length < 7 && /^[0-9-]+$/.test(value)) 
       return '不能全数字' 
     else if

         (value?.length == 6 ) return true
      return '要6位字'
  
  },

//邮箱

  email (value) {
    if (/^[a-z.0-9-]+@[a-z.-]+\.[a-z]+$/i.test(value)) return true

    return '必须是 e-mail.'
  },



  select (value) {
    if (value) return true

    return 'Select an item.'
  },
  checkbox (value) {
    if (value === '1') return true

    return 'Must be checked.'
  },
},

})
const name = useField(‘name’)
const phone = useField(‘phone’)
const password = useField(‘password’)

//const password3 = useField(‘password3’)
const email = useField(‘email’)
const select = useField(‘select’)
const checkbox = useField(‘checkbox’)

const items = ref([
‘Item 1’,
‘Item 2’,
‘Item 3’,

])

const submit = handleSubmit(values => {
alert(JSON.stringify(values, null, 2))
})

还没完成，下次…