表单校验记录

校验数字

复制代码
<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();
  }
},`
相关推荐
c0detrend6 分钟前
读诗的时候我却使用了自己研发的Chrome元素截图插件
前端·chrome
希冀12325 分钟前
【Vue】第五篇
前端·javascript·vue.js
Moonbit43 分钟前
你行你上!MoonBit LOGO 重构有奖征集令
前端·后端·设计
littleplayer1 小时前
Root-> A ->B -> C page, 当前C page, 如何返回B,又如何直接返回A page呢
前端
姝然_95271 小时前
Android Activity启动流程详细分析
前端
littleplayer1 小时前
SwiftUI 导航
前端
用户92426257007311 小时前
Vue 组件入门学习笔记:局部注册、全局注册与 Props 传值详解
前端
华仔啊1 小时前
开源一款 SpringBoot3 + Vue3 数据库文档工具,自动生成 Markdown/HTML
vue.js·spring boot·后端
云枫晖1 小时前
Webpack系列-构建性能优化实战:从开发到生产
前端·webpack·性能优化
Patrick_Wilson2 小时前
AI会如何评价一名前端工程师的技术人格
前端·typescript·ai编程