不用typescript,用element-plus框架,使用vue3的setup写一个标准的表单验证,不能使用vue2的一些东西
时间: 2024-03-10 16:43:12 浏览: 194
好的,让我们一步步来实现一个标准的表单验证:
1. 安装 `element-plus` 框架
```
npm install element-plus --save
```
2. 在 `main.js` 中引入 `element-plus`
```js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App).use(ElementPlus).mount('#app')
```
3. 在组件中引入需要的组件并定义表单数据和验证规则
```html
<template>
<el-form :model="form" :rules="rules">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const form = ref({
username: '',
password: ''
})
const rules = ref({
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
]
})
const submitForm = () => {
console.log('submit form')
}
const resetForm = () => {
console.log('reset form')
}
return {
form,
rules,
submitForm,
resetForm
}
}
}
</script>
```
在 `setup` 函数中,我们使用 `ref` 定义了表单数据和验证规则。其中,`form` 是一个对象,包含了 `username` 和 `password` 两个字段;`rules` 也是一个对象,包含了两个字段,每个字段都是一个数组,表示了该字段需要满足的验证规则。
4. 在 `submitForm` 方法中调用 `validate` 方法进行表单验证
```html
<template>
<el-form :model="form" :rules="rules">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
export default {
setup() {
const form = ref({
username: '',
password: ''
})
const rules = ref({
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
]
})
const submitForm = () => {
validateForm().then(() => {
console.log('submit form')
}).catch(() => {
ElMessage.error('表单验证失败')
})
}
const resetForm = () => {
console.log('reset form')
}
const validateForm = () => {
return new Promise((resolve, reject) => {
const formRef = ref(null)
const validate = () => {
formRef.value.validate((valid) => {
if (valid) {
resolve()
} else {
reject()
}
})
}
validate()
})
}
return {
form,
rules,
submitForm,
resetForm
}
}
}
</script>
```
在 `submitForm` 方法中,我们调用了一个新的方法 `validateForm`,该方法返回一个 `Promise` 对象,用于处理表单验证结果。在 `validateForm` 方法中,我们使用 `ref` 定义了 `formRef` 对象,该对象指向 `el-form` 组件的实例。然后,我们定义了一个 `validate` 方法,该方法调用 `el-form` 组件的 `validate` 方法进行表单验证,并在验证结果回调中判断是否验证通过,最后根据结果 resolve 或 reject Promise 对象。
5. 在 `resetForm` 方法中调用 `resetFields` 方法重置表单
```html
<template>
<el-form :model="form" :rules="rules" ref="formRef">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
export default {
setup() {
const form = ref({
username: '',
password: ''
})
const rules = ref({
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
]
})
const submitForm = () => {
validateForm().then(() => {
console.log('submit form')
}).catch(() => {
ElMessage.error('表单验证失败')
})
}
const resetForm = () => {
formRef.value.resetFields()
}
const validateForm = () => {
return new Promise((resolve, reject) => {
const formRef = ref(null)
const validate = () => {
formRef.value.validate((valid) => {
if (valid) {
resolve()
} else {
reject()
}
})
}
validate()
})
}
return {
form,
rules,
submitForm,
resetForm
}
}
}
</script>
```
在 `resetForm` 方法中,我们调用了 `formRef` 对象的 `resetFields` 方法,该方法用于重置表单。
6. 最后,我们可以在 `rules` 对象中添加更多的验证规则,以满足实际需求。
```html
<template>
<el-form :model="form" :rules="rules" ref="formRef">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
export default {
setup() {
const form = ref({
username: '',
password: ''
})
const rules = ref({
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
{ pattern: /^[a-zA-Z0-9]+$/, message: '只能包含数字和字母', trigger: 'blur' }
]
})
const submitForm = () => {
validateForm().then(() => {
console.log('submit form')
}).catch(() => {
ElMessage.error('表单验证失败')
})
}
const resetForm = () => {
formRef.value.resetFields()
}
const validateForm = () => {
return new Promise((resolve, reject) => {
const formRef = ref(null)
const validate = () => {
formRef.value.validate((valid) => {
if (valid) {
resolve()
} else {
reject()
}
})
}
validate()
})
}
return {
form,
rules,
submitForm,
resetForm
}
}
}
</script>
```
在 `password` 字段中,我们添加了一个正则表达式规则,用于限制只能包含数字和字母。
阅读全文