vue element form rules表单规则验证,输入框有值,但验证始终不消失问题的个人解决办法

这篇具有很好参考价值的文章主要介绍了vue element form rules表单规则验证,输入框有值,但验证始终不消失问题的个人解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

         做项目时在el-form中遇到了设定了表单验证规则,但只要输入值就显示未输入的情况:

vue element form rules表单规则验证,输入框有值,但验证始终不消失问题的个人解决办法,vue.js,javascript,前端

        根据网上查找的结果,rules中的名称要与from-item中的prop别名相同,看了一下没问题

vue element form rules表单规则验证,输入框有值,但验证始终不消失问题的个人解决办法,vue.js,javascript,前端

 vue element form rules表单规则验证,输入框有值,但验证始终不消失问题的个人解决办法,vue.js,javascript,前端

 后来在网上看到这篇文章:vue element form表单规则验证,有值,但验证始终不消失_杰瑞LJ的博客-CSDN博客

看到他的el-form参数里用的是:model而不是v-model,修改为:model之后的代码:

<el-form :rules="rules" :model="user" ref="userForm">
    <el-form-item label="用户名" :label-width="labelWidth" prop="username">
		<el-input v-model="user.username"></el-input>
	</el-form-item>
</el-form>

data(){
	return {
		labelWidth: '120px',
		user: {},
		rules: {
		    username: [{
				required: true,
				message: '请输入用户名',
				trigger: 'blur'
		    }]
		}
	}
}

vue element form rules表单规则验证,输入框有值,但验证始终不消失问题的个人解决办法,vue.js,javascript,前端

         成功!文章来源地址https://www.toymoban.com/news/detail-650365.html

到了这里,关于vue element form rules表单规则验证,输入框有值,但验证始终不消失问题的个人解决办法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 【vue】element-ui的form数组表单验证(循环表单验证)

    基于 vue2.0 的 element-ui 的 form 表单验证比较简单,但是有些同学可能对于 数组类型 的表单验证无从下手,这里我基于一个我自己项目中的例子,展示一下怎么进行数组的表单验证。 项目截图: 上代码,为了让大家看起来比较清晰,我删掉了无关的代码: 咱们把数组验证的部

    2024年02月07日
    浏览(53)
  • 解决Vue+Element UI使用表单rules国际化时From表单验证信息不能实时更新

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 博主在工作之余开始进行自动化测试平台的开发,虽然已经996一个月了但是还是在使劲挤时间做这件事情,目前平台使用前端框架 vue-element-admin 进行简化后二次开发,目前保留了原框架中的国际化

    2024年02月13日
    浏览(46)
  • vue:element-ui表单动态验证规则

    实现当是否发送消息选择是时,业务类型字段必填。 当你在一个表单中使用 el-form 和 el-form-item 来创建表单项时, el-form-item 的 :rules 属性可以用来设置该表单项的验证规则。我们希望根据用户在 \\\"是否发送消息\\\" 这个表单项中的选择动态设置 \\\"业务类型\\\" 这个表单项的验证规则

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

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

    2024年04月12日
    浏览(54)
  • vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据,动态校验规则】

    本文依旧沿用 ant design vue 组件库和 ts 语言🔥🔥更多内容见Ant Design Vue官方文档 🔥🔥 vue3 antd项目实战——Form表单【后台管理系统 v-model数据的双向绑定,input输入框、Radio单选框的嵌套使用】 在上期文章中,我们完成了 UI界面的渲染 (渲染效果如下图),本期文章将带着大

    2023年04月22日
    浏览(84)
  • element - - - - - form表单rules初始化校验飙红?

    通过form组件属性配置解决(validate-on-rule-change=“false”)

    2024年02月13日
    浏览(46)
  • Element-Puls Form表单内嵌套el-table表格,根据表格复选框多选或单选动态设置行的验证规则

    根据 Table 表格内的复选框来控制当前选中行是否添加必填校验规则 我们需要设置一个 flag 来标识已勾选的行,el-table渲染数据结构是数组对象形式,我们可以在每个对象中手动加如一个标识,例如默认:selected : false,如你的源数据中已有类似key,则可用它作于唯一标识 htm

    2024年02月02日
    浏览(60)
  • element-ui form表单的动态rules校验

    在vue 项目中,有时候可能会用到element-ui form表单的动态rules校验,比如说选择了哪个选项,然后动态显示或者禁用等等。 我们可以巧妙的运用element-ui form表单里面form-item想的校验规则来处理(每一个form-item项都可以单独校验)。 上代码: 重点是这个: :rules=“sqyxForm.jtpslx

    2024年02月15日
    浏览(47)
  • 【element-ui】form表单动态修改rules校验项

    在项目开发过程中,该页面有暂存和提交两个按钮,其中暂存和提交必填项校验不一样,此时需要动态增减必填项校验 ,解决方法如下: 增加rules校验项 删除rules校验项

    2024年02月04日
    浏览(56)
  • Avue组件或Element-UI动态修改rules验证规则或根据条件修改rules验证规则

    根据条件修改验证规则:el-form中若A为空,则B可为空,若A有值,则B必填,动态改变B的验证规则 在watch监听事件中,使用auve-form自带的:defaults.sync=\\\"defaults\\\"属性,来操作B的rules验证规则,此写法的效果好于el-form原生,因为设置为必填后会有必填标志* 使用watch监听A值的变化,若

    2024年02月12日
    浏览(47)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包