Vue输入的规则自定义设定_vue datarule

在完成一个功能的时候要求实现一个要求，就是输入的数据不能为空并且要小数点后两位，我知道是使用了:rules="dataRule"在el-form上面，然后自定义的情况还是一个写，我在这里记录一下
我们在完成一个表单提交的时候可能需要对方提交的数据是一个合法的数据而不是一个不合法的数据，我们需要在这里实现一个自定的规则。
首先在el-form上面添加<el-form :model="dataForm" :rules="dataRule" label-width="200px" ref="dataForm" size="mini">注意是：rules属性
然后去

export default {
		data() {
		return {
		//定义规则
				}
			}
		|
1
2
3
4
5
6
7

去定义我们具体的规则，在这里需要注意的是，如果你要的写自定义规则你需要在我上面的地方去定义规则，但是你要是单纯的只是使用他自己带的，可以在compute里面去定义规则，然后定义规则的格式

				dataRule: {
						projectName: [{
							required: true,
							message: this.$t('validate.required'),
							trigger: 'blur'
						}],
						contractAmount: [{
							required: true,
							message: '必须为大于0的数字，最多2位小数且不能为空',
							pattern: /^[0-9]+(.[0-9]{1,2})?$/, 
							trigger: 'blur'
						}],
						
						
						weekAmount: [{
							required: true,
							message: '必须为大于0的数字，最多2位小数且不能为空',
							pattern: /^[0-9]+(.[0-9]{1,2})?$/, 
							trigger: 'blur'
						},
						 { validator: checkAmount, trigger: 'blur' }
						],
						yearAmount: [{
							required: true,
							message: '必须为大于0的数字，最多2位小数且不能为空',
							pattern: /^[0-9]+(.[0-9]{1,2})?$/, 
							trigger: 'blur'
						},
						 { validator: checkAmount, trigger: 'blur' }],
						allAmount: [{
							required: true,
							message: '必须为大于0的数字，最多2位小数且不能为空',
							pattern: /^[0-9]+(.[0-9]{1,2})?$/, 
							trigger: 'blur'
						},
						 { validator: checkAmount, trigger: 'blur' }],
						
				},
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
36
37
38

上面有三种规则，第一种就是最普通的非空规则，只要是非空都会给报的，也是最简单的，然后就是我们的限制输入数字的规则加上pattern: /^[0-9]+(.[0-9]{1,2})?$/,模式正则就可以，还有一种就是我们的手写规则。
首先需求是这样的的，有两个变量，周完成量，年完成量，自开工完成量，这三者是累加的关系，年=年+周，自开工=自开工+年，于是我们就要保证周小于年，小于自开工，{ validator: checkAmount, trigger: 'blur' }我们通过这一句，手写一个validator，那我们在那里面去写呢，在data（）里面，但是不在return里面，

export default {
		data() {
			let checkAmount = (rule, value, callback) => {
			  if(this.dataForm.weekAmount != null && this.dataForm.weekAmount != ''
			  	&& this.dataForm.yearAmount != null && this.dataForm.yearAmount != ''
				&& this.dataForm.allAmount != null && this.dataForm.allAmount != ''
			    ){
					if(this.dataForm.weekAmount>this.dataForm.yearAmount){
						callback(new Error('周完成金额大于年完成金额'))
					}
					if(this.dataForm.yearAmount>this.dataForm.allAmount){
						callback(new Error('年完成金额大于自开工完成金额'))
					}
						callback()
			  } else {
			    callback()
			  }
			}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

只截取了一部分，然后就是我们的逻辑部分，然后当输入的为空的时候还是会显示为空的警告，但是如果不符合我们的设定的情况就是显示我们实际加上的规则的报错在页面上