表单密码验证之密码不能包含用户名

需求：
1.密码由8-16位字符组成，至少包含大写字母、小写字母、数字、特殊字符中的三种或以上
2.密码不能包含用户名

<template>
  <Form ref="form" :model="form" :rules="ruleValidate" :label-width="80">
    <FormItem label="姓名" prop="name">
      <Input v-model="form.name" placeholder="请输入姓名"></Input>
    </FormItem>
    <FormItem label="密码" prop="password">
      <Input type="password" v-model="form.password" placeholder="请输入密码"></Input>
    </FormItem>
    <FormItem label="确认密码" prop="confirmPassword">
      <Input type="password" v-model="form.confirmPassword" placeholder="请确认密码"></Input>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="handleSubmit('form')">提交</Button>
      <Button @click="handleReset('form')" style="margin-left: 8px">重置</Button>
    </FormItem>
  </Form>
</template>
<script>
export default {
  data() {
    const validatePass = (rule, value, callback) => {
      const form = this.form
      const confirmpassword = form.password
      let struser = confirmpassword
      let name = form.name
      let password = struser.indexOf(name)
      console.log(form,'form')
      if (value && password != -1) {
        callback('密码不能包含用户名')
      }
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.form.confirmPassword !== '') {
          this.$refs.form.validateField('confirmPassword')
        }
        callback()
      }
    }
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入的密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      form: {
        name: '',
        password: '',
        confirmPassword: '',
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,16}$/,
            message:
              '密码由8-16位字符组成，至少包含大写字母、小写字母、数字、特殊字符中的三种或以上',
            trigger: 'blur',
          },
          {
            validator: validatePass,
          },
        ],
        confirmPassword: [
          {
            required: true,
            message: '两次输入的密码不一致',
            trigger: 'blur',
          },
          {
            validator: validatePassCheck,
          },
        ],
      },
    }
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('Success!')
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    handleReset(name) {
      this.$refs[name].resetFields()
    },
  },
}
</script>