把代码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))
})
还没完成,下次…