elementui 只校验表单其中一个字段

最新推荐文章于 2024-02-22 15:52:03 发布
最新推荐文章于 2024-02-22 15:52:03 发布
阅读量3.2k 收藏 2
点赞数 1
分类专栏： elementui小技巧 文章标签： elementui html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42431718/article/details/120697436
版权

elementui 只校验表单其中一个字段

在一些用户注册场景中，提交整个表单前有时候我们会做一些单独字段的校验，例如发送手机验证码，发送时我们只需要校验手机号码这个字段，可以这样做：

this.$refs['form'].validateField('mobile', valid => {
  if (valid) {
    // 发送验证码
  }
})
qq_42431718
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
element form 校验数组每一项实例代码
10-16
主要介绍了element form 校验数组每一项的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
element-ui中表单验证的三种方式
我胆小
04-02 3909
第一种常用方式：表单上加rules｛object｝ <el-form class="apply-form first-form" :model="formData" :rules="rule" ref="form"> <el-form-item label="姓名" prop="visitorName"> <el-input v-model...
elementUI的字段校验
最新发布
简单点的博客
02-22 452
elementUI的字段校验
element -ui对指定字段进行校验
qq_44170622的博客
01-07 970
let count = 0; const updateArr = type == 1 ? ["phone", "verifycode"] : ["passPhone", "password"]; let isAllowNext = false; // 是否允许下一步 updateArr.forEach((item) => { Form.value.validateField(item, (errorMsg) => { if (errorMsg) retur
ElementUI多个子组件表单的校验管理实现
10-16
主要介绍了ElementUI多个子组件表单实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue elementui form表单验证的实现
10-17
主要介绍了vue elementui form表单验证的实现,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element-ui的表单验证
pgzero的博客
12-21 2724
一、对单个表单域进行校验 如下，对于单个表单域，可以直接对表单域的rules参数进行配置，来实现格式验证，这种方法一般比较适用于格式验证比较简单的情况。 如果需要进行验证的字段比较多，或者验证规则比较复杂，那么最好使用下方对整个表单校验的方式 <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item
elementUI/ant design vue表单进行单个或部分字段验证校验
SummerGao
02-03 6130
elementUI/ant design vue的写法一致： this.$refs['refName'].validateField(['field1'], (Error) => { ...
vue 中 Element-UI 表单验证的几种方法
weixin_49612239的博客
06-07 1372
在开始之前需要把element-ui在vue中引入好，如果没有引入好的话，需要先跟着element-ui的文档进行操作，接下来就可以进行学习了。 第一种：在el-form-item单个添加验证 这种方式适用于需要个别检验的字段，或者表单字段有变动的校验； 做法：需要在el-form-item标签中加入 :rules=’'直接是验证的条件 '' 下面举个例子（验证用户名 不能为空） <el-form-item label="用户名" :prop="userName" :rules="[{ re.
ElementUI使用rules点击按钮校验表单和单独校验某个表单元素
a17603952050的博客
04-08 5718
一、校验rules中所有元素 写在 data 中验证 表单内容 <!-- 表单 --> <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px"> <el-form-item label="用户名称:" prop="userName"> <el-input v-model="rulesForm.userName" style="wi
element-ui表单仅对el-form表单的部分字段/某个字段进行验证
树上骑个猴的博客
09-30 7430
根据elementui文档，查询到validateField方法，可以给表单的某个字段添加校验 对表单单个字段进行校验 data: { rules: { email: { required: true, message: '请输入邮箱', trigger: ['c.
Vue ElementUi同时校验多个表单(巧用new promise)
08-27
主要介绍了巧用new promise实现Vue ElementUi同时校验多个表单功能，实现的方法有很多种，本文给大家带来的是一种比较完美的方案,需要的朋友可以参考下
vue elementUI 表单校验功能之数组多层嵌套
10-16
主要介绍了vue elementUI 表单校验（数组多层嵌套）功能的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
vue elementUI 表单校验的实现代码（多层嵌套）
10-16
主要介绍了vue elementUI 表单校验的实现代码（多层嵌套），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
10-17
主要介绍了Vue+elementUI的动态表单的校验(根据条件动态切换校验格式),本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
element plus表单自定义校验规则和验证单个字段
温情
05-13 5051
关键代码 // prop 设置校验规则 <el-form ref="registerFormRef" :model="registerForm" status-icon :rules="registerRules" label-width="70px"> <el-form-item label="手机号" prop="tel"> <el-input v-model="registerForm.tel" autocomplete="off" placehold
vue+element ui 动态校验表单，validateField的方法使用，单独校验某字段
葫芦娃y的博客
03-18 2850
vue+element ui 动态校验表单，validateField的方法使用，单独校验某字段
在vue中使用rules对表单字段进行验证
热门推荐
我的博客
01-08 11万+
vue 中表单字段验证的写法和方式有多种，本博客介绍三种较为常用的验证方式。 1. 写在 data 中验证 表单内容 <!-- 表单 --> <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px"> <el-form-item labe...
Element UI 表单【详解】-- 表单校验
coldriversnow的专栏
07-18 1万+
callback(new Error('必须年满18岁'));rules: {// 是否必填 没有这个就没有前面红点// 自定义验证规则// 触发事件},
elementui表单校验复选框
05-10
在 ElementUI 中，可以使用 el-checkbox-group 组件来实现复选框的选择，使用 el-form-item 组件来实现表单校验。在 el-form-item 中设置 prop 属性来指定表单项的字段名，在 el-checkbox-group 中设置 v-model 绑定选中的值。然后在 el-form-item 中使用 rules 属性设置表单校验规则。 下面是一个示例代码： ``` <template> <el-form ref="form" :model="form" :rules="rules"> <el-form-item label="爱好" prop="hobby"> <el-checkbox-group v-model="form.hobby"> <el-checkbox label="篮球"></el-checkbox> <el-checkbox label="足球"></el-checkbox> <<el-checkbox label="乒乓球"></el-checkbox> </el-checkbox-group> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { hobby: [] }, rules: { hobby: [ { required: true, message: '请选择至少一项爱好', trigger: 'change' } ] } } } } </script> ``` 在上面的示例中，el-checkbox-group 绑定了 form.hobby，即选中的值。在 el-form-item 中设置 prop="hobby"，表示该表单项对应的字段名为 hobby。在 rules 中设置了 hobby 的校验规则，要求该字段必填，如果未填会出现提示信息。在需要提交表单时，可以通过 this.$refs.form.validate() 来进行表单校验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_42431718

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值