form表单校验

场景一：formItem下有多个input
场景二：formItem下是一个枚举类型，可以add和delete

/**
 * 数值大小比较
 */
 // 最小值要小于最大值
const checkMinNum = (rule, value, callback) => {
  console.log('自定义校验器rule:', rule) // {message: '要小于最大值', field: 'dataRange[0]', fullField: 'dataRange[0]', type: 'string', validator: ƒ}
  console.log('自定义校验器value:', value) // min的值
  console.log('max的值：',this.basicForm.dataRange[1]) // max的值
  // 这直接放过，因为很可能是非必填；如果必填用required校验器校验
  if (!value) {
    return callback()
  }
  if (value>this.basicForm.dataRange[1]) {
    callback(new Error('设置validator时候没有message才会显示'))
  } else {
    callback()
  }
}
// 最大值要大于最小值
const checkMaxNum = (rule, value, callback) => {
  if (!value) {
    return callback()
  }
  if (value<this.basicForm.dataRange[0]) {
    callback(new Error('1支持大小写字母，数字和特殊字符"_?\'#()\\.,&%@!-"'))
  } else {
    callback()
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

table中的form校验：https://www.freesion.com/article/80501166215/

formItem中两个input，且每个input对应一个属性：

参考：
一个 prop校验两个属性：https://blog.csdn.net/DcTbnk/article/details/119786208?spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-4-119786208-blog-124966024.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-4-119786208-blog-124966024.pc_relevant_aa&utm_relevant_index=7

https://blog.csdn.net/Zhang_aichi/article/details/121117262?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-121117262-blog-122450173.pc_relevant_multi_platform_whitelistv2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-121117262-blog-122450173.pc_relevant_multi_platform_whitelistv2&utm_relevant_index=2

两个prop各自校验：https://blog.csdn.net/a460550542/article/details/124882001?spm=1001.2101.3001.6650.10&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-10-124882001-blog-124966024.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-10-124882001-blog-124966024.pc_relevant_aa&utm_relevant_index=13

<el-form-item label="同步数据频率：" prop="frequency">
    <el-input size="mini" v-model="addForm.frequency" class="form-input" style="width:         
       60px;"></el-input>
      次/
    <el-input size="mini" v-model="addForm.frequencyMinute" class="form-input" 
       style="width: 60px;" ref="frequencyMinute"></el-input>
      分钟
    <span style="color: rgba(0,0,0,0.29);">均为空则不限制请求频率</span>
</el-form-item>


frequency:[
    { validator: checkFrequency, trigger: 'blur' }
]


var checkFrequency = (rule, value, callback) => {
    let minutes = this.$refs.frequencyMinute.value;
    if (!value && !minutes) {
      callback();
    }
 
    var reg =  /^[1-9]\d*$/;
 
    if (!reg.test(value) || !reg.test(minutes)) {
      callback(new Error('请输入非零正整数'));
    } else {
      if (value > 1440 || minutes > 1440) {
        callback(new Error('数值不能大于1440'));
      } else {
         callback();
      }
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

一个formItem下循环多组数据（循环校验）

eg：枚举时候的options

https://blog.csdn.net/l508742729/article/details/108286071
http://t.zoukankan.com/gzya-p-15674708.html