elementUI表单验证的问题

最新推荐文章于 2023-03-13 08:33:20 发布
最新推荐文章于 2023-03-13 08:33:20 发布
阅读量134 收藏 1
点赞数
分类专栏： 网站前端 文章标签： elementUI vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/frank_fong/article/details/89230361
版权 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>表单验证</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
  <div id="app" style="width: 600px; margin: 40px auto;">
    <el-form :model="modelOne" :rules="rules" label-width="120px">
      <el-form-item label="modelOne表单" prop="name1">
        <el-input v-model="modelOne.name1"></el-input>
      </el-form-item>
      <el-form-item label="modelTwo表单" prop="name2">
        <el-input v-model="modelTwo.name2"></el-input>
      </el-form-item>
    </el-form>
    <br>
    <p>使表单验证生效，必须：<br>1、同一个model；<br>2、同一个rules；<br>3、加prop名</p>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        modelOne: {
          name1: ''
        },
        modelTwo: {
          name2: ''
        },
        rules: {
          name1: [{
            required: true,
            message: '请输入内容',
            trigger: ['blur', 'change']
          }],
          name2: [{
            required: true,
            message: '请输入内容',
            trigger: ['blur', 'change']
          }]
        }
      }
    })
  </script>
</body>

</html>

 

弗兰克的天空
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementui 嵌套表单验证_vue elementUI 表单校验（多层嵌套）//终极版
weixin_32559133的博客
01-26 2233
相信搜索这个问题的兄弟萌都会看到这个链接vue elementui表单校验但是这篇文章的校验规则编写实际上是实际上存在一些问题的，然后在我自己的验证下试图总结一哈element表单的校验到底应该怎么写基础规则表单内部项绑定校验主要靠prop和rules，porp指明地址，rules声明规则表单顶层需要绑定一个model，此后表单内部的prop路径均基于这个model往下写。表单顶层可以选择绑定一个...
ElementUI 表单单个验证
阿狸演绎的博客
03-16 6154
ElementUI 表单单个验证 今日在工作遇到一个问题,需求是这样的,总共有12个字段,其中第四个字段如果填写了,第五个,第六个和第七个就非必填,如果第五个,第六个第七个填了,第四个就非必填 实例图 如果区域选择的是北京,则只要填写前三项就可以, 如果区域选择的是上海或者不选,则校验的是全部 如下图 解决方法 方案一 简单粗暴,好实现,技术含量低 直接将表单按字段拆分开,分成两个或者三个的表单,根据条件,校验需要的表单. 方案二 elementUI官方在表单校验文档中已经说明,取消单个校验的方法 结合这
element-UI表单验证报错问题
张杰伦的博客
09-28 474
今天学习时，使用elementui的表单验证发现输入内容还会报错 后来查阅资料发现 规则名要和表单v-model绑定的值相同，修改后解决错误
EasyUI表单验证
01-07
使用方法： <input class="easyui-textbox" required="true" validType="number"/> 或者 <input class="easyui-textbox" data-options="required:true,validType:'number'" />
vant 在 h5页面中引用 通过 CDN 引入
KLW75
09-03 3807
链接：https://youzan.github.io/vant/#/zh-CN/quickstart#fang-shi-si.-tong-guo-cdn-yin-ru 经常这样使用，这里留作备份。 <!-- 引入样式文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css" /> <!-- 引入 Vue 和 Vant 的 JS 文件 --&gt
可视化搭建 - 组件值校验
前端精读周刊
03-13 94
组件值校验，即在组件值变化时判断是否满足校验逻辑，若不满足校验逻辑，可以拿到校验错误信息进行错误提示或其他逻辑处理。声明 valueValidator 可开启值校验：import{ComponentMeta}from"designer"; constinput:ComponentMeta={ componentName:"input", element:Input,...
Vue/ Vue ELement框架、表单效验正则属性、兜底效验(点击登录后会验证文本框是否满足条件)
m0_64494670的博客
11-15 929
Vue/ Vue ELement框架、表单效验正则属性、兜底效验(点击登录后会验证文本框是否满足条件)
vue elementui form表单验证的实现
10-17
表单验证是任何Web应用中不可或缺的功能，它保证了用户提交的数据是符合预期格式的。本文将详细介绍如何在Vue项目中使用Element UI来实现表单验证。 Element UI提供了丰富的表单组件，例如 `<el-form>`、`...
Vue ElementUI之Form表单验证遇到的问题
08-29
Vue ElementUI之Form表单验证遇到的问题 Vue ElementUI是一个基于Vue.js的组件库，提供了许多实用的UI组件，其中Form表单验证是一个常见的问题。本文将主要介绍Vue ElementUI之Form表单验证遇到的问题，并提供解决...
vue elementUI 表单嵌套验证的实例代码
12-30
element中from组件内表单验证通过使用el-form标签，绑定model和rules属性进行表单验证 客户名称: size=small prop=belongId> <el v-show=false v-model=form.belongId></el> <ComSelectorCustom
表单页面常用的一些验证规则
ZhouXin_0819的博客
02-18 806
日常校验的规则 //1.手机号的验证 phone: [ { required: true, message: "请输入手机号码", trigger: "blur" }, { validator: function(rule, value, callback) {
EasyUi框架
qq_47455677的博客
07-04 842
EasyUi框架
Vue2，Vue3——Vant，Vant3自定义表单验证效果实现
NanChen的博客
01-27 1万+
官网上面有正则函数异步三种验证效果，但是并没有详细说明多个表单验证该如何实现，这里提一下 首先要有form标签 <van-form @submit="onSubmit"> 这个标签包裹提交按钮 onSubmit(values) { console.log("submit", values); }, 之后在里面写input框 <van-field v-model="form.tel" type="tel"
props传值的数据验证（类型、默认值、validator、自定义构造函数）
爱代码的小海的博客
09-27 1412
1.props校验 <template> <div> <!-- 自定义构造函数较为特殊，其他传参暂时忽略 --> <!-- 正常传参 --> <my-components :propsG='person'></my-components> <!-- 非正常传参 控制台报错 --> <my-components :propsG='12'></my
element ui rules校验记录，方便后续使用
专栏
08-22 535
记录校验
Element-UI中的表单验证
热门推荐
yhang0802的博客
07-03 1万+
Element-UI中的表单验证
ElementUI表单验证 错误提示不消失原因（最全面，一次解决）
weixin_46463341的博客
10-18 9682
ElementUI表单验证 错误提示不消失原因（最全面，一次解决）
element-ui的表单验证
pgzero的博客
12-21 2785
一、对单个表单域进行校验 如下，对于单个表单域，可以直接对表单域的rules参数进行配置，来实现格式验证，这种方法一般比较适用于格式验证比较简单的情况。 如果需要进行验证的字段比较多，或者验证规则比较复杂，那么最好使用下方对整个表单校验的方式 <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item
Element UI 表单验证
Deely_Lee的博客
07-24 492
element 表单验证，验证字段和验证规则分开写
elementui表单验证
最新发布
09-05
Element UI 提供了一套强大的表单验证机制，可以帮助开发者快速实现表单验证功能。下面是一个简单的示例，演示如何使用 Element UI 进行表单验证： 首先，确保你已经安装了 Element UI，并在项目中正确引入了相关的样式和组件。 然后，在你的 Vue 组件中，使用 `<el-form>` 和 `<el-form-item>` 组件包裹你的表单元素，并在需要进行验证的表单元素上添加 `prop` 属性指定该表单元素的唯一标识符。 接下来，通过添加规则对象，定义每个表单元素的验证规则。你可以通过 `rules` 属性传入一个对象，对象的键是表单元素的 `prop` 值，值是一个数组，数组中的每个对象表示一个验证规则。 最后，在提交表单时，可以通过调用 `<el-form>` 组件的 `validate` 方法来触发表单验证，如果验证通过，则执行相应的提交操作。 以下是一个示例代码： ```vue <template> <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' } ] } } }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单验证通过，执行提交操作 // ... } else { // 表单验证未通过 return false; } }); } } } </script> ``` 以上示例中，我们定义了一个包含用户名和密码的表单，为每个表单元素定义了相应的验证规则。在提交表单时，调用 `validate` 方法进行表单验证，如果验证通过，则可以执行提交操作。 这只是一个简单的示例，Element UI 还提供了更多的验证规则和自定义验证方法，可以根据具体需要进行配置。详细的文档可以参考 Element UI 官方文档中的表单验证部分。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值