表单校验记录

校验数字

复制代码
<el-form-item
  label="座位数:"
  prop="carInfo.seatNum"
  :rules="{ required: false, message: '请输入数字', trigger: 'blur' ,validator: checkNumber}"
>
  <el-input v-model="quotaForm.carInfo.seatNum" placeholder="请输入"></el-input>
</el-form-item>

方法:

复制代码
/* 校验数字 */
checkNumber(rule, value, callback) {
  const regex = /^\d+$/;
  if (value.length!==0 && (!value || !regex.test(value))) {
    callback(new Error('请输入正整数!'));
  } else {
    callback();
  }
},

校验数字和两位小数

复制代码
<el-form-item
  label="保费:"
  prop="insur.bizKind.rmbSum"
  :rules="[{ required: false, message: '请正确输入(数字或者两位小数)!', trigger: 'blur'},{
    validator: checkMoney
  }]"
>
  <el-input v-model="quotaForm.insur.bizKind.rmbSum" placeholder="请输入"></el-input>
</el-form-item>
vb 复制代码
`
/* 校验输入金额 */
checkMoney(rule, value, callback) {
  const regex = /^\d+(\.\d{1,2})?$/;
  if (value.length!==0 && (!value || !regex.test(value))) {
    callback(new Error('请输入正整数或者两位小数!'));
  } else {
    callback();
  }
},`
相关推荐
想努力找到前端实习的呆呆鸟几秒前
vscode编写vue代码的时候一聚焦就代码块变白?怎么回事如何解决
vue.js·visual studio code
知其然亦知其所以然几秒前
小米的奇幻编程之旅:当 JavaScript 语法变成了一座魔法城
前端·javascript·面试
webkubor几秒前
一次 H5 表单事故:100vh 在 Android 上到底坑在哪
前端·javascript·vue.js
是一碗螺丝粉1 分钟前
突破小程序5层限制:如何用“逻辑物理分离”思维实现无限跳转
前端·架构
Aniugel2 分钟前
Vue2怎么搭建前端性能/错误/行为监控体系
vue.js·面试·监控
神秘的猪头2 分钟前
🎉 React 的 JSX 语法与组件思想:开启你的前端‘搭积木’之旅(深度对比 Vue 哲学)
前端·vue.js·react.js
三十_2 分钟前
如何正确实现圆角渐变边框?为什么 border-radius 对 border-image 不生效?
前端·css
江公望12 分钟前
VUE3 data()函数浅谈
前端·javascript·vue.js
江公望30 分钟前
VUE3 defineProps 5分钟讲清楚
前端·javascript·vue.js
计算机毕设VX:Fegn08951 小时前
计算机毕业设计|基于Java + vue水果商城系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot·课程设计