ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证
一、关于导航怎么设置路由
1、在el-menu这个标签的属性中添加 router ,官方文档的解释是:启用vue-router 这种模式
2、在el-menu-item标签中的index属性直接书写路由,就可以实现正常vue-router了
3、在el-menu-item标签中书写路由属性::route='{path:"/product"}'
<el-menu
class="el-menu-vertical"
background-color="#364150"
router
text-color="#e6eefd"
active-text-color="#28b6f6"
unique-opened>
<el-menu-item
index="product" :route="{path: '/product'}">
<i class="icon-instance"></i>
<span slot="title">实例管理</span>
</el-menu-item>
<el-menu-item
index="pool">
<i class="icon-resource"></i>
<span slot="title">资源管理</span>
</el-menu-item>
<el-menu-item
index="product">
<i class="icon-product"></i>
<span slot="title">产品管理</span>
</el-menu-item>
首先父级el-menu添加router熟悉开启路由模式,子级el-menu-item可以通过index属性,或者:router属性书写路由
补充:只加index属性是错误的,必须加:router属性给定正确路由才行。因为遇到了当只有index属性的时候,当遇到"/list/report",从list里链接进去的report这种路由时,在点击菜单如果index属性是"monitor",最后路由会变成"/list/monitor",与预期不一致。
二、使用iconfont字体图标
1、官网下载解压,将解压后的文件全部放到assets目录下建iconfont目录下
2、在main.js里面全局导入,然后就可以用了。用的时候class前面需要加上iconfont
import './assets/iconfont/iconfont.css'
三、form表单自定义验证规则
验证手机号(我是独立写了一个validator.js文件的,放在util目录下,然后把所有验证规则都写在这里,使用的时候导入即可)
/**
* 校验规则文件
* 触发方式:type=['blur','change']
*/
//定义phone验证全局变量
var validPhone=(rule, value,callback)=>{
const reg = /^[||||][-]\d{}$/;
if (!value){
callback(new Error('请输入电话号码'))
}else if (!reg.test(value)){
callback(new Error('请输入正确的11位手机号码'))
}else {
callback()
}
}
export const validator = {
required:{
required:true,
message:'必填项',
trigger:'blur'
},
email:{
type:'email',
message:'请输入正确的邮箱',
trigger:['blur','change']
},
minLen:{
min:,
message: '长度最少6个字符',
trigger: 'blur'
},
phone:{
required:true,
validator:validPhone,
trigger:['blur','change']
}
}
//vue组件中使用
<el-form
ref="login_pwd"
:model="login_pwd"
:rules="rules"
status-icon>
<el-form-item prop="phone" :rules="[rules.required,rules.phone]">
<el-input v-model="login_pwd.phone" placeholder="请输入账户"></el-input>
</el-form-item>
另外一种方式可以直接使用在pattern中书写正则,并且配合elementUI进行表单验证。
pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式。
data(){
const valPwd = (rule, value, callback) => {
if (!value) {
callback(new Error('请再次输入密码'));
} else if (value !== this.resetPassword.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
resetPassword:{},
rules:{
password:[{required:true,message:'请输入密码',trigger:'blur'},
{pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/,message: '密码格式不正确'}],
repeatPassword:{validator:valPwd,trigger:'blur'},
phone:[{required:true,message:'请输入电话',trigger:'blur'},
{pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,message: '请输入正确的11位手机号码'}],
veriCode:{required:true,message:'请输入密码',trigger:'blur'}
},
codeDisabled:false,
countdown:
}
},
//直接使用prop验证即可
<el-form-item prop="repeatPassword">
<el-input type="password" v-model="resetPassword.repeatPassword" placeholder="重复密码"></el-input>
</el-form-item>
ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证的更多相关文章
- element-ui 自定义表单验证 , 但是不出现小红心了
基本上按照文档上提供的方式做就没啥大问题 , 我遇到的问题是 , 自定义以后不显示小红星了 <el-form :model="ruleForm2" status-icon : ...
- ElementUI表单验证使用
1.设计校验方式: 我们表单验证的rules一般封装一个单独的js文件,比如我之前写的这个博客: ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证 可以修改下:公共的校验 ...
- element-ui+vuex共享自定义方法进行表单验证 validator
element-ui的官网上写的自定义表单验证,方法都是写在单vue文件中的,不容易共享.怎么使用vuex将方法共享出来,各个组件都能用呢? 如下是一个验证age的数据, rules:{ age:[{ ...
- 如何设置dedecms自定义表单必填项?
用dedecms自定义表单可以制作一个简单的预约系统,有些相关信息需要设置为必填项,比如联系方式,没有留下真实的电话或其他信息,以后要怎么联系到你的客户.那我们要如何设置织梦cms自定义表单必填项呢? ...
- Vue Element-ui 框架:路由设置 限制文件类型 表单验证 回车提交 注意事项 监听事件
1.验证上传文件的类型: (1)验证图片类型 <template> <el-upload class="avatar-uploader" action=" ...
- element-ui Form表单验证
element-ui Form表单验证规则全解 element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索, ...
- element-ui表单验证(电话,邮箱)
element-ui Form表单验证 最近刚好使用了element-ui的form表单,官网只提供的示例,这里把一些常用的验证记录下来,方便后期查找最终的效果是这样的, 这个表单里还加入了一下其他组 ...
- ElementUI表单验证攻略:解决表单项启用和禁用验证的切换,以及动态表单验证的综合性问题
试想一种比较复杂的业务场景: 表格(el-table)的每一行数据的第一列是勾选框,最后一列是输入框.当某一行的勾选框勾上时,启用该行的输入框,并开启该行输入框的表单验证:取消该行的勾选框,则禁用该行 ...
- 如何设置织梦cms自定义表单字段为必填项
1.编辑器打开\plus\diy.php2.在40行左右找到此行代码:$dede_fields = empty($dede_fields) ? '' : trim($dede_fields);3.在这 ...
随机推荐
- 寻找与网页内容相关的图片(三)网易新闻与qq空间的做法
寻找与网页相关的图片现在看来无非有两种方式,第一种是网页自己指定,第二种是通过算法推断. 对于网站的内容提供者来说,他自己知道相关的图片在哪,正如前文所述可以在HTML的头部加上META标签,也可以像 ...
- 【Hibernate3.3复习知识点二】 - 配置hibernate环境(annotations)
配置文件hibernate.cfg.xml中引入:<mapping class="com.bjsxt.hibernate.Teacher"/> <hibernat ...
- NBUT 1223 Friends number
暴力,打表. 计算出每一个数的因子之和,可以枚举$i$,让后将$i$的倍数都加上$i$.发现这样的只有$71$对,然后暴力就可以了. #include<cstdio> #include&l ...
- 按照grouip分组,之后分组调用生成正式凭证 的接口
按照grouip分组,之后分组调用生成正式凭证 的接口 Map<String, List<OperatingLogVO>> resultMap = new HashMap< ...
- 决策树:ID3与C4.5算法
1.基本概念 1)定义: 决策树是一个预测模型:他代表的是对象属性与对象值之间的一种映射关系,树中每个节点代表的某个可能的属性值. 2)表示方法: 通过把实例从根结点排列到某个叶子结点来分类实例,叶子 ...
- 【Go】基础语法之接口
接口定义: 利用关键字interface来定义一个接口,接口是一组方法的集合. 例如: type People interface { Show(name string, age int) (id i ...
- 【前缀和】【枚举倍数】 Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017) D. Arpa and a list of numbers
题意:给你n个数,一次操作可以选一个数delete,代价为x:或者选一个数+1,代价y.你可以进行这两种操作任意次,让你在最小的代价下,使得所有数的GCD不为1(如果全删光也视作合法). 我们从1到m ...
- 【最短路】【spfa】CDOJ1647 酌贪泉而觉爽, 处涸辙以犹欢。
题意: 给你一个全为0的01串,问你能否通过一系列的变换,得到全为1的01串. 分析: 将每个01串看作一个点,每一个变换可以看作是一条有向边,现在问题可以转化 为找从“00..0”这个点到“11.. ...
- 事件BOM DOM
1.事件 1.1 事件绑定 # 1.写在html元素中 <button onclick='code'></button> # 2.把事件当作元素对象的方法 btnEle.onc ...
- lightoj 1229 - Treblecross 博弈论
思路:SG函数 枚举先手的每一个位置是否有必胜. 1)如果出现了XXX则必胜: 2)如果出现了XX或X.X则必败: 3)否则计算后手的sg值和. 代码如下: #include<iostream& ...