首页 > 其他分享 >iview Form表单校验失效问题

iview Form表单校验失效问题

时间:2023-09-15 13:44:05浏览次数:39  
标签:Form 校验 表单 message password true prop iview

校验规则的 prop名称要和 v-model中的字段名称一致,否则会校验不通过,例如password输入框,prop为passwordProp,字段名称为password,即使输入字段也会校验不通过

<template>
    <Form ref="formRef" :model="formInline" :rules="ruleInline" inline>
        <FormItem prop="user">
            <Input type="text" v-model="formInline.user" placeholder="请输入用户名" />
        </FormItem>
       <FormItem prop="passwordProp">
            <Input type="text" v-model="formInline.password" placeholder="请输入密码" />
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit">提交</Button>
        </FormItem>
    </Form>
</template>
<script>
    export default {
        data () {
            return {
                formInline: {
                    user: '',
                    password:''
                },
                ruleInline: {
                    user: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    passwordProp: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit() {
                this.$refs.formRef.validate((valid) => {
                    if (valid) {
                        this.$Message.success('校验成功!');
                    } else {
                        this.$Message.error('校验失败!');
                    }
                })
            }
        }
    }
</script>

 

标签:Form,校验,表单,message,password,true,prop,iview
From: https://www.cnblogs.com/qianabby/p/17704843.html

相关文章

  • 表单提交页面刷新问题
    背景在template中使用了<form></form>,在form中使用了buttonbutton绑定了onClick事件,进行非提交表单的操作当点击button时页面会自动刷新原因form标签在提交的时候会自带刷新页面的请求button标签默认type="submit",放在form中使用点击就会触发submit解决使用input代替......
  • vue实现请再次输入密码的表单校验
     1、获取第一次输入的密码的值2、比较两次密码的值是否相等3、如果不一致返回错误信息this.userInfo.password2:获取第一次输入的密码;value当前校验值;validator自定义校验规则;constConfirmPassword=(rule,value,callback)=>{if(value!==this.userInfo.password2){......
  • 一个简单的 Python 实现希尔伯特-黄变换(Hilbert-Huang Transform,简称HHT)的例子
     importnumpyasnpfromscipy.signalimportargrelextremadefemd(data):"""经验模式分解(EmpiricalModeDecomposition,EMD)"""#找到极值点max_points,min_points=argrelextrema(data,np.greater,axis=0)max......
  • element - 多表单验证必填
    方式1、该方法原文地址:https://blog.csdn.net/yprufeng/article/details/113052798方式2、//封装的js文件exportfunctionvalidateForms(formRefs){letobjectList=[];letresults=formRefs.map(formRef=>newPromise((resolve,reject)=>{......
  • @DatetimeFormat与@JsonFormat
    @DateTimeFormat(pattern=“yyyy-MM-ddHH:mm:ss”)是将String转换成Date,一般前台给后台传值时用@JsonFormat(pattern=“yyyy-MM-ddHH:mm:ss”,timezone=”GMT+8”)将Date转换成String一般后台传值给前台时......
  • springmvc中设置请求方式的转换,将post请求转换为put与delete,需要在web.xml中设置过滤
    2023-09-15web.xml<!--请求方式过滤器--><filter><filter-name>HiddenHttpMethodFilter</filter-name><filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class></filter><filter......
  • 为什么基于transformer的序列分类不用decoder模块?
    Transformer原本是为机器翻译设计的编码-解码(Encoder-Decoder)结构。在序列分类任务中,主要利用的是Transformer的Encoder模块来获取输入序列的特征表示,而不需要Decoder模块,主要有以下原因:解码模块主要用来生成目标序列,而分类任务只需要判别整个源序列的类别,不需要生成目......
  • 界面组件DevExpress WinForms v23.1亮点 - 全新升级HTML & CSS模板
    DevExpressWinForms拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应用程序,无论是Office风格的界面,还是分析处理大批量的业务数据,它都能轻松胜任!DevExpressWinForm 控件已正式发布v23.1版本,此版......
  • vue2.0 表单验证明明有值却提示错误
    明明有值却总是提示为空我的解决方法时将number转为字符串验证方法如图:(验证只可以输入数字)赋值时转为字符串: ......
  • 一个基于Vue模型的表单生成器
    哈喽,我是老鱼,一名致力于在技术道路上的终身学习者、实践者、分享者!VuetifyFormBase是一个基于模型的表单生成器,目的是提供一个工具,以便以较少的努力从任何模型数据生成可编辑的表单,即使模型是一个深度嵌套的对象。VuetifyFormBase作为Vue组件工作,可以很容易地集成到任何VU......