Vue elementUi input框校验

已于 2023-04-07 17:01:03 修改
阅读量1.3k 收藏 1
点赞数
分类专栏： 前端 文章标签： vue.js elementui 前端
于 2023-04-07 16:47:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52107354/article/details/130015767
版权

年龄为大于0小于200的数字

<el-form-item label="年龄"  prop="age">
  <el-input v-model="form.age" autocomplete="off"
            oninput ="value=value.replace(/[^0-9]/g,'');if(value> 200)value=200;if(value< 0)value=0"
  ></el-input>
</el-form-item>

 手机号码为11位的数字

<el-form-item label="手机号码"  prop="phone">
  <el-input v-model="form.phone"  autocomplete="off"
            oninput ="value=value.replace(/[^0-9]/g,'')" maxlength="11" show-word-limit></el-input>
</el-form-item>

编号为数字和字母的任意组合，不超过20位

<el-form-item label="编号"  prop="no">
  <el-input v-model="form.no" autocomplete="off" maxlength="20"
            oninput ="value=value.replace(/[^0-9a-zA-Z]/g,'')"show-word-limit></el-input>
</el-form-item>

钢-钉
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue elementUI 表单校验的实现代码（多层嵌套）
01-19
嵌套对象的校验 项目中使用的vue+elementUI进行开发，已经用了有一段时间了，感觉表单校验是每一个前端开发人员都避免不了的需求。在一些前端可以自行校验的情况下，先通过前端校验，校验不通过不发送请求，直到满足校验规则，再发送请求给后端，从而提升用户体验。 elementUI对表单的校验有自己的方法，要求传入model的必须为一个对象。但如果数据结构比较复杂，对象里面又嵌套对象，该如何校验？本文给出多层对象嵌套的方法。 example <template> <el-form :model=formData :rules=formRule ref=formData lab
不使用el-form单独给el-input设置表单校验,自定义input表单校验
李十三的博客
06-13 3392
有时候我们需求只需要对一个input进行校验,el-form的校验需要定义各种规则,然后prop,所以干脆放弃el-form的校验,直接手搓一个校验即可
element表单自定义校验失效的问题+如何自定义校验手机号
shalDream的博客
02-27 250
【代码】element表单自定义校验失效的问题+如何自定义校验手机号。
input输入框加验证规则组件（vue）
lin_fightin的博客
12-11 8102
输入框组件（带验证规则） 效果图： 组件名：my-input 可传参数 type1 input类型 value 默认值 rule 验证规则 rule参数 规则 trigger 事件名称 （str） min 最小值(number) max 最大值 (number) required 是否不能为空(str) reg 正则表达式验证规则（//） num_message 长度出错提示(str) req_message 必传出错提示（str） re
el-form表单中，对非表单内字段增加校验的方法
最新发布
weixin_44443380的博客
03-12 238
（3）同时加一个失去焦点时的方法 @blur="" （input输入框，select下拉框用change事件，其他的根据情况选择事件），在进行表单操作时也做校验。用于表单域验证错误信息，设置该值会使表单验证状态变为error，并显示该错误信息。（2）设置error属性，初始值设为空，在表单校验时做一个判断，如果字段为空时给error赋值校验失败提示文字。在开发表单的时候，可能会遇到el-form-item中绑定的值不在表单绑定的数据对象中。此时用prop绑定该字段名是无效的，需要单独对这个字段进行校验。
Vue 输入框 el-input 添加校验 oninput
MXinagr的博客
02-03 1705
在Vue项目中使用el-input输入时只允许输入特定格式的值。
element-ui中对输入框进行验证
m0_68231587的博客
06-03 2179
表示必填项，"message" 属性定义了验证失败时的错误提示信息，"trigger" 属性定义了何时触发验证。可以使用正则表达式对输入框进行验证，确保输入的日期格式正确且不包含0开头的月和日。在 element-ui 中，你可以使用。等组件来实现输入框的验证。
Elementui el-input 输入框校验以及表单校验
热门推荐
阿清的前端进阶之路
03-25 4万+
日常开发中输入框正则校验大全-------持续更新维护中.......
element input 输入框校验
陈怂怂的博客
03-02 2147
element input 输入框校验
element-ui《input》输入框效验
码上红尘仙的博客
09-07 1608
element-ui《input》输入框效验
element-ui之input格式校验
https://shixuebin.gitee.io/hexo-blog/
11-26 1996
当输入值的键盘抬起时触发这个事件, this.value表示此输入框的值，/\D/g为正则表达式，用来匹配所有非数字字符 <el-form-item label="角色Id*" class="redItem"> <el-input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" size="small" width="50" v-model="editRoleParam.role..
vue element table中自定义一些input的验证操作
10-15
主要介绍了vue element table中自定义一些input的验证操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
rangeInput.vue
04-20
element-ui控制输入范围数字校验
Vue ElementUI实现:限制输入框只能输入正整数的问题
11-19
首先要监听keyup（键盘按下）事件，因为elementUi上面的input组件监听事件是没有这个事件的，所以可能会报错，所以我们需要加个vue事件的修饰符 .native，代表原生事件的意思。 然后我们传个$event对象进去来获取...
vue element-ui实现input输入框金额数字添加千分位
11-27
在util.js中定义方法 包含金额添加过滤千分位，验证金额格式等 const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; // 金额添加千分位 const comdify = function (n) { if(!n) return n;...
Element+Vue对输入框中的数据进行校验
菜鸟逆袭之路
01-22 1万+
 比方说现在要对这个输入框中的数据进行校验 &lt;el-col :span="8"&gt; &lt;el-form-item label="工作餐费" prop="workMeals"&gt; &lt;el-input v-model="form.workMeals" placeholder="请输入工作餐费"&gt;
