vue+element 正则表达式进行表单验证
<template>
<el-form :model="form" label-width="115px" ref="form" :rules="rules" label-position="left">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="同期最大购买数" prop="pkspace_num">
<el-input v-model="form.pkspace_num" auto-complete="off" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="价格" prop="price" >
<el-input v-model="form.price" auto-complete="off" clearable><template slot="append">{{price_txt}}</template></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="C端最大折扣率" prop="c_disrate">
<el-input v-model="form.c_disrate" auto-complete="off" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template> <script>
export default {
name: "creatRent",
data(){
let patter = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
let isNumber = (rule, value, callback) => {
if (!patter.test(value)) {
return callback(new Error('必须非负整数或至多保留两位小数'))
} else {
callback()
}
};
let percent = /^(?:[1-9]?\d|100)$/;
let isPercent = (rule, value, callback) => {
if (!percent.test(value)) {
return callback(new Error('请输入0-100的整数'))
} else {
callback()
}
};
let num = /^(0|\+?[1-9][0-9]*)$/;
let isNum = (rule, value, callback) => {
if (!num.test(value)) {
return callback(new Error('请输入非负整数'))
} else {
callback()
}
};
return {
form: {
pkspace_num: '',
price:'',
c_disrate:'',
},
rules: {
pkspace_num: [
{ required: true, message: '同期最大购买数不能为空', trigger: 'blur' },
{ min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' },
{ validator:isNum}
],
price: [
{ required: true, message: '价格不能为空',trigger: 'blur' },
{ min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' },
{ validator:isNumber}
],
c_disrate: [
{ required: true, message: 'C端最大折扣率不能为空', trigger: 'blur' },
{ min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur' },
{ validator:isPercent}
],
}, }
}, }
</script>
vue+element 正则表达式进行表单验证的更多相关文章
- vue+element之多表单验证
方法一:利用promise var p1=new Promise(function(resolve, reject) { this.$refs[form1].validate((valid) => ...
- Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...
- Vue如何使用vee-validate表单验证
Vue项目遇到要表单验证了吧,对我来说表单验证是个很纠(dan)结(teng)的内容,各种判断凌乱到飞起.往常使用jquery的validate插件做表单验证方便吧,你也可以在Vue里引入jquery ...
- vue 中跨组件的表单验证
使用的是element写的,里面提供了表单验证. 子组件是这样的 <template> <div> <el-form :model="value" r ...
- Vue 使用 vuelidate 实现表单验证
表单验证的应用场景十分广泛,因为网站对用户输入内容的限制是非常必要的. 在vue中,我们使用vuelidate方便地实现表单验证. 官方文档在这里https://monterail.github.io ...
- JS判断字符串长度,结合element el-input el-form 表单验证(英文占1个字符,中文汉字占2个字符)
首先看看判断字符串长度的几种方法(英文占1个字符,中文汉字占2个字符) 方法一: function strlen(str) { var len = 0; for (var i = 0; i < ...
- vue问题六:表单验证
表单验证规则 查看文档:https://blog.csdn.net/weixin_42018790/article/details/80762149 1). el-form增加 :rules=&quo ...
- vue + element ui 阻止表单输入框回车刷新页面
问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...
- 封装Vue Element的form表单组件
前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...
随机推荐
- 从0开始的Python学习018更多的Python内容
特殊的方法 之前学习的都是一些常用的方法,为了使我们的学习更加的完整,我们在这里学习一些特殊的方法. 一般说来,特殊的方法都被用来模仿某个行为.例如,如果你想要为你的类使用x[key]这样的索引操作( ...
- SQLServer之创建提交读
事务提交读注意事项 语法:set transaction isolation level read committed. 数据库默认的是两个会话事务之间是提交读. READ COMMITTED指定语句 ...
- Andriod studio 打包aar
因为项目不同,有些公用库而且还是c++的,还有一些带资源的,简单的复制遇到库升级又是一轮配置,编译成aar则解决这些麻烦. 但是默认andriod studio的make moudle只生成debug ...
- Linux 下操作Mysql指令的总结 远程连接的设置
参考博客:https://www.cnblogs.com/liaocheng/p/4243579.html (常用命令) https://www.cnblogs.com/zhangzhu/archiv ...
- Riccati方程(微分方程)
形如:$$\frac{dy}{dx}=P(x)y^{2}+Q(x)y+R(x)$$ 其中P(x).Q(x).R(x)是连续可微函数 或形如 $$\frac{dy}{dx}=ay^{2}+\frac{k ...
- icpc南宁站赛后总结
11月24号,我们经过26个小时的火车来到了广西南宁,一场漫长的过程. 24号晚到达南宁,做地铁到达学校,找到住的地方,南宁的天真是让人无奈. 25号,上午去广西大学体育馆报道,然后回去好好整理了一下 ...
- MessageDigest类
public abstract class MessageDigest extends MessageDigestSpi API中的中英文对照简介(未完) java.security.MessageD ...
- Django(六)Session、CSRF、中间件
大纲 二.session 1.session与cookie对比 2.session基本原理及流程 3.session服务器操作(获取值.设置值.清空值) 4.session通用配置(在配置文件中) 5 ...
- mysql union 与 union all 语法及用法
1.mysql union 语法 mysql union 用于把来自多个select 语句的结果组合到一个结果集合中.语法为: select column,......from tabl ...
- Nginx 常见问题
1. CreateFile() "C:\Users\zhang\Desktop\K\My Project\SSL-数字证书\Nginx配置\nginx-1.12.2/conf/nginx.c ...