ElementUI增加,删除,修改的实现及表单验证
以下是一个使用Vue.js和Element UI创建的简单示例,包括增加、删除和编辑功能,以及表单验证。
<template>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<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('form')">提交</el-button>
<el-button @click="resetForm('form')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('提交成功!');
} else {
console.log('验证失败');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
在这个示例中,我们使用了Element UI的<el-form>
组件来创建表单,并通过v-model
进行数据双向绑定。rules
属性用于定义表单验证规则,以确保用户输入的数据是有效的。我们还提供了submitForm
和resetForm
方法,分别用于提交和重置表单。这个示例提供了一个简单的表单添加、编辑和验证的场景。
评论已关闭