element-plus新增用户的表单校验例子
时间: 2023-06-08 09:06:35 浏览: 266
好的,让我来回答你的问题。
element-plus是一个Vue 3.0的UI组件库,它提供了很多优美的界面和易于使用的组件。以下是一个使用element-plus实现表单校验的例子:
```html
<template>
<el-form :model="form" :rules="rules" ref="form" label-width='120px' size="medium">
<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 label="确认密码" prop="repassword">
<el-input type="password" v-model="form.repassword"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">提交</el-button>
<el-button @click="resetForm('form')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: 'Example',
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.form.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
form: {
username: '',
password: '',
repassword: '',
email: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
],
repassword: [
{ required: true, validator: validatePass, trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert('submit');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
```
以上代码实现了一个包含用户名、密码、确认密码和邮箱的表单,并使用了element-plus提供的表单组件:el-form、el-form-item、el-input和el-button。同时,我们还定义了一个rules对象作为表单校验规则,并使用validator属性添加自定义校验函数。
其中,validatePass函数为自定义的密码确认校验函数,该函数判断两次输入的密码是否一致,如果不一致则返回一个errorMessage,并使用validator属性将其添加到repassword校验规则中。使用this.$refs[formName].validate()可以触发表单校验。
这便是一个使用element-plus实现表单校验的例子。希望我的回答能够帮到你。
阅读全文