【Vue】表单校验

简单举个栗子

校验form表单中日期commenceDate的值不为空

1. 属性

• :rules="rules"

• ref=""(不写可能校验不触发)

  <el-form :label-position="labelPosition" label-width="50%" :model="forma" :rules="rules" ref="forma">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="'Policy Commence Date'" prop="commenceDate">
              <el-date-picker
                style="width: 80%"
                v-model="forma.commenceDate"
                type="date"
                placeholder=""
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          </el-row>
      </el-form>

2. rules

   return {
   		forma:{
        // v-model
            commenceDate:'',
        },
        
      	// rules 编写
      	rules:{
        	commenceDate:[{
	        	// 必填
	        	required:true,
	        	// 校验器
	        	validator: validateCommenceDate,
	        	// 触发校验的情况:失焦和改变都触发校验
	        	trigger:['blur','change']
	        }],
      	},
    };

3. data

export default {
  data:function() {
  
    // 校验 
    const validateCommenceDate = (rule, value, callback) => {
      let received = value;  
      if (value != null && '' != value){
      	callback();
      }else{
      	 return callback(new Error('Please Select Policy Commence Date'))
      }
      
    };