element ui 表单验证为正整数

本文介绍如何在ElementUI中使用el-input-number组件进行正整数输入,并通过正则表达式实现有效的表单验证。提供了详细的代码示例,帮助开发者确保用户输入符合预期的数据类型。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但是正整数就需要判断了

可以利用正则来判断

代码如下

<el-form ref="checkData" :rules="checkData" :model="eyPara" label-position="left" label-width="100px">
  
     <el-form-item label="值:" prop="amErrYear">
                  <el-input v-model="eyPara.amErrYear" placeholder="输入值" clearable/>
              </el-form-item>
</el-form>
 
export default{
data(){
   const blurText = async(rule, value, callback) => {  
        // const reg = /^\-\d\.?\d*$/
        // const boolean = reg.test(value)
        const boolean = new RegExp('^[1-9][0-9]*$').test(value)
        // console.log(boolean)
        if (!boolean) {
          this.$message.warning('请输入正整数')
          this.eyPara.amErrYear = ''
        }
      }
 
   return {
  
eyPara: {
        amErrYear: ''
      },
checkData:{
  
  amErrYear: [
          { required: true, message: '输入值', trigger: 'blur' },
          { validator: blurText, trigger: 'blur' }  //表单验证的时候会调用的方法
        ],
}
} 
}
}
rules表单验证规则,异步表单验证,validator 是根据校验规则得到的校验器 ,自定义校验 callback 必须被调用。 更多高级用法可参考  async-validator
 
 
 
 

转载于:https://www.cnblogs.com/yearshar/p/11593275.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值