WEB之密码书写

密码输入框

//写在template
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px">
<el-row>
      <el-col :offset="1" :span="10">
        <el-form-item label="旧密码：" prop="oldPassword">
          <el-input v-model="ruleForm.oldPassword" :type="passwordType" size="small">
            <i v-if="passwordType==='password'" slot="suffix" class="fa fw fa-eye-slash" @click="togglePasswordType" />
            <i v-else slot="suffix" class="fa fw fa-eye" @click="togglePasswordType" />
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="1" :span="10">
        <el-form-item label="新密码：" prop="newPassword">
          <el-input v-model="ruleForm.newPassword" :type="passwordType2" size="small">
            <i v-if="passwordType2==='password'" slot="suffix" class="fa fw fa-eye-slash" @click="togglePasswordType2" />
            <i v-else slot="suffix" class="fa fw fa-eye" @click="togglePasswordType2" />
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="1" :span="10">
        <el-form-item label="确认新密码：" prop="newPassword2">
          <el-input v-model="ruleForm.newPassword2" :type="passwordType2" size="small">
            <i v-if="passwordType2==='password'" slot="suffix" class="fa fw fa-eye-slash" @click="togglePasswordType2" />
            <i v-else slot="suffix" class="fa fw fa-eye" @click="togglePasswordType2" />
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :class="isIndex ? 'jee-submit-buttons-index' : 'jee-submit-buttons'">
      <el-col :offset="!isIndex ? 0 : 1" :span="21">
        <el-button type="primary" size="small" class="fa fa-check" @click="validateSubmit(ruleForm)">
          &nbsp;&nbsp; 保存
        </el-button>
        <el-button v-if="!isIndex" size="small" class="fa fa-reply-all" @click="close">
          &nbsp;&nbsp;关闭
        </el-button>
      </el-col>
    </el-row>
  </el-form>

填写规则

export default {
    
  data () {
   
    var validatePass = (rule, value, callback) => {
   
    //使用正则来判断填写内容
      var passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{
   8,1000}/
      if (value === '') {
   
        callback(new Error('请输入密码'))
      } else if (value.length < 8) {
   
        callback(new Error('密码不得小于8位'))
      } else if (!passwordreg.test(value)) {
   
        callback(new Error('包含数字、字母、_或&等特殊符号'))
      } else {
   
        if (this.ruleForm.newPassword !== '') {
   
          this.$refs.ruleForm.validateField('newPassword2')
        }
        callback()
      }
    }
    }
    var validatePass2 = (rule, value, callback) => {
   
      console.log(value)
      if (value === '') {
   
        callback(new Error('请再次输入密码'))
      }