element plus el-form自定义验证输入框为纯数字函数
<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'},
],
})