你知道吗？网页设计时，表格验证不能忽略。除了能让用户体验更好外，还影响着数据准确性和系统稳不稳定。作为一个用vue.js的爱好者来说，element-ui在这个环节表现特好，厉害得很！今天就跟大家说说怎么利用vue和element-ui进行数据校验和表格验证~
一、安装Element-UI和配置Vue项目
首先你得会用Element-UI，懂在Vue项目里怎么搞。基础当然不能少，毕竟这很重要！搞定后，在main.js文件里导入并注册一下就能随意用。这就跟盖房先打地基一样，虽然简单，但却关键。
二、Element-UI表单验证的基本用法
使用Element-UI的表单验证超容易也好用！先把表单放在Vue组件里，然后用el-form跟el-form-item搞定布局，每个项目都有专属的验证规矩。只需在data选项中定义规矩代码，再给el-form传过去，soeasy！效率也是杠杠的！
npm install element-ui --save
三、自定义验证规则
虽然element-ui给了我们很多验证功能，但有时候还是得靠自己动手。这时候，就用validator属性搭配一些自定义的验证方法，就搞定！这样的话，根据需求随心所欲地设置规则，保证每张表单填写准确无误
import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
四、处理验证结果
要搞定验证，就得看看它严谨不严谨。在处理数据的时候，我会用submitForm方法去查验this.$refs.form.validate，看看到底哪儿错了，就跟医生给病人体检似的。这么一搞，我就能知道是不是可以放心提交表单，同时也能告诉用户哪儿有误，让他们更满意！
五、重置表单数据
提交
重置
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: 20, message: '密码长度在6到20个字符之间', trigger: 'blur' }
]
}
};
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单验证通过，可以提交表单
console.log('表单验证通过');
} else {
// 表单验证不通过
console.log('表单验证不通过');
return false;
}
});
},
resetForm() {
this.$refs.form.resetFields();
}
}
};
老是要重置表格吗？不用担心，听我给你支个招儿！用Element-UI的话，直接用’this.$refs.form.resetFields’就能搞定。这个方法真的很实用，还能让代码更简单明了。
六、表单验证的高级应用
搞项目时我也遇到过头疼的表单校验问题，像是那些很复杂的多步表单，甚至还有在表单里面随便加新东西的那种。幸好有了Vue的飞快速度和Element-UI的动态校验功能，这些都不是事儿！虽然过程有点烧脑，但学到了不少Vue和Element-UI的新知识，感觉还是挺值得的。
七、优化表单验证的用户体验
总的说来，表单验证还得多加强，让咱们用着顺手才是王道。这当然对头，不过关键还是看验证有没有问题。还有，别忘了验证速度和提示信息要简单易懂。这样填起表格来才能更轻松愉快！
评论0