快捷導(dǎo)航

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

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

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

寫一個(gè)vue組件Password.vue

沒(méi)有表單驗(yàn)證只有3個(gè)表單項(xiàng)

<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="驗(yàn)證密碼">
        <el-input></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
</script>

路由省略

給這個(gè)表單綁定一個(gè)對(duì)象

<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="驗(yàn)證密碼" 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ī)則注意表單項(xiàng)一定要有prop屬性屬性值對(duì)應(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="驗(yàn)證密碼" >
        <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: '請(qǐng)輸入舊密碼', trigger: 'blur' },
      { min: 6, max: 32, message: '長(zhǎng)度在 6 到 32 個(gè)字符', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '請(qǐng)輸入新密碼', trigger: 'blur' },
      { min: 6, max: 32, message: '長(zhǎng)度在 6 到 32個(gè)字符', trigger: 'blur' }
    ]
  }
})
</script>

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

<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="驗(yàn)證密碼"   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('請(qǐng)輸入新密碼'));
  } else if (value !== '123') {
    callback(new Error('舊密碼錯(cuò)誤'));
  }else{
    callback();
  }
}
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('請(qǐng)?jiān)俅屋斎胄旅艽a'));
  } else if (value !== data.form.password) {
    callback(new Error('兩次輸入密碼不一致!'));
  } else {
    callback();
  }
}
const data = reactive({
  form: {
    oldPassword: '',
    password: '',
    confirmPassword: ''
  }
  ,
  rules: {
    oldPassword: [
        { required: true, message: '請(qǐng)輸入舊密碼', trigger: 'blur' },
      {validator: validatePass1, trigger: 'blur'}
    ],
    password: [
      { required: true, message: '請(qǐng)輸入新密碼', trigger: 'blur' },
      { min: 6, max: 32, message: '長(zhǎng)度在 6 到 32個(gè)字符', trigger: 'blur' }
    ],
    confirmPassword: [
      { required: true, message: '請(qǐng)?jiān)俅屋斎胄旅艽a', trigger: 'blur' },
      { validator: validatePass2, trigger: 'blur' }
    ]
  }
})
</script>

到此這篇關(guān)于vue + element-plus自定義表單驗(yàn)證（修改密碼業(yè)務(wù)）的文章就介紹到這了,更多相關(guān)vue element-plus表單驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: