校验步骤
1.下载插件
npm i [email protected]
2.导入组件,注册组件
import { Form , Field } from 'vee-validate',
components: {
Form,
Field
},
3.Form代替表单,Field代替input
<Form class="form" >
<template >
<Field class="form-item" >
<div class="input">
<i class="iconfont icon-user"></i>
<input type="text" placeholder="请输入用户名 " />
</div>
</Field>
<Field class="form-item">
<div class="input">
<i class="iconfont icon-lock"></i>
<input type="password" placeholder="请输入密码">
</div>
</Field>
</template>
<a @click="login()" href="javascript:;" class="btn">登录</a>
</Form>
4.Field里 加name=校验规则,
5.Field双向数据绑定v-model,字段名最好和接口文档一致 因为要发给后台
6.定义Field里的name属性的校验规则函数,Form的validation-schema接收校验规则是对象
7.Form里写v-slot="{errors}"
8.Field中 显示的错误提示 v-if="errors. "
9.需要重置数据得数据和校验规则,获取元素,然后resetField()
10.啥都没输入时候,点击登录做整体表单校验
Field默认解析成input,如果field想是组件得话 就加 as='组件名'
<Form class="form" v-slot="{errors}" :validation-schema="mySchema">
<template >
<Field class="form-item" name="name" v-model="form.name">
<div class="input">
<i class="iconfont icon-user"></i>
<input type="text" placeholder="请输入用户名 " />
</div>
<!-- 错误提示 -->
<div v-if="errors.name" class="error"><i class="iconfont icon-warning" />{
{ errors.name}}</div>
</Field>
<Field class="form-item" name="pwd" v-model="form.pwd">
<div class="input">
<i class="iconfont icon-lock"></i>
<input type="password" placeholder="请输入密码">
</div>
<!-- 错误提示 -->
<div v-if="errors.pwd" class="error"><i class="iconfont icon-warning" />{
{ errors.pwd}}</div>
</Field>
</template>
<a @click="login()" href="javascript:;" class="btn">登录</a>
</Form>
setup () {
// 表单信息对象
const form = reactive({
name: null,
pwd: null
})
// 校验规则
const mySchema = {
name (value) {
if (!value) return '请输入用户名'
if (!/^[a-zA-Z]\w{5,19}$/.test(value)) return '字母开头且6-20个字符'
return true
},
password (value) {
if (!value) return '请输入密码'
if (!/^\w{6,24}$/.test(value)) return '密码是6-24个字符'
return true
}
}
// 切换表单元素,还原数据和清除校验效果
const target = ref(null) // 获取元素
// 重置数据
form.name = null
form.pwd = null
// 校验效果清除,Form组件提供resetForm()
target.value.resetForm()
// 点击登录
const login = async () => {
// 对表单整体校验,validate函数
// Form组件提供了一个 validate_函数作为整体表单校验,当是返回的是一个promise
const valid = await target.value.validate()// 等校验通过做操作
console.log(valid)
//请求登录接口..
}
return { mySchema, login }
}