elementUI校验注意事项(不定期更新)_elementui的 isnumber怎么用-优快云博客

本文详细介绍ElementUI中数字校验的两种方法：使用Vue自带的.number修饰符简化数字输入处理，以及通过自定义正则表达式进行严格数字验证，确保输入合法性。

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

1. 数字校验

1.1 elementUI官方提供的数字校验: elementUI的数字校验和其他校验不同, 使用了Vue 自身提供的用于将绑定值转化为 number 类型的修饰符.

步骤两步:

1) el-form-item中填写prop

2)v-model后面添加".number" (这一步比较特别)

3) 在rules定义:{ type: 'number', message: '佣金单价必须为数字值'}

在form表单中使用:
<el-form
        :inline="true"
        :model="ruleForm"
        label-width="100px"
        ref="ruleForm"
        :rules="rules"
        label-position="left"
        style="width:90%;margin:0 auto">
<el-form-item label="label:"  prop="sample" >
         <el-input v-model.number="ruleForm.sample" ></el-input>
 </el-form-item>
</el-form>

在data中定义的rules:
rules:{
        'sample':[{ type: 'number', message: '这里必须填写数字值'}] ,
      },

以上这种校验方式, 在输入"1a1"的时候不会提示输入错误, 传到后台的内容会自动忽略字符'a', 获取到'11'的结果. 且该值是必填项

1.2 我实际中使用的是自定义校验判断输入内容是否是数字

html部分:
<el-form
        :inline="true"
        :model="ruleForm"
        label-width="100px"
        ref="ruleForm"
        :rules="rules"
        label-position="left"
        style="width:90%;margin:0 auto">
        <el-form-item prop="amount" style="margin:7px 0px">
           <el-input v-model="ruleForm.amount"></el-input>
        </el-form-item>
</el-form>

js部分
data(){
    var isNumber = (rule, value, callback)=>{
      if(value != ""){
        if((/^[+-]{0,1}(\d+)$|^[+-]{0,1}(\d+\.\d+)$/).test(value) == false){
            callback(new Error("请填写数字"));
        }else{
            callback();
        }
      }else{
        callback();
      }
    }
    return{
      ruleForm:{
        amount:0,
      }
      rules:{
        amount:[{ validator: isNumber}] ,
      }
}

需要注意的是这里在v-model后没有加".number", 这样就不会自动把输入的内容中非数字字符忽略掉了.

正则表达式允许的范围是带0个或者一个正负号的整数或者小数