vue的form的rule
时间: 2023-11-20 14:24:11 浏览: 37
Vue的表单验证规则(rules)是用于验证表单输入是否合法的一组规则。在Vue中,可以使用自定义的验证函数或者使用内置的验证规则来验证表单输入是否合法。具体实现步骤如下:
1. 在表单元素上绑定v-model指令,将表单元素的值绑定到Vue实例的数据属性上。
2. 在表单元素上绑定 :rules 属性,将验证规则传递给表单元素。
3. 定义验证规则的方法,可以使用内置的验证规则或者编写自定义的验证函数。
下面是一个使用内置验证规则的例子:
```html
<template>
<form>
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" :rules="usernameRules"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" :rules="passwordRules" type="password"></el-input>
</el-form-item>
</form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
usernameRules: [
{ required: true, message: '用户名不能为空', trigger: 'blur' },
{ min: 3, max: 10, message: '用户名长度必须在 3 到 10 个字符之间', trigger: 'blur' }
],
passwordRules: [
{ required: true, message: '密码不能为空', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度必须在 6 到 20 个字符之间', trigger: 'blur' }
]
}
}
}
</script>
```
在上面的例子中,我们定义了两个表单元素,一个是用户名输入框,一个是密码输入框,每个输入框都有对应的验证规则。其中,usernameRules 和 passwordRules 分别是数组类型,每个元素都是一个验证规则对象,包含了一些验证条件和提示信息。例如,{ required: true, message: '用户名不能为空', trigger: 'blur' } 表示用户名不能为空,如果为空则提示“用户名不能为空”,验证的时机是在失去焦点时(blur)进行验证。
在表单提交的时候,可以使用 $refs 属性获取表单元素,然后调用 validate 方法进行表单验证。例如:
```html
<template>
<form ref="form">
<!-- ... -->
<el-button type="primary" @click="submitForm">提交</el-button>
</form>
</template>
<script>
export default {
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单验证通过,提交表单
console.log(this.form)
} else {
// 表单验证失败
console.log('表单验证失败')
}
})
}
}
}
</script>
```
在 submitForm 方法中,我们通过 this.$refs.form.validate 方法进行表单验证。这个方法会返回一个布尔值,表示表单验证是否通过。如果验证通过,我们可以提交表单;如果验证失败,我们可以提示用户重新填写表单。