Vue+vant验证密码强弱度

因项目需要验证项目密码强弱度，必须包含大小写，字母，数字，及特殊字符，因此整理了一下，代码如下：

 <van-field  
              name="oldPassword" 
              v-model="user.oldPassword" 
              label="旧密码" 
              placeholder="请输入旧密码" 
              type="password" 
              minlength = 8
              onkeyup="this.value=this.value.replace(/\s+/g,'')"
              :rules="[{ required: true }]"
          />
          <van-field  
              name="newPassword" 
              v-model="user.newPassword" 
              label="新密码" 
              placeholder="请输入新密码" 
              type="password"
              minlength = 8 
              onkeyup="this.value=this.value.replace(/\s+/g,'')"
              :rules="[
                    { 
                        required: true,
                        trigger:'onBlur', 
                        message: '不能为空' 
                    },
                    {
                        pattern: /^.*(?=.{8,20})(?=.*\d)(?=.*[A-Z]{1,})(?=.*[a-z]{1,})(?=.*[!@#$%^&*?\(\)]).*$/,
                        message: '新密码8-20位，必须包含数字小写字母大写字母以及特殊字符',
                        trigger: 'onBlur'
                    }
                ]"
             
            />
            <!--@blur="checknewPassword" -->
          <van-field  
              name="confirmPassword" 
              v-model="user.confirmPassword" 
              label="确认密码" 
              placeholder="请确认密码" 
              type="password" 
              minlength = 8 
              onkeyup="this.value=this.value.replace(/\s+/g,'')"
              :rules="[
                    { 
                        required: true,
                        trigger:'onBlur', 
                        message: '不能为空' 
                    },
                    {
                        pattern: /^.*(?=.{8,20})(?=.*\d)(?=.*[A-Z]{1,})(?=.*[a-z]{1,})(?=.*[!@#$%^&*?\(\)]).*$/,
                        message: '确认密码一致',
                        trigger: 'onBlur'
                    }
                ]"  
            />