若依-参数验证

发表于2021-06-11更新于2021-06-24字数统计378阅读时长3分

效果展示

约束条件

基本实现

定义约束条件

1
2
3
4
5
6
7
8
// 表单校验
return {
    rules: {
        contractNum: [
            {required: true, message: "合同号不能为空", trigger: "blur"}
        ],
    }
}

注意，这里的规则名contractNum对应了合同号字段

添加规则

1
<el-form ref="contractNumForm" :model="formData" :rules="rules">

函数中添加判断语句

1
2
3
4
5
6
7
8
9
/** 提交按钮 */
submitForm() {
    this.$refs["contractNumForm"].validate(valid => {
        if (valid) {
            //业务代码
        	... ...
        }
    })
},

注意，这里的contractNumForm对应了表单ref参数的值

验证是否为数字

要验证是否为数字，我们的验证语句需要这么写：

1
{type: 'number', message: "数量必须为数字", trigger: ["blur", "change"]}

同时，在表单中需要给v-model字段参数加上.number，即

1
<el-input v-model.number="formData.amount" placeholder="数量" clearable>

验证是否为纯数字(整数、小数)

效果

纯数字验证

如何实现

自定义验证方法

在ruoyi-ui/src/utils/validate.js中，自定义判定纯数字的接口方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
 * 纯数字校验
 * @param rule
 * @param value
 * @param callback
 */
export function validateNumber(rule, value, callback) {
    let numberReg = /^\d+$|^\d+[.]?\d+$/
    if (value !== '') {
        if (!numberReg.test(value)) {
            callback(new Error('请输入数字'))
        } else {
            callback()
        }
    } else {
        callback(new Error('请输入值'))
    }
}
导入
1
import {validateNumber} from "@/utils/validate";
参数验证
1
2
3
4
totalPrice: [
  {required: true, message: '总价不能为空', trigger: ["blur", "change"]},
  {validator: validateNumber, trigger: ["blur", "change"]}
]