Vue表单验证，表单填写完成无法通过rules验证问题

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量1.1k 收藏
点赞数
文章标签： vue.js javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kobe_IT/article/details/131303077
版权

表单校验使用的是ElementUI官网的表单校验规则，但是表单在填写完成后还是通不过校验，这就需要进行相应的检查

1.检查rules与ref，rules与ref的名字可以随便定义，但是要确保在这块写的与在data中定义的一致

2.检查<el-form-item>标签中prop值与绑定的属性一致，例如prop="title"，在data中rules规则绑定的属性也必须是title属性

3.检测表单是否一致，例如:model="Form"与data中定义的表单名是否一致

 

kobe_IT
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue+ element ui 表单验证有值但验证失败问题
01-19
一.如图：有值但是验证失败 二. <el model=form rules=rules> <el label=数据模板 prop=template> <el span=20> <el type=textarea v-model=form.template rows=8 placeholder=请输入数据模板 readonly=true></el> </el> </el> </el> export default { data()
element 结合vue 在表单验证时有值却提示错误的解决办法
01-21
绑定的值与规则指定的值一定要相同——- 第一步： <el model=ruleForm rules=rules ref=ruleForm label-width=100px class=demo-ruleForm> 加上rules ref 第二部： <el label=活动名称 prop=name> <el v-model=ruleForm.name></el> </el> 加上prop 第三部： rules: { name: [ { required: true, messag
for循环遍历的`form表单组件`rules规则校验失效问题——输入内容后依然提示必填，亲测有效——基础积累
yehaocheng520的博客
05-09 6688
for循环遍历的`form表单组件`rules规则校验失效问题——输入内容后依然提示必填，亲测有效
vue.js表单密码强度验证代码
06-24
vue.js表单密码强度验证代码是一款适用于手机注册表单输入密码强度验证特效。
vue 表单验证按钮事件交由父组件触发的方法
12-29
vue 表单验证按钮事件交由父组件触发，不直接再子组件上操作的方法 子组件： //内容部分 <Form ref=formCustom :model=formCustom :rules=ruleCustom :label-width=80> <FormItem label=Age prop=age> <Input type=text v-model=formCustom.age number></Input> </FormItem> <FormItem> <Button type=primary @click=handleS
vue有关elementui form表单rules验证问题，有值却仍然显示不通过
热门推荐
web15085181368的博客
03-02 1万+
帮同事解决一个vue表单验证的问题，利用了rules，但是填完内容还是一直提示不能为空的错误，情况如下图所示： 1、检查:rules ref，例如本黎:rules=“rules” ref="reluForm"是否与data中定义的一致 2、检查prop值与绑定的属性一致，例如本例中prop="title"中title与data中rules规则绑定的属性一一对应 3、检测表单是否一致，例如本例中:model="addForm"与data中定义的表单名是否一致 以上都检查过没有问题 <el-form :
vue 表单校验不通过问题
qq_41615095的博客
07-07 3172
vue 表单校验
vue表单校验一直不通过
weixin_44293690的博客
05-16 2187
el-form 的model属性和ref属性的值不要求一定相同，它们可以不一样，但是model属性的值一定是一个对象，且el-form-item中的el-input的v-model的值需要是el-form 的model值对象的。比如下面代码：el-form的model值为data中的一个名为activityForm的对象，el-input的v-model值为activityForm对象里面的直接属性的值，el-form的ref值是字符串ruleForm。
antd +vue3 a-form表单验证（校验）规则填写数值后提示仍然存在的问题 嵌套
lpfhjw的博客
10-24 4067
antd +vue3 a-form表单验证（校验）规则填写数值后提示仍然存在的问题 嵌套 TS 表单验证失效
使用vue中的混入mixin优化表单验证插件问题
10-16
主要介绍了使用vue中的混入mixin优化表单验证插件,本文是小编给大家总结的一些表单插件的问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
iview表单rules验证有内容但是报了校验的错误
Lucky_bo的专栏
09-01 2207
在vue项目入引入了iview，使用Form表单的rules校验 设置的model和rules值都是对的 但是依然会报错 校验代码如下： weight:[{ { required:true, message:"重量不能为空",trigger:'blur'} }] 一开始很疑惑，因为对比了规则都是没问题的，但是最后发现 rulesObj:{ weight:"", //string 类型 } 但是我们 v-model="rulesObj.weight " 传进来...
vue + iview rules表单验证有值却提示错误，验证不过
weixin_39818813的博客
04-01 3290
内容 <FormItem label="重量（KG）" prop="grossWt"> <Input v-model="detailData.grossWt" /> <!-- {{ detailData.grossWt }} --> </FormItem> rules grossWt: [{ required: true, message: ".
表单验证正确输入无法通过
qq_43336481的博客
05-14 433
treeselect v-model="form.sysUser.deptId" :options="deptOptions" :normalizer="normalizer" :show-count="true" placeholder="请选择归属部门" /><el-input v-model="form.sysUser.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
vue中rules规则校验input框有值却不通过
weixin_44046781的博客
08-20 3418
vue中rules规则校验input框有值却不通过 一般是数据类型影响的 一般是后端给的数据是number类型的 渲染时把数据tostring一下就可以了
Vue中rules表单验证，表单必填*显示位置不对，*显示位置错误
god_sword_的博客
03-01 4167
Vue中rules表单验证，表单必填*显示位置不对，*显示位置错误
关于uview小程序表单校验不生效问题，以及小程序自定义校验
xiaoxiongxia的博客
07-31 2011
关于uview小程序表单校验不生效问题，以及小程序自定义校验
uniapp 报错之 uView UI 表单校验 相关字段有数据有值的情况下非空验证失败问题
YZRHANYU的博客
11-21 3436
uniapp 报错之 uView UI 表单校验 相关字段有数据有值的情况下非空验证失败问题
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 658
步骤很详细，直接上教程……
vue rules 表单验证数组
07-27
在Vue中，可以使用Vue的表单验证规则来验证数组。下面是一个示例代码，演示如何使用Vue的表单验证规则来验证数组： 首先，在Vue组件中定义一个包含数组的表单数据对象，并为每个数组元素定义验证规则。例如，我们有一个名为"items"的数组，每个元素都应该是字符串，并且不能为空。 ```html <template> <form @submit="submitForm"> <div v-for="(item, index) in items" :key="index"> <input v-model="items[index]" :class="{ 'is-invalid': !isItemValid(index) }"> <div v-if="!isItemValid(index)" class="invalid-feedback">Item is required.</div> </div> <button type="submit">Submit</button> </form> </template> <script> export default { data() { return { items: ['', '', ''], // 初始值为空字符串的数组 }; }, methods: { submitForm() { // 在提交表单时，检查每个数组元素是否满足验证规则 if (this.items.every(item => item !== '')) { // 执行提交表单的操作 console.log('Form submitted successfully!'); } else { console.log('Form validation failed!'); } }, isItemValid(index) { // 验证特定索引的数组元素是否满足验证规则 return this.items[index] !== ''; }, }, }; </script> ``` 在上面的代码中，我们使用`v-for`指令遍历数组，并使用`v-model`指令将输入框与数组元素进行绑定。使用`:class`绑定了一个条件类，当数组元素不满足验证规则时添加`is-invalid`类，以便显示样式上的错误提示。同时，我们在每个输入框后面显示了一个错误提示信息，只有当数组元素不满足验证规则时才会显示。 在`submitForm`方法中，我们使用`every`方法检查所有数组元素是否都不为空字符串，如果是，则表示表单验证通过，可以执行提交表单的操作。 上述代码只是一个简单的示例，你可以根据具体的需求和验证规则进行更复杂的表单验证。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值