项目场景：

知识产权模块

问题描述

给输入框加校验规则

解决方案：

模板中规则绑定 :rules=“rulesupload”

<a-form-model :model="uploadForm" v-bind="formItemLayout" ref="uploadForm" :rules="rulesupload">      
        <a-form-model-item label="合同名称" prop="name">
          <a-textarea v-model="uploadForm.name" auto-size :disabled="disabled" />
        </a-form-model-item> 
        <a-form-model-item label="合同金额(元)" prop="money">
          <a-textarea auto-size v-model="uploadForm.money" :disabled="disabled" />
        </a-form-model-item> 
      </a-form-model>

1.在src下的utils下新建validate.js文件

/**
 * 金额
 * @param {*} s
 */
export const validateNumber = (rule, value, callback) => {
    let numberReg = /^\d+$|^\d+[.]?\d+$/
    if (value !== '') {
        if (!numberReg.test(value)) {
            callback(new Error('请输入数字'))
        } else {
            callback()
        }
    } else {
        callback(new Error('请输入值'))
    }
}

2.vue页面中引入

import { validateNumber } from '@/utils/validate'

3.在export default中定义rule规则，使用语法：{validator:验证方法,trigger:验证触发}

data() {
    return {
rulesupload: {
        name: [
        { required: true, message: '不能为空', trigger: ['change', 'blur'] },
        { min: 1,max: 50,message: "输入不能超过50个字符",trigger: "blur"}],
        money: [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] },
          { validator: validateNumber, trigger: 'blur' }
        ],
      },
	}
}


methods：{
    // 编辑提交
    onEditupload() { 
      this.$refs.uploadForm.validate((valid) => {
        if (valid) {
            ...//正常提交流程
        }
      })
    },
}

规则参考：https://www.cnblogs.com/lieone/p/11856330.html

校验规则集合：https://www.cnblogs.com/lieone/p/11856330.html

只能输入正整数：https://blog.csdn.net/weixin_29235525/article/details/113323768