Element UI 是一个基于 Vue 的前端 UI 框架，提供了丰富的组件用于快速构建界面。在 Element UI 中，可以使用表单验证功能对用户输入的数据进行校验。
在 Element UI 中，可以使用表单（Form）组件和表单项（Form-Item）组件结合校验规则（rules）进行表单验证。表单项组件提供了输入框（Input）、选择框（Select）、开关（Switch）、日期选择器（DatePicker）等多种输入组件，可以方便地对不同类型的数据进行校验。
例如，以下是一个简单的 Element UI 表单验证的示例：
       
       
         
<template>
<el-form :model="form" :rules="rules" ref="form" 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 v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
var validateUsername = (rule, value, callback) => {
if (!value) {
return callback(new Error('请输入用户名'));
}
setTimeout(() => {
if (['admin', 'test'].includes(value)) {
callback(new Error('该用户名已被占用'));
} else {
callback();
}
}, 1000);
};
var validatePassword = (rule, value, callback) => {
if (!value) {
return callback(new Error('请输入密码'));
}
if (value.length < 6) {
return callback(new Error('密码长度不能小于6位'));
}
callback();
};
return {
form: {
username: '',
password: ''
},
element表格横向滚动条
rules: {
username: [{ validator: validateUsername, trigger: 'blur' }],
password: [{ validator: validatePassword, trigger: 'blur' }]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('提交成功');
} else {
console.log('error submit!!');
return false;
}
});
}
}
};
</script>
       

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。