I didn't know who I was when I wrote the background management system the last two days. It's too complicated, especially when I wrote with iview and vue. It took me a lot of effort to verify with iview before. I want to tell you a little bit about this experience these days. I hope I can help you.

 <i-form ref= 'formItem' :model="formItem"  :rules='ruleValidate'>
    <form-item label="User Name" prop='username' >
        <i-input  v-model="formItem.username" placeholder="enter one user name"></i-input>
    </form-item>
    <form-item label="User Password" prop="password">
        <i-input v-model="formItem.password" type="password"></i-input>
    </form-item>
    <form-item label="Password Again" prop="rpassword">
        <i-input v-model="formItem.rpassword" type="password"></i-input>
     </form-item>
     <form-item label="user group" prop="group">
        <i-select v-model="formItem.group">
            <i-option value="0">Select User Groups</i-option>
            <i-option v-for="item in group" :value="item.id">{{item.typename}}</i-option>
        </i-select>
     </form-item>
     <form-item label="User Name" prop='nick'>
         <i-input v-model="formItem.nick"  placeholder="Please enter a nickname"></i-input>
     </form-item>
     <form-item label="Contact number">
        <i-input v-model="formItem.tel" placeholder="Please enter a phone"></i-input>
     </form-item>
     <form-item label="contact Q Q">
          <i-input v-model="formItem.qq" ></i-input>
     </form-item>
  </i-form>

This is the form component of iview which is used in the html part above. ref,model,rules can not be missing first, then prop attribute is added inside. v-model is essential in vue.

var vue= new Vue({
            el: '#addModule',
            data(){
                var  validateuser = function(rule, value, callback){
                    if(!value){
                        return callback(new Error("enter one user name"));
                    }else if(!/^[a-zA-Z\d]+$/.test(value)){
                        return callback(new Error("Please enter the user name correctly"))
                    }else{
                        callback();
                    }
                };
                var  validatenick = function(rule, value, callback){
                    if(!value){
                        return callback(new Error("Please enter a user name"));
                    }else if(!/^[\u4e00-\u9fa5]+$/.test(value)){
                        return callback(new Error("Please enter the user name correctly"))
                    }else{
                        callback();
                    }
                };
                var validatePass = function(rule, value, callback) {
                    if (value === '') {
                        callback(new Error('Please input a password'));
                    } else {
                        callback();
                    }
                };
                var validatePassCheck = function(rule, value, callback){
                    if (value === '') {
                        return callback(new Error('Please enter your password again'));
                    } else if (value !== vue.formItem.password) {
                        return callback(new Error('Passwords do not match twice'));
                    } else {
                        callback();
                    }
                };
                return{
                    group:[],
                    formItem:{
                        'username':"",
                        'password':"",
                        'rpassword':"",
                        'nick':'',
                        'tel':"",
                        'qq':"",
                        'group':""
                    },
                    ruleValidate:{
                        username    : [{validator: validateuser,trigger: 'blur'}],
                        nick        : [{validator: validatenick,trigger: 'blur'}],
                        password    : [{validator: validatePass, trigger: 'blur' },{min:6,message:'Please enter at least 6 bits'}],
                        rpassword   : [{validator: validatePassCheck, trigger: 'blur' },{min:6,message:'Please enter at least 6 bits'}],
                        group:[{required: true, type: 'string', message: 'Please select grouping', trigger: 'change'}],
                    }
                }
            },

Above is the js section, the validation information is written in the data, then called in return, the written validation rules are called in validator, and when is the trigger triggered later?
Well, that's it. It was really hard to think about yourself at first, but it became almost clear later.