技術標籤：vue.js

Vue密碼驗證:密碼必須由大寫字母、小寫字母、數字、特殊符號中的2種及以上型別組成

<template>
        <el-form :model="popData" size="mini" :rules="rules" ref="popData" style="padding: 0 30px 0 0;" label-width="110px"
          class="demo-ruleForm">
          <el-form-item label="登入名" prop="loginName">
            <el-input v-model="popData.loginName" placeholder="請輸入登入名" type="text"></el-input>
          </el-form-item>
          <el-form-item label="密碼" prop="password">
            <el-input v-model="popData.password" placeholder="請輸入密碼" type="text"></el-input>
          </el-form-item>
          </el-form>
   </template>
 

驗證規則：

rules: {  
        loginName: [{
          required: true,
          message: '請輸入登入名',
          trigger: 'change'
        }],
        password: [{
          required: true,
          message: '請輸入密碼',
          trigger: 'blur'
        },
        { min: 8, max: 15, message: '密碼長度應大於等於8個字元小於16個字元!', trigger: "blur" },
      {
        trigger: 'blur',
        validator: (rule, value, callback) => {
          var passwordreg = /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/
          console.log(passwordreg.test(value))
          if (!passwordreg.test(value)) {
            callback(new Error('密碼必須由大寫字母、小寫字母、數字、特殊符號中的2種及以上型別組成!'))
          }
          else{
            callback()
          }
        } },
       ],
       }