vue validate timing is affected by other vue data in the area of the validate rule incharging

[Teal]

               <div class="f-fr">
                        <input id="userName"
                            type="text"
                            name="userName"
                            placeholder="请输入您的账号"
                            v-model="userName"
                            initial="off"
                            detect-change="off"
                            detect-blur="on"
                            @valid="onUsernameValid"
                            v-validate:user-name="['userRule']">
                        <label for="userName" v-if="$loginValidator.userName.userRule &&                   userName!==''">
                            <i class="icon iconfont icon-cuowu"></i>
                            <span>4~16个字符，支持小写英文数字和下划线，请以英文字母开头</span>
                        </label>
              </div>

i set the timing on blur, but if i add '&& userName!==''' logic to the rule, then it would change its validate timing when the v-model value userName changes. when i want to implement a complicated input case, it makes me crazy! when you put the logic userName!=='' inside the such as on or , it's the same case

[Teal]

can anybody answer this question?