vue的rules验证失效,部分可以部分又失效的原因

这篇具有很好参考价值的文章主要介绍了vue的rules验证失效,部分可以部分又失效的原因。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue的rules验证失效,部分可以部分又失效的原因

很多百度都有,但是我这里遇到了一个特别的,那就是prop没有写全,导致验证某一个失效
例子:
正常写法

 el-form-item....多个省略
 <el-form-item label="胶币" prop="cost">
   <el-input v-model="form.cost" type="number" placeholder="请输入胶币"  />
</el-form-item>
<el-form-item label=""  prop="maxNum">
   <span slot="label">
      允许人数<span style="font-size: 12px; color: red">(偶数)</span>
   </span>
  <el-input v-model="form.maxNum" type="number" placeholder="请输入允许人数"/>
</el-form-item>
<el-form-item label="参与时间" prop="startTime">
     <el-date-picker
        v-model="startAndEndTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="datePickerChange"
        :picker-options="forbiddenTime"
        type="datetimerange"
        range-separator=""
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
</el-form-item>

问题的写法

 el-form-item....多个省略
 <el-form-item label="胶币">
   <el-input v-model="form.cost" type="number" placeholder="请输入胶币"  />
</el-form-item>
<el-form-item label=""  prop="maxNum">
   <span slot="label">
      允许人数<span style="font-size: 12px; color: red">(偶数)</span>
   </span>
  <el-input v-model="form.maxNum" type="number" placeholder="请输入允许人数"/>
</el-form-item>
<el-form-item label="参与时间" prop="startTime">
     <el-date-picker
        v-model="startAndEndTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="datePickerChange"
        :picker-options="forbiddenTime"
        type="datetimerange"
        range-separator=""
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
</el-form-item>

这里 prop="cost"没有写,就会导致问题,所以要写全,即使不做校验文章来源地址https://www.toymoban.com/news/detail-765848.html

到了这里,关于vue的rules验证失效,部分可以部分又失效的原因的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue表单验证rules无效,rules动态选择,rules动态校验,rules对象嵌套校验

    一、问题描述 这里由一个动态切换规则校验引发的一些问题,整理了下,如下文所示。 这里有个需求就是,动态切换radio,对input输入框校验,界面如下 在网上找了一圈,用了第一种方法来解决,动态添加验证规则,方法如下 通过if判断platformType是否等于2,然后添加规则,

    2023年04月19日
    浏览(19)
  • vue rules 表单验证 选中数量

    Vue表单验证是一种验证用户输入的方式,可以确保用户输入的数据符合特定的规则和要求。 在Vue中,可以使用内置的表单验证规则或自定义验证规则来验证用户的输入。 下面是一个示例,展示如何使用Vue的规则表单验证和计算选中数量的例子: HTML代码: JavaScript代码: 在上

    2024年01月22日
    浏览(16)
  • vue表单验证rules以及validator验证器的使用

    为防止用户犯错,尽可能更早地发现并纠正错误。 Element中Form (表单)组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。 注意:prop对应表单域 model 字段,使用 validate方法时,该属性是必填的。 目

    2024年02月03日
    浏览(12)
  • uniapp小程序,部分 ios 真机测试出现 input 输入框内容 跳动 问题

    前言 :最近在写uniapp小程序,遇到一个问题,在此记录一下,也希望能帮助到一些小伙伴。 问题 :表单输入的时候,在个别 ios 真机上面测试时,快速输入和快速删除,会发现输入的文字或者数字,有自动删除、闪动、来回跳动等现象,经过查询各种资料,以及咨询官方得

    2024年02月11日
    浏览(23)
  • 前端-element输入框-input的一些限制(只能输入正整数和0,或者只能输入数字不可以汉字字母)

    1、input输入框只能输入正整数和0 那你就用  οnkeyup=\\\"value=(value.replace(/D/g,\\\'\\\')==\\\'\\\'?\\\'\\\':parseInt(value))\\\" 2、如果是正数负数0,包括小数都可以 那就用这个οnkeyup=\\\"value=value.replace(/[^-?d.]/g,\\\'\\\')\\\",不能输入汉字和字母 3、不能输入中文,可以输入正数、负数、小数和字母  οnkeyup=\\\"value=v

    2024年02月13日
    浏览(19)
  • Vue中rules表单验证,表单必填*显示位置不对,*显示位置错误

    在data中编写rules规则: 其中name为prop名 type:类型 required:是否必选项(此栏是否为空) message:\\\"“设置不符合校验规则时的提示信息; trigger:”\\\"设置校验的触发方式: ‘change’:数据改变时触发; 常用:对 input 输入框的验证 ‘blur’:失去焦点时触发; 常用:下拉框select,日

    2024年02月04日
    浏览(21)
  • vue v-model失效原因及解决方案

    绑定的值没有及时更新,可能是由于异步操作导致的。 解决方案: 可以使用 Promise 或 async/await 等方式来等待异步操作完成后再更新数据,或者使用 Vue.nextTick 方法来确保 DOM 已经更新。 绑定的值在组件内部被修改,但是没有使用 Vue.set 或 this.$set 方法来更新,导致变化无法被

    2024年02月11日
    浏览(13)
  • 【Element Ui】 vue3中修改el-form的rules后不触发自动校验,再次修改rules时清除验证信息

    项目要求:类型为“业务备货”的时候,“客户”为必填项 效果如下: 代码如下: 重点:

    2024年04月12日
    浏览(24)
  • 解决使用element ui时el-input的属性type=number,仍然可以输入e的问题。

    使用element ui时el-input的属性type=number,仍然可以输入e, 其他的中文特殊字符都不可以输入,但是只有e是可以输入的,原因是e也输入作为科学计数法的时候,e是可以被判定为数字的, 但是有些场景是需要把e这种情况屏蔽掉的,我们可以使用如下的方法。 在进行键盘事件输入

    2024年02月08日
    浏览(23)
  • Vue3输入框(Input)

    参数 说明 类型 默认值 必传 width 输入框宽度 string | number ‘100%’ false addonBefore 设置前置标签 string | slot ‘’ false addonAfter 设置后置标签 string | slot ‘’ false allowClear 可以点击清除图标删除内容 boolean false false password 是否启用密码框 boolean false false disabled 是否禁用 boolean fal

    2024年02月15日
    浏览(26)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包