elementui rules validator
时间: 2023-05-14 10:04:53 浏览: 203
element-ui的表单组件提供了rules属性来进行表单验证。rules属性是一个数组,每个元素都是一个对象,用来描述一个表单项的验证规则。
每个验证规则对象包含以下属性:
- required:是否必填,true表示必填,false表示非必填,默认为false。
- message:验证失败时的提示信息。
- trigger:触发验证的事件,默认为blur。
- validator:自定义验证函数,接收两个参数:rule和value,分别表示当前验证规则和当前表单项的值。函数返回一个布尔值,true表示验证通过,false表示验证失败。
例如,以下代码定义了一个包含两个表单项的表单,其中第一个表单项必填,第二个表单项必须是数字:
```
<template>
<el-form :model="form" :rules="rules">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: ''
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ validator: this.validateAge, trigger: 'blur' }
]
}
}
},
methods: {
validateAge(rule, value) {
if (!value) {
return true;
}
if (isNaN(value)) {
return false;
}
return true;
},
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单验证通过,提交表单
} else {
// 表单验证失败,提示错误信息
}
});
}
}
}
</script>
```
阅读全文