element form 对单个或几个input、select表单校验

最新推荐文章于 2023-05-10 19:07:35 发布
最新推荐文章于 2023-05-10 19:07:35 发布
阅读量700 收藏 4
点赞数 1
分类专栏： element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alokka/article/details/118468265
版权

1. 对单个进行校验

	this.$refs['form'].validateField('userName', async (valid) => {
	  if (valid) return
	  // code
	})

2. 对几个进行校验

	this.$refs['form'].validateField(['userName','mobileNumber'], async (valid) => {
	  if (valid) return
	  // code
	})
alokka
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element form 校验数组每一项实例代码
10-16
主要介绍了element form 校验数组每一项的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
ElementUI多个子组件表单的校验管理实现
10-16
在 PersonForm.vue 文件中，我们创建了一个 PersonForm 类来初始化表单数据，并定义了一个 static 方法 `getRule` 来生成校验规则。这些规则遵循 ElementUI 的验证规则格式，如使用 `validator` 函数和 `trigger` ...
element UI 中 el-form 表单包含多个 el-input 时的校验方法
weixin_51063441的博客
09-17 201
element UI 中 el-form 表单包含多个 el-input 时的校验方法_qq_36437172的博客-CSDN博客 转载https://blog.csdn.net/qq_36437172/article/details/97139963
对elementui中一个el-form-item中包含多个输入框或下拉框等的表单验证处理问题
qq_45030898的博客
09-07 5956
对elementui中一个el-form-item中包含多个输入框或下拉框等的表单验证处理问题
elementui一个form-item里面有多个输入框表单验证
web8_zhy的博客
03-16 1万+
elementui一个form-item里面有多个输入框表单验证 如图 这里是动态表单，增加删除，以下是主要代码： <el-form-item label="排查内容及频率" prop="values"> <div v-for="(item,index) in form.djList" :key="index"> <el-form...
vue项目开发：element的el-form表单rules如何对input和select添加号码校验
weixin_39277183的博客
08-22 5179
在项目开发的时候，一般表单检验都是做非空检验即可，但是难免会遇到证件号码或者手机号校验，通常我们都要调用公共js进行实现，input校验较为简单，但是select如果没有用过的还是会有点头疼。下面我将对我在项目开发的一部分校验跟大家分享一下。 首先肯定要准备好公共js（validate.js） 基本结构是必要的:rules="formRules" 和prop="dsrmc" <el-form ref="editAdminForm" ..
element 表单的部分校验
张梦莹的博客
03-11 3778
在实际的项目中，我们不仅会遇到表单的全校验，有时会遇到只需要对部分字段进行校验。在element中为form的部分校验提供了专门的方法validateField。具体的实现如下。 下面放一波在项目中的使用。 在这里我们只需要对fieldToValidate里的这两个字段进行校验。遍历fieldToValidate，对每个字段进行校验，设置校验函数的cb为promise的成功函数。这样，就算有字...
vue+element实现表单校验功能
12-09
要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程…… 表单校验功能:   实现这个功能,总共分为以下4布: 1.在el-form标签...
Vue element-ui父组件控制子组件的表单校验操作
10-15
当这两个条件都满足时，Element-UI的表单验证就能正常工作，能够根据设定的规则对用户输入进行验证，确保数据的完整性和准确性。 总的来说，Vue Element-UI的父组件控制子组件的表单校验操作主要是通过`ref`属性...
表单中单独给一个input进行验证
weixin_42484910的博客
06-23 3104
1.在el-form-item 里写:rules 验证规则 2.在el-form-item 里写prop 属性 其值 和v-model 一致 3.如果进行数字验证 v-model 要写成 v-model.number <el-form-item label="RATING:" :rules="[{ type: 'number', message: 'Must be a numeric value'},{ pattern:/^([1-9]|[1-9]\\d|100)$/, message: 'Plea
Layui多选框的使用formSelect
qq_39736671的博客
11-29 1877
Layui多选框的使用formSelect1.页面2.js代码3.实例 1.页面 <form class="layui-form" action=""> <div class="layui-form-item"> <div class="layui-form-inline"> <fieldset class="layui-ele...
ElementUI select设置多选(multiple) 后自动触发formItem校验
Alecor的博客
07-27 2573
解决方法： 在Vue生命周期created函数中重置一下触发的参数 created() { // 解决select设置多选(multiple) 触发formItem校验 this.$set(this.sqlData, 'table', []) }, 原因：等有空了在分析；
在FormItem中使用Select时设置initialValue时的大坑
weixin_42737733的博客
09-20 1万+
这里写自定义目录标题在FormItem中使用Select时设置initialValue时的大坑 在FormItem中使用Select时设置initialValue时的大坑 很多小伙伴在写需求的时候，避免少不了对数据的增删改查，其中在可编辑的表单内往往都需要填入其默认值，今天我遇到的大坑就是在填入默认值之后，若不修改，在表单提交的时候想要获取默认值的信息的时候出现的问题。注意，这是使用Select...
elementui的一个el-form-item里面多个el-select 的校验
weixin_47889154的博客
05-10 762
【代码】elementui的一个el-form-item里面多个el-select 的校验。
element el-form 表单校验单个字段 this.$refs.form.validateField 单独校验
xiaoheisboy的博客
01-17 1万+
element el-form 表单校验单个字段 this.$refs.form.validateField 单独校验 ????记得点赞哦 ???? ????大佬请看???? 1.this.$refs.form中form对应el-form中的ref属性值 2.checkName 对应的是el-form表单中需要校验的标签prop属性值 3.checkName的校验规则也要对应 el-form中rules属性中的checkName，（第三点3不懂就看文档吧） this.$refs.form.validate
el-form-item内多个输入框的 validate 校验
S‘blog
03-02 4145
表单中复合型输入框， 都要满足必填验证规则 。 <el-form-item label="申请贷款银行" prop="bank"> <el-input placeholder="请填写分行和支行信息" v-model="formData.bank2" class="input-with-select" :style="{width: '100%'}"> <el-select v-model="formData.bank1" slot="prepend" pla
Vue Element Select选择器自定义验证规则
路虽远行则将至，事虽难做则必成。
12-02 4802
在我们在做增删改查的时候，一般会遇到添加和修改的from表单需要表单验证。一般常规的from表单是有自己的验证规则，from加一个 :rules="rules"但他需要v-model值和prop值要一样，这是常规情况。我遇到的是，绑定多个负责人和对应的电话，加验证规则。实际场景1.我们在from表单绑定多个负责人就需要使用到 select 选择器，下拉的数据是点击打开弹框时发请求来的。2.点击选中的时候，数据时对象形式，id 名字 电话 绑定在一起的。选中负责人的时候，我们是把一整个对象存到数组里面。
this.$refs.form.validate() 不执行问题的解决办法
zyf971020的博客
11-15 1万+
this.$refs.form.validate() 不执行问题的解决办法
element-ui el-input / el-select输入框的非空校验
热门推荐
lx233
12-17 1万+
一、之前写的实现 直接js判断就可以 .prevent .stop 是阻止继续冒泡 不一样的 见 官方说明 1https://cn.vuejs.org/v2/cookbook/form-validation.html#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%A1%E9%AA%8C 2 自定义 （我没看）https://...
element ui 动态添加input 的表单校验
最新发布
06-14
Element UI 提供了强大的表单组件和灵活的功能，包括动态添加输入字段的表单验证。当你需要在运行时根据用户交互或数据变化动态生成表单元素并进行校验时，可以使用 Vue.js 的响应式系统配合 Element UI 的 `el-form` 和 `el-form-item` 组件以及自定义验证规则。 以下是一个基本的步骤： 1. **Vue组件结构**： 使用 `v-for` 指令遍历动态数据，并为每个动态生成的 input 创建一个 `el-form-item`。 ```html <template> <el-form :model="form" :inline="true"> <el-row v-for="(item, index) in dynamicItems"> <el-col :span="6"> <el-form-item :key="index" :label="item.label"> <el-input v-model="item.value"></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-button @click="addFormItem">Add Item</el-button> <el-button @click="submitForm">Submit</el-button> </el-col> </el-row> </el-form> </template> ``` 2. **数据绑定和方法**： 定义 `dynamicItems` 数组存储动态生成的表单项，`form` 对象用于存储整个表单的数据。`addFormItem` 和 `submitForm` 方法处理相应的事件。 ```js <script> export default { data() { return { form: {}, dynamicItems: [{ label: 'Dynamic Input', value: '' }], }; }, methods: { addFormItem() { this.dynamicItems.push({ label: 'New Input', value: '' }); }, submitForm() { // 这里可以使用 validate 方法进行表单验证，确保所有输入都有效 this.$refs.form.validate((valid) => { if (valid) { // 提交表单逻辑 } else { console.log('请确保所有字段已填写'); } }); }, }, }; </script> ``` 3. **表单验证**： Element UI 的 `el-form` 元素有一个 `ref` 属性，`validate` 方法会检查所有关联的表单项是否通过验证。你可以在 `submitForm` 中调用这个方法，然后根据返回的结果决定是否提交表单。 注意，对于动态添加的表单项，你需要确保每个 `el-input` 都有对应的 `v-model`，并且根据实际需求定制验证规则。例如，你可能希望对每个输入项设置特定的校验规则，如必填、长度限制等。可以使用 Element UI 的内置验证规则，也可以自定义 `validateHandler` 属性提供自定义验证函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值