VUE+element-ui使用rules在提交时对form表单进行校验
步骤1.配置el-form在你的form表单中增加rules的配置,如<el-form ref="addFrom" :rules="rules" :model="addFrom" label-width="120px">...</el-form>2.配置el-form-item在对应的字段增加prop属性,如(注意此处prop属性要跟步骤3对应)<el-form re
·
步骤
1.配置el-form
在你的form表单中增加rules的配置,如
<el-form ref="addFrom" :rules="rules" :model="addFrom" label-width="120px">
...
</el-form>
2.配置el-form-item
在对应的字段增加prop属性,如(注意此处prop属性要跟步骤3对应)
<el-form ref="addFrom" :rules="rules" :model="addFrom" label-width="120px">
<el-form-item label="此处为金额" prop="Price">
<el-input v-model="addFrom.price" placeholder="请输入"></el-input>
</el-form-item>
</el-form>
3.配置规则
在export default的data中增加rules的规则配置
export default {
...
data() {
return {
...
rules: {
price: [{ required: true, message: '不能为空', trigger: 'blur' }]
},
...
}
},
4.提交时增加方法
//点击提交的方法
riskSubmit(){
//进行表单验证
this.$refs.updateForm.validate(valid => {
//表单验证失败
if (!valid) {
//提示语
this.$message("提示语");
return false;
}
//这里可以写表单验证通过之后执行的代码
//.......
});
},
通过以上四步,则可以完成提交时对表单进行校验
更多推荐
已为社区贡献6条内容
所有评论(0)