elementui的表单验证踩坑-动态绑定输入框required后只显示英文提示

做项目的时候遇到一个要求，需要在单选框选到某个选项的时候新增一个输入框，同时对输入框的required也需要动态绑定，一开始想到的方法就是直接在新显示的输入框上加上v-if和:required。

       <el-form-item label="用户类型" prop="userType"><el-radio-group v-model="addUserForm.userType"><el-radio :label="0" name="generalUser">普通用户</el-radio><el-radio :label="1" name="doctor">医生</el-radio><el-radio :label="2" name="soldier">军人</el-radio></el-radio-group></el-form-item><el-form-itemlabel="编号"prop="identifier"v-if="addUserForm.userType !== 0 && addUserForm.userType !== 1":required="addUserForm.userType === 2"><el-inputv-model="addUserForm.identifier"placeholder="请输入编号"></el-input></el-form-item>

但是发现如果这样会导致表单验证提示的时候是英文的提示，在rules里设置的中文提示不起效

     //rulesidentifier: [{ message: "请输入编号", trigger: "blur" }],

后面在网上搜了半天才找到可以通过自定义验证规则来解决绑定required后中文提示不起效的问题

     let validateIdent = (rule, value, callback) => {if (value === "") {callback(new Error("请输入编号"));} else {callback();}};//rulesidentifier: [{ validator: validateIdent, trigger: "blur" }],

（可能还有更加好的方法，我也不知道了。。

主要从这里找到方法的

https://segmentfault.com/q/1010000016698073

elementui的表单验证踩坑-动态绑定输入框required后只显示英文提示相关推荐

Bootstrap Table踩坑——设置多级表头后只显示第一级表头问题解决办法
今天设置了Bootstrap Table的复杂表头,设置了多级表头(两行列名),但是只能显示第一级表头(第一行的列名),第二级的表头被第一级的表头覆盖.但是我仿照其他网上的其他设置复杂表头例子都能正常 ...
Vant-UI 表单组件（Field组件）：验证表单元素表单提交 - 踩坑篇
Vant-UI 表单组件(Field组件):验证表单元素&&表单提交: 示例截图 · 如下: 示例 · 详细代码 · 如下: <template><div class ...
vue 表单验证正则_vue elementui form表单验证的实现
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
ElementUI的表单验证及常用规则
element-cn.eleme.io/#/zh-CN/com- 在官网上有关于form组件的详细介绍这里总结了几个常用的规则,方便下次使用必填,必选,邮箱,手机号,时间,数字,数组,字符长度, ...
jQuery Validation Engine 表单验证踩过的一个坑
jQuery Validation Engine表单验证是一个非常简单好用的前端验证插件,具体的使用手册可以参考: http://code.ciaoca.com/jquery/validation-e ...
elementui 嵌套表单验证_vue elementUI 表单嵌套验证的实例代码
一:表单一级验证 element中from组件内表单验证通过使用el-form标签,绑定model和rules属性进行表单验证简单的表单验证很简单,在prop内绑定验证属性,然后在rules对象内定 ...
elementUI框架:表单验证书写方式
验证form,注意prop.rules指定的名字需一致: 也可以单独指定具体某一验证::rules="$rules.Login.userName" 校验方式 this.$refs[ ...
记录element-ui自定义表单验证上传身份证正反面
大概是这个样式两个上传组件写在一个form-item里进行自定义表单验证每次验证,通过判断上传组件绑定的值进行判断,callback不同的提示错误 <template><div& ...
element-ui清除表单验证提示语
一.需求描述: 使用了element-ui的表单, 点击发布当物流单号为空时,会出现提示,如果我通过上方下拉框切换了物流名称,我希望能够主动的清除下方的红色提示信息. 二.解决方案 1.编写表单代码, ...
Bootstrap5使用bootstrapValidator完成表单验证（包括解决样式、图标不显示及其他组件表单验证出问题解决方案）
以下都为个人实践. CND引入bootstrap5及bootstrapValidator文件 bootstrap5 <link href="https://cdn.jsdelivr.n ...

elementui的表单验证踩坑-动态绑定输入框required后只显示英文提示

elementui的表单验证踩坑-动态绑定输入框required后只显示英文提示相关推荐

最新文章

热门文章