Element-UI 中使用rules验证 金额 数字
data中定义验证规则:
var checkCount = function (rule, val, callback) {
if (!val) {
return callback(new Error("数量不能为空"));
}
var reg = /^(?!(0[0-9]{0,}$))[0-9]{1,}(\.{0,1}\d{1,3}){0,1}$/;
if (!reg.test(val)) {
return callback(new Error("格式错误,至多三位小数"));
}
return callback();
};
var checkPrice = function (rule, val, callback) {
if (!val) {
return callback(new Error("单价不能为空"));
}
var reg = /^\d+(\.{0,1}\d{1,4}){0,1}$/;
if (!reg.test(val)) {
return callback(new Error("格式错误,至多四位小数"));
}
return callback();
};
var checkScore = function (rule, val, callback) {
if (!val) {
return callback(new Error("分值不能为空"));
}
var reg = /^\d+(\.{0,1}\d{1,2}){0,1}$/;
if (!reg.test(val)) {
return callback(new Error("格式错误,至多两位小数"));
} if(parseFloat(val) > 100){
return callback(new Error("分值最大只能是100"));
}
return callback();
};
rules 下面进行引用data中的验证规则
rules: {
deptName: [{
required: true,
message: "请选择",
trigger: ["change", "blur"]
}],
score: [{
required: true,
message: " ",
trigger: ["change", "blur"]
},
{
validator: checkScore,
trigger: ["change", "blur"]
}],
count: [{
required: true,
message: " ",
trigger: ["change", "blur"]
},
{
validator: checkCount,
trigger: ["change", "blur"]
}],
price: [{
required: true,
message: " ",
trigger: ["change", "blur"]
},
{
validator: checkPrice,
trigger: ["change", "blur"]
}],
targetName: [{
required: true,
message: " ",
trigger: ["change", "blur"]
}],
}
模板中使用:
<el-form-item label="报送结算金额(含税):" prop="totalSettleAmount" :rules="rules.price">
<el-input v-model="value.totalSettleAmount" placeholder="请输入报送结算金额(含税)" clearable ><template slot="append">元</template></el-input>
</el-form-item>
Element-UI 中使用rules验证 金额 数字的更多相关文章
- Element UI 中组件this.$message报错
最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- element ui 中的 resetFields() 报错'resetFields' of undefined
每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行 ...
- element ui中的一些小技巧
最近写公司的项目,这项目是vue和element ui搭建的, 做的是一套电力系统的管理平台. 遇到一个小麻烦,用过element ui 的都知道,使用element ui 弹框,点击空白处,默认是 ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- yii CFormModel中的rules验证机制
public function rules() { return array( array('username, password', 'required'), array('rememberMe', ...
- 在vue中关于element UI 中表格实现下载功能,表头添加按钮,和点击事件失效的解决办法。
因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...
- Element Ui中table实现表格编辑效果
主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...
- element ui中dialog相关问题
一,今天需要在dialog里面引入另一个页面,就是打开dialog显示该页面(把页面放到dialog中),引入的语句如下: <iframe src="view?path=rkdj_b& ...
随机推荐
- Hadoop集群管理之fsimage和edits工作机制
客户端对hdfs进行写文件时会首先被记录在edits文件中. edits修改时元数据也会更新. 每次hdfs更新时edits先更新后客户端才会看到最新信息. fsimage:是namenode中关于元 ...
- 复习 - es6语法
这几天电脑有点问题,一直在弄,而且论文也逼近了也在时间弄那个 ,前面node有一个大项目,已经做完了,我现在是准备把上次复习断下的继续复习一直到这个项目,然后就开始vue了. 1. 首先是函数的一个进 ...
- mac 安装homebrew 报443
描述 macOS安装Homebrew时总是报错(Failed to connect to raw.githubusercontent.com port 443: Connection refused) ...
- 全网最适合入门的面向对象编程教程:03 类和对象的Python实现-为自定义类添加属性
摘要: 本文主要介绍了,当使用 Python 创建自定义类时,如何为其添加属性,包括为类和实例添加属性两种,以及如何获取自定义的属性等内容. 往期推荐: 学嵌入式的你,还不会面向对象??! 全网最适合 ...
- 新一代Java高性能构建工具Maven-mvnd【实践可行版】
Maven-mvnd介绍 Maven 的优点是稳定可靠,在绝大多数的项目上工作良好,社区生态很完善,几乎所有的 Java 开发者都在用.Maven 的缺点是,对于大一点的项目来说,构建太慢了.有时候只 ...
- Vue查询传参
通过修改 getWK005 函数来实现这一点.这里的 query 参数就是发送 GET 请求时的查询参数.你可以将需要的条件作为 query 对象的属性传递进去.比如,如果你想要按照特定的条件查询信息 ...
- SQL:聚集索引和非聚集索引
聚集(clustered)索引,也叫聚簇索引 定义:数据行的物理顺序与列值(一般是主键的那一列)的逻辑顺序相同,一个表中只能拥有一个聚集索引. 注:第一列的地址表示该行数据在磁盘中的物理地址,后面三列 ...
- odoo 开发入门教程系列-一个新应用
一个新应用 房地产广告模块 假设需要开发一个房地产模块,该模块覆盖未包含在标准模块集中特定业务领域. 以下为包含一些广告的主列表视图 form视图顶层区域概括了房产的重要信息,比如name,Prope ...
- JMeter 逻辑控制之IF条件控制器
逻辑控制之IF条件控制器 测试环境 JMeter-5.4.1 循环控制器介绍 添加While Controller 右键线程组->添加->逻辑控制器->While控制器 控制器面板介 ...
- scanf、cin及其优化、快读性能测试
为了让大家了解C++各种IO方式的性能,于是就有了这篇文章. 本次测试采取的数据均为 \(10^6\) 个不超过 \(10^8\) 随机正整数. 测试代码: #include<bits/stdc ...