SoFunction
Updated on 2025-04-05

A brief discussion on the issue of iView form verification

Questions about iView form verification

Steps to verify the iview form:

Step 1: Set properties for Form rules   :rules
Step 2: At the same time, set the attribute prop to each FormItem that needs to be verified and point to the corresponding field, prop=""
Step 3: Note: The Form tag is :model
Step 4: Note: Ref must be added to the Form tag, which is equivalent to id. The form verification within this range is valid.
Step 5: When operating the save button, add a method to verify the entire form. The parameter is a callback after verification, and a Boolean will be returned to indicate success or failure.

  <Form :label-width="100" ref='contractForm' :model='contractForm' :rules="ruleValidate">
    <FormItem label='Contract number:' prop="contractNo">
      <Input placeholder="Please enter the contract number" v-model=''></Input>
    </FormItem>
    //In data, write verification    ruleValidate: {
      contractNo:[
        { required: true, message: 'Contract number cannot be empty', trigger: 'blur' },
      ],
    }
    //In methods, write method    addChange(name){
       this.$refs[name].validate(valid => {
         if (valid) {
         }
       }); 
  </Form> 

IView fails to verify form validation when selecting:

When using the form that comes with iView to verify the select tag, the verification has not been passed, because the default verification data type of iView is String, and the value used by my select is of number type

ruleValidate: {
  customer:[
      { required: true, message: 'Customer name cannot be empty', trigger: 'blur',type:'number'},
    ], 
   } 

IView fails to verify the form verification time and date:

Like the drop-down box, the type of date is data

 ruleValidate: {
  advance:[
      { required: true, message: 'Pre-delivery time cannot be empty', trigger: 'change' ,type: 'date'},
    ],
   }

How to write iView for multiple verification:

Multiple verification includes first, you must verify that it cannot be empty, second, you must verify that some lengths are limited, writing regular expressions, etc.

  ruleValidate: {
       goodsNum: [
           { required: true, message: 'The quantity cannot be empty', trigger: 'blur' },
           { type: 'string',pattern:/^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/, message:'The quantity should be a positive floating point number and not exceed 9999.99', trigger:'blur'},
            ],
   }

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.