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

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

效果图

bash 复制代码
<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'},
  ],
})
相关推荐
猫猫村晨总2 天前
涉及到行合并的el-table表格导出功能实现
前端·vue.js·element plus
溜_x_i_a_o_迪3 个月前
前端(Vue)全屏 screenfull 通用解决方案及原理分析
前端·javascript·vue.js·element plus·全屏通用解决方案·原理分析·前端通用解决方案
diygwcom3 个月前
Vue3+ element plus 前后分离admin项目安装教程
前端·vue3·element plus
小御姐@stella4 个月前
自定义指令实现Element Plus分页组件内容样式修改
vue.js·element plus
luanluan88884 个月前
维护el-table列,循环生成el-table
javascript·vue.js·ecmascript·element plus
翼晗5 个月前
element-plus 自定义命名空间 el-config-provider namespace 不起作用,html 的class值改变了,但是样式不对
前端·html·element·element plus
码农研究僧5 个月前
详细分析Element Plus中的ElMessageBox弹窗用法(附Demo及模版)
前端·javascript·element plus·elmessagebox
刘凌枫羽8 个月前
ve-anchor 锚点
vue·element plus·锚点·快速跳转
天外天-亮10 个月前
element + table 行列合并
javascript·element plus·element ui