“This is the fourth day of my participation in the August Gwen Challenge.

Form validation in detail

</a-button> <a-form ref="formRef" :model=" formstate.youform"  :rules="rules" :labelCol="{ style: 'width: 100px'}" v-if="flag" > <a-form-item ref="youNaNe" label=" youNaNe" name="youNaNe"> < A-input placeholder=" V - model: value = "formState. YouForm. YouNaNe" style = "width: 270 px" / > < / a - form - item > < a form - the item label = "school" Name = "useSlectValue" > < a - select placeholder = "please select" style = "width: 270 px" v - model: value = "formState. YouForm. UseSlectValue" > <a-select-option :value="item.code" v-for="(item,index) in formState.backDataSchool" :key="index"> {{ item.name }} </a-select-option> </ A-select > </ A-form-item > < A-form-item label=" date "required name="date1"> < A-date-picker style="width:270px" v-model:value="formState.youForm.date1" show-time format="YYYY-MM-DD" type="date" ValueFormat ="YYYY-MM-DD" placeholder=" please select "/> </ A-form-item > < A-form-item label=" preference" name="type" > < A-checkbox-group v-model:value="formState.youForm.type"> <a-checkbox :value="item.code" :name="item.name" v-for="(item,index) in formState.likeBackArr" :key="index" >{{ item.name }}</a-checkbox> </a-checkbox-group> </a-form-item> <a-form-item :wrapper-col="{ span: 14, offset: < p style="margin-left: 25px; margin-left: 25px; margin-left: 25px; </a-button style="margin-left: 10px" @click="resetForm"> 10px" @click="removeResult"> </a-button> </a-form> </a-form> </template>Copy the code
<script lang="ts"> import { defineComponent, reactive, ref, toRaw, nextTick } from 'vue'; export default defineComponent({ setup() { const formRef = ref(); const flag=ref(false) const formState= reactive({ youForm:{ youNaNe:'', useSlectValue: undefined, date1: undefined, delivery: false, type: [],}, backDataSchool: [{name: 'the first primary school, code:' 001 '}, {name: 'the second primary school, code:' 002 '},], likeBackArr: [{name: 'sleep' code: '1'}, {name: 'eating' code: '2'}, {name: 'eating' code: '3'},]}); Const rules = {youNaNe: [{required: true, message: 'Please input name ', trigger: 'blur'},], useSlectValue: [{required: True, message: 'Please select school ', trigger: 'change'}], date1: [{required: true, message:' Please select date ', trigger: 'change',}], type: [{type: 'array', required: true, message: 'please select ', trigger: 'change',},],}; const onSubmit = () => { formRef.value .validate() .then(() => { console.log('values', formState, toRaw(formState)); }) .catch((err:any) => { console.log('err') }); }; Const resetForm = () = > {/ / remove rules and reset the data in the data formRef value. ResetFields (); }; Const removeResult=()=>{// Removes the validation result of the form item. formRef.value.clearValidate(); } const showHnader=()=>{ flag.value=true; nextTick(()=>{ formRef.value.clearValidate(); }) } return { formRef, formState, rules, flag, removeResult, onSubmit, resetForm, showHnader }; }}); </script>Copy the code

Pay attention to the point

<! // date1: [{required: true, message: 'Please select date ', trigger: 'change', type: 'object'}], // If type: 'object', The thing to be aware of is that you need to define an interface and the third dot that you need to be aware of is format="YYYY-MM-DD" type="date" valueFormat="YYYY-MM-DD" so that you can display it on the view and get the corresponding formatting and the width of the label is very useful :labelCol="{ style: 'width: 100px' }"Copy the code

scenario

In the process of using the vue project development Often defined using a large number of components At this time of the components of the definition of data types is very important At this point we need to define the components needed data types before I only know a few simple today suddenly discovered that still can use this awesome In particular, the custom validation this piece may not often use But it can handle many special scenariosCopy the code

Verification rule for props in vue

Props: {// Basic type checking (' null 'and' undefined 'will pass any type validation) propA: Number, // Multiple possible types propB: [String, Number], <! -- I always thought of multiple authentication before so write - > propB: String | Number / / mandatory String propC: {type: String, required: true}, / / digital propD with default values: PropE: {type: Number, default: 100}, // Objects with default values propE: {type: Object, // Default values for objects or arrays must be obtained from a factory function default: Function () {return {message: 'hello'}}}, // Custom validation function propF: {validator: Function (value) {// This value must match one of the following strings: return ['success', 'warning', 'danger'].indexof (value)! PropG: {type: Function, // Unlike object or array defaults, this is not a factory Function -- this is a Function used as a default: function() { return 'Default function' } }Copy the code