《Vue》聊一聊实际项目中输入框的校验的几种优化方案
Oliver尹的博客
01-18 2350
最近在参与年终的项目复盘，在代码部分看了几个项目的前端代码，发现UI框架都是使用的IView或者ElementUI，其中在表单部分的输入框这一块发现了一些关于校验方式可以进一步优化使用的问题....
对vue中的input输入框进行邮箱验证
oilpastell的博客
05-26 4504
如图效果，不是表单验证，是对input输入框的单独验证 可以给输入框添加@blur事件函数，代码如下 //给输入框添加事件函数 <el-input prefix-icon="el-icon-message" v-model="email" @blur="OnSubscribe()"></el-input> //事件函数的逻辑 OnSubscribe() { //邮箱验证的正则表达式 const reg = /\w+([-+.]\w+)*@\w+([-.
elementUI vue 动态渲染未知个输入框，并做未知个输入框的表单验证，动态新增删除输入框
chose_DoIt的博客
12-03 1163
表单循环验证，表单内动态增删改行
elementui input校验
08-30
Element UI 提供了丰富的表单验证可以用于校验输入框。你可以通过以下步骤进行 Element UI Input 校验： 1. 首先，确保已经引入 Element UI 组件库并进行了相关配置。 2. 在需要进行校验的表单中，使用 `<el-form>` 组件包裹起来，并设置合适的校验规则和绑定的数据。 3. 在需要校验的 `<el-input>` 组件上，使用 `:rules` 属性绑定相应的校验规则。 4. 定义校验规则对象，可以使用内置的验证规则，也可以自定义验证规则。 下面是一个示例代码，展示了如何在 Element UI 中进行输入框校验： ```vue <template> <el-form :model="form" :rules="rules"> <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' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' } ] } }; }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { // 校验通过，提交表单 // do something } else { // 校验不通过，提示用户错误信息 } }); } } }; </script> ``` 在上述示例中，`rules` 对象定义了两个校验规则，其中 `required` 表示必填项，`message` 是提示信息，`trigger` 定义了何时触发校验。 当点击提交按钮时，通过 `this.$refs.form.validate` 方法进行表单校验，校验结果会传入回调函数中。如果校验通过，可以执行相应的操作；如果校验不通过，可以提示用户相应的错误信息。 这只是一个简单的示例，你可以根据具体业务需求进行更复杂的校验规则定义和处理。详细的文档可以参考 Element UI 官方文档：[https://element-plus.org/#/en-US/component/form](https://element-plus.org/#/en-US/component/form)

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值