快捷導(dǎo)航

vue?+?element-plus自定義表單驗證(修改密碼業(yè)務(wù))的示例

更新時間：2025年04月16日 10:07:31 作者：胚芽鞘681

這篇文章主要介紹了vue?+?element-plus自定義表單驗證(修改密碼業(yè)務(wù)),本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧

寫一個vue組件Password.vue

沒有表單驗證只有3個表單項

<template>
  <div>
    <el-form>
      <el-form-item label="舊密碼">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="新密碼">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="驗證密碼">
        <el-input></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
</script>

路由省略

給這個表單綁定一個對象

<template>
  <div>
    <el-form :="data.form">
      <el-form-item label="舊密碼" v-model="data.form.oldPassword">
        <el-input ></el-input>
      </el-form-item>
      <el-form-item label="新密碼" v-model="data.form.password">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="驗證密碼" v-model="data.form.confirmPassword">
        <el-input></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import {reactive}  from "vue";
const data = reactive({
  form: {
    oldPassword: '',
    password: '',
    confirmPassword: ''
  }
})
</script>

給表單綁定規(guī)則注意表單項一定要有prop屬性屬性值對應(yīng) data.rules里的屬性

<template>
  <div>
    <el-form :model="data.form" :rules="data.rules">
      <el-form-item label="舊密碼" prop="oldPassword" >
        <el-input v-model="data.form.oldPassword"></el-input>
      </el-form-item>
      <el-form-item label="新密碼"   prop="password">
        <el-input v-model="data.form.password"></el-input>
      </el-form-item>
      <el-form-item label="驗證密碼" >
        <el-input v-model="data.form.confirmPassword"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import {reactive}  from "vue";
const data = reactive({
  form: {
    oldPassword: '',
    password: '',
    confirmPassword: ''
  }
  ,
  rules: {
    oldPassword: [
      { required: true, message: '請輸入舊密碼', trigger: 'blur' },
      { min: 6, max: 32, message: '長度在 6 到 32 個字符', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '請輸入新密碼', trigger: 'blur' },
      { min: 6, max: 32, message: '長度在 6 到 32個字符', trigger: 'blur' }
    ]
  }
})
</script>

添加自定義規(guī)則注意規(guī)則有優(yōu)先級的

<template>
  <div>
    <el-form :model="data.form" :rules="data.rules">
      <el-form-item label="舊密碼" prop="oldPassword" >
        <el-input v-model="data.form.oldPassword"></el-input>
      </el-form-item>
      <el-form-item label="新密碼"   prop="password">
        <el-input v-model="data.form.password"></el-input>
      </el-form-item>
      <el-form-item label="驗證密碼"   prop="confirmPassword">
        <el-input v-model="data.form.confirmPassword"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import {reactive}  from "vue";
const validatePass1 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('請輸入新密碼'));
  } else if (value !== '123') {
    callback(new Error('舊密碼錯誤'));
  }else{
    callback();
  }
}
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('請再次輸入新密碼'));
  } else if (value !== data.form.password) {
    callback(new Error('兩次輸入密碼不一致!'));
  } else {
    callback();
  }
}
const data = reactive({
  form: {
    oldPassword: '',
    password: '',
    confirmPassword: ''
  }
  ,
  rules: {
    oldPassword: [
        { required: true, message: '請輸入舊密碼', trigger: 'blur' },
      {validator: validatePass1, trigger: 'blur'}
    ],
    password: [
      { required: true, message: '請輸入新密碼', trigger: 'blur' },
      { min: 6, max: 32, message: '長度在 6 到 32個字符', trigger: 'blur' }
    ],
    confirmPassword: [
      { required: true, message: '請再次輸入新密碼', trigger: 'blur' },
      { validator: validatePass2, trigger: 'blur' }
    ]
  }
})
</script>