基于element-ui的rules中正则表达式

在rules中的pattern中写正则表达式

<template>
 <el-form :model="unuseForm" label-position="top" :rules="dialogRules">
 <el-form-item label="原因" prop="loseEfficacyReason">
  <el-input type="textarea" v-model="unuseForm.loseEfficacyReason" auto-complete="off"></el-input>
 </el-form-item>
 </el-form>
</template>
<script>
export default{
 data(){
 return {
  dialogRules: {
  loseEfficacyReason: [
   { required: true, message: '请输入原因', trigger: 'blur' },
   { min: 2, message: '请输入不少于2个字符', trigger: 'blur' },
   { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号' }
  ]
  }
 }
 }
}
</script>

以上这篇基于element-ui的rules中正则表达式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Element UI 自定义正则表达式验证方法

    如下所示: //指定数据中心的验证表单valiForm,验证规则rules <el-form :model="valiForm" :rules="rules" ref="valiForm" label-width="100px" class="demo-valiForm"> <el-form-item label="名称:" :label-width="for

  • 基于Vuejs和Element的注册插件的编写方法

    1.首先要在HTML文档中引入jQuery版本2.0以下的.一个vuejs库 一个Element-UI库 <script src="js/jquery-1.11.0.min.js"></script> <script src="js/vue.js"></script> <script src="js/Element-UI.js"></script> 2.HTML的布局  &l

  • 基于element-ui的rules中正则表达式

    在rules中的pattern中写正则表达式 <template> <el-form :model="unuseForm" label-position="top" :rules="dialogRules"> <el-form-item label="原因" prop="loseEfficacyReason"> <el-input type="textar

  • 基于element UI input组件自行封装“数字区间”输入框组件的问题及解决

    基于element UI input组件自行封装“数字区间”输入框组件的问题及解决

    目录 问题描述 实现效果 实现代码 问题描述 在开发时遇到一个数字区间输入框的需求,如下图: 项目使用的是vue,组件库用的是element UI,但是element UI并没有提供数字区间组件,只提供了InputNumber 计数器输入框,如果用两个计数器输入框进行拼接也能满足需求,但是样式调试起来太过于复杂且不够灵活,不能令人满意,并且该数字区间输入框在其它界面也有这种需求,于是就在element input输入框的基础上自行封装了一个数字区间组件使用. 实现效果 实现效果如下: 使用方式如

  • vuejs+element UI table表格中实现禁用部分复选框的方法

    有时候我们构建这样带一列复选框的表格 然后希望根据条件禁用某个列表项的选择框,可以这样写 HTML: JS: 以上这篇vuejs+element UI table表格中实现禁用部分复选框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Element UI table参数中的selectable的使用及遇到坑

    Element UI table参数中的selectable的使用中遇到的坑:页面: <el-table-column :selectable='selectable' type="selection" :reserve-selection="true"> </el-table-column> 网上搜了说这样: selectable(row,index) { if(row.id==="10001"){ return fal

  • vue3.0中使用element UI表单遍历校验问题解决

    vue3.0中使用element UI表单遍历校验问题解决

    问题 在使用vue3.0写项目的时候遇到一个需要遍历的表单,可以增加删除表单对象 不考虑校验问题的话,就是简单的数组包form对象.涉及校验的时候,按照以往的写法就是绑定ref值,然后调用组件的validate方法[form表单中配置rule规则]. 解决方法就是将数组内嵌在一个对象中,对象的结构跟我们定义的form对象结构一致 //我们需要遍历的form对象数组 const arr = [ { name:'', sex:'', age:'', },{ name:'', sex:'', age:

  • Web Components实现类Element UI中的Card卡片

    Web Components实现类Element UI中的Card卡片

    目录 引言 Web Components 核心组成 1. Custom Elements 2. Shadow DOM 3. templates 和 slots 完整代码 Web Components vs Vue Components Web Components 生命周期回调函数 优点 and 缺点 七.基于web components的框架 引言 Web Components 是一个浏览器原生支持的组件化方案,允许你创建新的自定义.可封装.可重用的HTML 标记.不用加载任何外部模块,直接就

  • 解决WebStorm 2022.3.x 无法识别 Element UI 2.15.11 新版本中的 el-xxx 标签问题(两种解决方案)

    目录 问题解读 解决(方案一) 解决(方案二) 问题解读 如题,其实2.15.11这个版本的Element UI新增了功能,改进WebStorm IDE和其他JetBrains IDE中的代码帮助.本义是想很好的支持IDE软件,代码提示更加方便,但作者发布时候少打包了一个文件,这就导致Webstorm不认识所有的el-xxx标签!!! 解决(方案一) 既然知道了这个版本有点小问题,那就简单粗暴,暂时降级到2.15.10版本,提示就有了.等过段时间官方修复了BUG,再改回最新版即可. 注意,由于我

  • vue2.0 + element UI 中 el-table 数据导出Excel的方法

    1.安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用,请移步github. https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 2.组件里头引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.组件methods里写一个方法 exportExcel

  • Element UI框架中巧用树选择器的实现

    本文介绍了Element UI框架中巧用树选择器的实现,分享给大家,顺便给自己留个笔记,具体如下: 介绍 在Element UI框架中有选择器和树形控件,但是没有树形选择器,也就是图上的这种方式的选择器,所以只能自定义选择器的slot.这里介绍的是多选情况,如果是单选则去掉复选框,修改一部分的处理即可. html部分的代码: <el-select v-model="dataArr" :multiple="multiple" filterable :placeh

随机推荐