element plus el-form自定义验证输入框为纯数字函数

最新推荐文章于 2025-06-09 10:51:23 发布

weixin_42220130

最新推荐文章于 2025-06-09 10:51:23 发布

阅读量626

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Element ui 文章标签： element plus el-from el-input 纯数字验证器

本文链接：https://blog.csdn.net/weixin_42220130/article/details/143573022

Element ui 专栏收录该内容

15 篇文章

订阅专栏

element plus 的el-form 使用自定义验证器，验证纯数字，禁止输入小数、中文、字母、特殊符号。input的maxlength为最大输入多少位长度

效果图
在这里插入图片描述

在这里插入图片描述

<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="120px" :disabled="type==='view'">
 <el-form-item label="数量上限" prop="replicaLimit">
          <el-input v-model.number="dataForm.replicaLimit" placeholder="请输入数量上限" maxlength="5"/>
        </el-form-item>
</form>

// 提交表单数据
const dataForm = reactive({
  name: '',//组件名称
  componentSign: '',//组件标识(主键-只新增，不许修改)
  replicaLimit: '',//数量上限
  icon: '',//组件图标
});


//校验纯数字(函数位置放在调用前
const validateNumber = (rule: any, value: string, callback: any) => {
  const reg = /^[0-9]*$/;//纯数字正则表达式
  if (!reg.test(value)) {//!取反 如果不是纯数字
    callback(new Error('请输入纯数字'));
  } else {
    callback();
  }
}

// 定义校验组件
const dataRules = ref({
  name: [
    {required: true, message: '请输入组件名称', trigger: 'blur'}
  ],
  componentSign: [
    {required: true, message: '请输入组件标识', trigger: 'blur'},
  ],
  replicaLimit: [
    {required: true, message: '请输入数量上限', trigger: 'blur'},
    { validator: validateNumber, trigger: 'blur' },
  ],
  icon: [
    {required: true, message: '请上传组件图标', trigger: 'blur'},
  ],
})