src/components/group/tempFormCheck.vue

@@ -1,59 +1,19 @@
<template>
   <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item ref="name" label="Activity name" prop="name">
         <a-input v-model="form.name" @blur="
          () => {
            $refs.name.onFieldBlur();
          }
        " />
   <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
      <a-form-model-item has-feedback label="Password" prop="pass">
         <a-input v-model="ruleForm.pass" type="password" autocomplete="off" />
      </a-form-model-item>
      <a-form-model-item label="Activity zone" prop="region">
         <a-select v-model="form.region" placeholder="please select your zone">
            <a-select-option value="shanghai">
               Zone one
            </a-select-option>
            <a-select-option value="beijing">
               Zone two
            </a-select-option>
         </a-select>
      <a-form-model-item has-feedback label="Confirm" prop="checkPass">
         <a-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
      </a-form-model-item>
      <a-form-model-item label="Activity time" required prop="date1">
         <a-date-picker v-model="form.date1" show-time type="date" placeholder="Pick a date" style="width: 100%;" />
      </a-form-model-item>
      <a-form-model-item label="Instant delivery" prop="delivery">
         <a-switch v-model="form.delivery" />
      </a-form-model-item>
      <a-form-model-item label="Activity type" prop="type">
         <a-checkbox-group v-model="form.type">
            <a-checkbox value="1" name="type">
               Online
            </a-checkbox>
            <a-checkbox value="2" name="type">
               Promotion
            </a-checkbox>
            <a-checkbox value="3" name="type">
               Offline
            </a-checkbox>
         </a-checkbox-group>
      </a-form-model-item>
      <a-form-model-item label="Resources" prop="resource">
         <a-radio-group v-model="form.resource">
            <a-radio value="1">
               Sponsor
            </a-radio>
            <a-radio value="2">
               Venue
            </a-radio>
         </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="Activity form" prop="desc">
         <a-input v-model="form.desc" type="textarea" />
      <a-form-model-item has-feedback label="Age" prop="age">
         <a-input v-model.number="ruleForm.age" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
         <a-button type="primary" @click="onSubmit">
            Create
         <a-button type="primary" @click="submitForm('ruleForm')">
            Submit
         </a-button>
         <a-button style="margin-left: 10px;" @click="resetForm">
         <a-button style="margin-left: 10px" @click="resetForm('ruleForm')">
            Reset
         </a-button>
      </a-form-model-item>
@@ -62,70 +22,89 @@
<script>
   export default {
      data() {
         let checkPending;
         let checkAge = (rule, value, callback) => {
            clearTimeout(checkPending);
            if (!value) {
               return callback(new Error('Please input the age'));
            }
            checkPending = setTimeout(() => {
               if (!Number.isInteger(value)) {
                  callback(new Error('Please input digits'));
               } else {
                  if (value < 18) {
                     callback(new Error('Age must be greater than 18'));
                  } else {
                     callback();
                  }
               }
            }, 1000);
         };
         let validatePass = (rule, value, callback) => {
            if (value === '') {
               callback(new Error('Please input the password'));
            } else {
               if (this.ruleForm.checkPass !== '') {
                  this.$refs.ruleForm.validateField('checkPass');
               }
               callback();
            }
         };
         let validatePass2 = (rule, value, callback) => {
            if (value === '') {
               callback(new Error('Please input the password again'));
            } else if (value !== this.ruleForm.pass) {
               callback(new Error("Two inputs don't match!"));
            } else {
               callback();
            }
         };

         let validateContent = (rule, value, callback) => {
            console.log(1111);
            if (1 == 1) {
               this.$refs.ruleForm.validateField('checkPass');
            } 
            callback();
         };
         return {
            labelCol: {
               span: 4
            },
            wrapperCol: {
               span: 14
            },
            other: '',
            form: {
               name: '',
               region: undefined,
               date1: undefined,
               delivery: false,
               type: [],
               resource: '',
               desc: '',
            ruleForm: {
               pass: '',
               checkPass: '',
               age: '',
            },
            rules: {
               name: [{
                     required: true,
                     message: 'Please input Activity name',
                     trigger: 'blur'
                  },
                  {
                     min: 3,
                     max: 5,
                     message: 'Length should be 3 to 5',
                     trigger: 'blur'
                  },
               ],
               region: [{
                  required: true,
                  message: 'Please select Activity zone',
               pass: [{
                  validator: validatePass,
                  trigger: 'change'
               }],
               date1: [{
                  required: true,
                  message: 'Please pick a date',
               checkPass: [{
                  validator: validatePass2,
                  trigger: 'change'
               }],
               type: [{
                  type: 'array',
                  required: true,
                  message: 'Please select at least one activity type',
                  trigger: 'change',
               }, ],
               resource: [{
                  required: true,
                  message: 'Please select activity resource',
               age: [{
                  validator: checkAge,
                  trigger: 'change'
               }, ],
               desc: [{
                  required: true,
                  message: 'Please input activity form',
                  trigger: 'blur'
               }],
               common: [{
                  validator: validateContent,
                  trigger: 'change'
               }],
            },
            layout: {
               labelCol: {
                  span: 4
               },
               wrapperCol: {
                  span: 14
               },
            },
         };
      },
      methods: {
         onSubmit() {
            this.$refs.ruleForm.validate(valid => {
         submitForm(formName) {
            this.$refs[formName].validate(valid => {
               if (valid) {
                  console.log('11');
                  alert('submit!');
               } else {
                  console.log('error submit!!');
@@ -133,8 +112,8 @@
               }
            });
         },
         resetForm() {
            this.$refs.ruleForm.resetFields();
         resetForm(formName) {
            this.$refs[formName].resetFields();
         },
      },
   };