关于vue中使用el-form组件表单校验问题

1.最简单的普通校验

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
	  <el-form-item label="活动名称" prop="name">
	 	   <el-input v-model="ruleForm.name"></el-input>
	  </el-form-item>
 </el-form>
 
 <script>
	  export default {
	    data() {
	      return {
				 rules: {
				          name: [
				            { required: true, message: '请输入活动名称', trigger: 'blur' },
				            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				          ],
				        }
		 		}
		 }
	}
</script>

rules对象中的属性名‘name’,是根据prop='name’这个‘name’定义的；（一般如果prop=‘zs’,rules对象中的校验属性名也要叫‘zs’）；
trigger定义触发校验的方式

2.自定义校验

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
	  <el-form-item label="确认密码" prop="checkPass">
	    	<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
	  </el-form-item>
	  <el-form-item label="年龄" prop="age">
	    	<el-input v-model.number="ruleForm.age"></el-input>
	  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
	        if (!value) {
	          return callback(new Error('年龄不能为空'));
	        }
        setTimeout(() => {
	          if (!Number.isInteger(value)) {
	            callback(new Error('请输入数字值'));
	          } else {
		            if (value < 18) {
		              callback(new Error('必须年满18岁'));
		            } else {
		              callback();
		            }
	          }
        }, 1000);
      };
      var validatePass2 = (rule, value, callback) => {
	        if (value === '') {
	         	 callback(new Error('请再次输入密码'));
	        } else if (value !== this.ruleForm.pass) {
	        	  callback(new Error('两次输入密码不一致!'));
	        } else {
	        	  callback();
	        }
      };
      return {
        ruleForm: {
	          checkPass: '',
	          age: ''
        },
        rules: {
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      }
  }
</script>
          

3.1跟其他数据有联动逻辑，当数据1有值时数据2才必填，否则非必填这种情况的校验;
如果有多个input需要一样的校验逻辑，也可以在commin.js中定义一个公共的校验方法；
required:动态的控制必填与非必填；
checkCnt自定义的校验逻辑；
表单校验规则一般写在data中，但有时候也可以写在computed计算属性里；

      ref="dataForm"
      :model="form"
      :rules="formRules"
      label-width="80px"
      class="form_dialog"
    >
		  <el-descriptions border >
		              <el-descriptions-item>
		                	<template slot="label"> 1优化完善业务流程 </template>
			                <el-form-item label="" prop="obj1">
				                  <el-input
				                    v-model="form.obj1"
				                    :disabled="checkType"
				                    maxlength="100"
				                    class="ipt_w"
				                  />
			                </el-form-item>
		              </el-descriptions-item>
		              <el-descriptions-item>
			                <template slot="label">
			                  流程数量
			                  	<span v-if="flag"  class="valid">*</span>
			                </template>
		                <el-form-item label="" prop="obj2">
			                  <el-input
			                    v-model="form.obj2"
			                  />
		                </el-form-item>
		         </el-descriptions-item>
		</el-descriptions>
</el-form>
import { checkCnt } from './common.js'

 data() {
 	return {
 		flag:false，
 		form:{ }
	}
 }
 watch: {
    	// 监听数据1并且给必选/非必须一个标识 ：
       'form.obj1': {
		      handler(val) {
			        if (val) {
			          this.flag= true
			        } else {
			          this.flag= false
			        }
		      },
		      immediate: true
    	},
    },
   computed: {
   	 	// 表单校验 
    	formRules() {
	      	return {
	       	 	// 校验-流程数量
		        	obj2: [
				          		{
				           			 validator: (_, value, callback) =>
				              				checkCnt(value, callback, this.flag),
				            				trigger: 'blur',
				           					required: this.ywlcFlag
				        	  }
		      	    ],
	        }
    }
}

common.js

export const checkCnt = (value, callback, status) => {
  if (status) {
	    if (value) {
		      if (/^[1-9]\d*$/.test(value) && value >= 1) {
		         callback()
		      } else {
		         callback(new Error('数量请输入大于0的整数'))
		      }
	    } else {
	      	 callback(new Error('数量不能为空'))
	    }
  } else {
   		 callback()
  }
}

3.2 也可以校验逻辑直接在methods中定义一个方法，在data中直接this.方法名去调用；

 data() {
    return {
     // 表单校验
      rules: {
	        stockCode: [
		          {
		            validator: this.validStockCode,
		            trigger: 'blur',
		            required: true
		          }
	        ]
       }
    }
  },
  methods: {
		 validStockCode(rule, value, callback) {
		      if (!this.isZQ) {
			        if (!value) {
			          return callback(new Error('账号不能为空'))
			        } else {
			          callback()
			        }
		      } else {
			        if (!value) {
			          return callback(new Error('账号不能为空'))
			        } else {
					          if (this.isValidStockCode(value)) {
					            callback()
					          } else {
					            callback(new Error('长度必须8位或10位'))
					        }
			        }
		      }
	 }
}

以上就是最近关于form表单校验的一点整理，希望能帮助到刚开始做前端的基础小白；