vue自定义rules,对input表单输入框校验重复值

这篇具有很好参考价值的文章主要介绍了vue自定义rules,对input表单输入框校验重复值。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

对input表单输入框检验重复值,如对如下图参数名进行校验重复值 

el-form-item添加属性:rules="rules.paramname"

vue自定义rules,对input表单输入框校验重复值

1.写一个rules

rules: {
       
        paramname: [
            {  required: true, validator: this.validateTitle, trigger: 'blur' }
        ],
        
      },

2.Method里面添加如下方法

rule:指的是表单中rules属性

value:指的表单输入框中输入的值

callback:回调函数(再次调用校验函数)文章来源地址https://www.toymoban.com/news/detail-504799.html

//参数名称校验
    validateTitle (rule, value, callback) {

      if (typeof value === 'undefined'||value.length == 0) {
        // callback(new Error('请输入参数'))
        this.$message({
                    message:'【参数名】不可以为空',
                    type: 'warning'
                })
      } else {
        try {
            let x = 0;
            for(let i = 0; i < this.myform.userList.length; i++ ){
              if (this.myform.userList[i].name == value){
                  x=x+1;
              }
              if(x == 2){
                throw new Error("type-check-error");
              }
            }
            callback()
            return true
        } catch (e) {
            if (e.message == "type-check-error") {
                this.$message({
                    message:'【参数名:'+value+'】已存在',
                    type: 'warning'
                })
                return false
            }
        }

      }
    },

到了这里,关于vue自定义rules,对input表单输入框校验重复值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vue+element多层表单校验prop和rules

    核心点:外层循环是item和index,内层循环是item2和index2 如果都是定义的同一个属性名 外层循环得写 :prop=\\\"\\\'block.\\\'+index+\\\'.numerical\\\'\\\" 同理内层循环就得写 :prop=\\\"\\\'objectSpecs.\\\'+ index2 + \\\'.numerical\\\'\\\" 校验函数方法 :rules=\\\"getRules(item2, item2.name)\\\"

    2024年02月13日
    浏览(14)
  • Vue中form表单校验rules的问题(对象数组过滤新对象数组 ,对象校验,数组校验,)

    const data = reactive({ form: { js //往数组中添加这八个相机配置参数 for(var i=0;i8;i++){ const clonedLightObject1 = { …data.form.lightObject1 }; clonedLightObject1.productNameId=pid clonedLightObject1.cameraType=i clonedLightObject1.shootingNumber=1 页面

    2024年02月08日
    浏览(23)
  • 【Vue3+Ts project】vant4 实现触发指定表单 rules校验、setTimeout和 setInterval 区别

      一.使用 vant组件  validate属性 实现 触发指定输入框rules校验 ,满足校验通过否则失败  1. 给form表单绑定 ref并定义值名称 ,然后为你想校验的表单绑定 name值 2.为ref的值名称定义变量名 ,然后 ref值名称.value.validate(\\\'name值名称\\\'),.then接收成功 , .catch 接收失败   二. setT

    2024年02月11日
    浏览(28)
  • form rules校验:动态table中input校验

    使用antd的form-model的rules表单校验 那如图表格中的input如何也一同校验? 如图可见规则是一个数据结构为二维数组的可动态生成的表格,如何对其中的input进行校验? 先分析简单点的问题,表格是数组,且input是放在插槽里的,如何进行校验? 代码中editParam为表单校验的整体

    2023年04月08日
    浏览(18)
  • 关于表单校验,:rules=“loginRules“

     在写好validator相关的方法后,rule测试没有生效 el-form ref=\\\"loginForm\\\" :model=\\\"loginForm\\\" :rules=\\\"loginRules\\\" class=\\\"login-form\\\" el-form-item prop=\\\"username\\\" el-input           ref=\\\"username\\\"           v-model=\\\"loginForm.username\\\"           placeholder=\\\"Username\\\"           name=\\\"username\\\"

    2024年02月03日
    浏览(14)
  • vue element form rules表单规则验证,输入框有值,但验证始终不消失问题的个人解决办法

             做项目时在el-form中遇到了设定了表单验证规则,但只要输入值就显示未输入的情况:         根据网上查找的结果,rules中的名称要与from-item中的prop别名相同,看了一下没问题    后来在网上看到这篇文章:vue element form表单规则验证,有值,但验证始终不消失

    2024年02月12日
    浏览(25)
  • vue+element,form循环嵌套表单 、动态添加表单、嵌套表单自定义校验规则

    原文发布链接:https://juejin.cn/post/7181752966611730492 需求: 可点击新增,自动添加表单。(这个不难v-for即可) 可自定义方法校验添加的表单内容。(需要掌握element组件的规则,本人没有熟读官网,碰壁好多次才整理出来这篇文章。重要的事说3遍: 看官网看官网看官网 ) 效果

    2024年02月04日
    浏览(35)
  • vue3中,form表单校验之特殊字符校验、手机号、身份证号、百分制数字 & route和router的写法 & setup的两种用法 & rules中校验之blur和change

    vue3中,form表单校验之特殊字符校验、手机号、身份证号、百分制数字 route和router的写法 setup的两种用法 rules中校验之blur和change 1、写法一 index.vue 2、写法二完整版 index.vue 2、校验文件 srcutilsvalidate.ts

    2024年02月05日
    浏览(20)
  • vue表单中输入框事件的使用@input、@keyup.enter、@change、@blur

    1、@input(v-on:input) 此触发方法适合在查询条件或实时规则校验中使用。 2、@keyup.enter 此触发方法与v-on:input方法区别在于:input事件是实时监控,每次输入都会触发调用,而@keyup.enter则是在键盘点击回撤按键触发,且在手机端则需要点击输入键盘上的确定按键触发。 3、@cha

    2024年02月15日
    浏览(17)
  • element-ui 表单校验 rules 配置

    指示type要使用的验证器。可识别的类型值为: string :类型必须为 string 。 type  默认是  string。 number :类型必须为 number 。 boolean :类型必须为 boolean。 integer :类型必须为  number  且为整数。 float :类型必须为  number  且为浮点数。 array :类型必须为数组。 enum :值必须

    2024年02月04日
    浏览(17)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包