vue表单校验一直不通过

el-form表单校验需要注意的地方，很容易出现问题而发现不了

el-form 的model属性和ref属性的值不要求一定相同，它们可以不一样，但是model属性的值一定是一个对象，且el-form-item中的el-input的v-model的值需要是el-form 的model值对象的直接一级属性，如果不是直接一级属性，那么校验函数validate(valid=>{})就会一直走false，导致校验永远无法通过。

比如下面代码：el-form的model值为data中的一个名为activityForm的对象，el-input的v-model值为activityForm对象里面的直接属性的值，如果activityForm对象有多层级属性嵌套，也一定要处理为v-model值是model对象值的直接属性才能做表单校验。el-form的ref值是字符串ruleForm。

<el-form :model="activityForm" :rules="rules" ref="ruleForm" label-width="100px"><el-form-item label="活动名称" prop="name"><el-input v-model="activityForm.name"></el-input></el-form-item><el-form-item label="活动时间" required><el-col :span="11"><el-form-item prop="date1"><el-date-picker type="date" placeholder="选择日期" v-model="activityForm.date1" style="width: 100%;"></el-date-picker></el-form-item></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-form-item prop="date2"><el-time-picker placeholder="选择时间" v-model="activityForm.date2" style="width: 100%;"></el-time-picker></el-form-item></el-col></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item>
</el-form>
<script>export default {data() {return {activityForm: {name: '',date1: '',date2: ''},rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],date2: [{ type: 'date', required: true, message: '请选择时间', trigger: '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>

vue表单校验一直不通过相关推荐

vue表单校验，根据某选项追加或去掉校验
这是自己随便写的小测试,包括字段名取得都乱七八糟,敬请谅解. 需求根据状态这个下拉框数据来判断经办人和日期是否需要校验, 状态值为在职时校验, 状态值为离职时不校验. 实现代码 1.表单 (正常校验 ...
vue表单校验json数组格式和普通数组格式数据
1.效果图说明:3种动作,对应3种验证规则,动作1:数字对象或数组均可(空也可):动作2:只有数组对象可通过验证:动作3:数字类型可通过验证 2.代码实现 (1)template(注意这里的循环数据 ...
vue表单校验之bluer，change
今天发现,如果设置select的trigger:'blur'就算选择之后还是边框是红色的,之后查了一下iview的文档,也没有找到准确的蚊子描述,只看到form那个组件其中有一个例子,大概是selec ...
VUE表单校验，金额
rules: {money: [{ required: true, message: '请输入金额', trigger: 'blur' },{pattern: /^(([1-9]{1}\d{0,9}) ...
vue form validate 多个input_Vue表单校验插件Vuerify使用详细教程及示例
点击右上方红色按钮关注"web秀",让你真正秀起来前言表单校验,在开发中是非常常见的,为了防止用户误操作,填写错误数据,亦或是防止用户恶意提交数据等,都需要前端同学来做一些简单 ...
activeform表单中的旧数据怎么显示_三分钟为你细数 Vue el-form 表单校验的坑点
背景 Vue 的 el-form 提供了表单校验功能,通过 :rules 属性设置校验规则,并通过 el-form-item 的 prop 属性绑定校验规则.通过封装,让前端校验更方便.具体使用过程中 ...
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...
vue如何制作自定义表单校验样式
vue如何制作自定义表单校验样式先上效果图由于vue的优越性,所以衍生出很多与之匹配并非常受欢迎的ui组件库,比如最常见的element-ui和antvue,两者内容几乎相同,样式略有差异,所以在 ...
问卷调查：vue element动态生成表单、表单校验以及表单提交
有任何疑问和问题欢迎大家提出来,一起学习,相互监督,共同进步! 需求:题型包含:单选题.多选题.文本框.矩阵题型实现功能的相关技术:vue(router,axios,element-ui) 实现结果 ...

vue表单校验一直不通过

el-form表单校验需要注意的地方，很容易出现问题而发现不了

vue表单校验一直不通过相关推荐

最新文章

热门文章