vue使用rules實現(xiàn)表單字段驗證

更新時間：2021年08月25日 17:04:52 作者：intomylife

這篇文章主要為大家詳細介紹了vue使用rules實現(xiàn)表單字段驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

vue中表單字段驗證的寫法和方式有多種，本博客介紹三種較為常用的驗證方式。

1. 寫在 data 中驗證

表單內容

<!-- 表單 -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item label="用戶名稱:" prop="userName">
       <el-input v-model="rulesForm.userName" style="width:300px" maxlength="50"/>
    </el-form-item>
</el-form>

<el-form>：代表這是一個表單
<el-form> -> ref：表單被引用時的名稱，標識
<el-form> -> rules：表單驗證規(guī)則
<el-form> -> model：表單數(shù)據(jù)對象
<el-form> -> label-width：表單域標簽的寬度，作為 Form 直接子元素的 form-item 會繼承該值
<el-form> -> <el-form-item>：表單中的每一項子元素
<el-form-item> -> label：標簽文本
<el-form-item> -> prop：表單域 model 字段，在使用 validate、resetFields 方法的情況下，該屬性是必填的
<el-input>：輸入框
<el-input> -> v-model：綁定的表單數(shù)據(jù)對象屬性
<el-input> -> style：行內樣式
<el-input> -> maxlength：最大字符長度限制

data 數(shù)據(jù)

data() {
    return {
        // 省略別的數(shù)據(jù)定義
        ...
        
        // 表單驗證
        formRules: {
            userName: [
                {required: true,message: "請輸入用戶名稱",trigger: "blur"}
            ]
        }
    }
}

formRules：與上文 '表單內容' 中 <el-form> 表單的 :rules 屬性值相同
userName：與上文 '表單內容' 中 <el-form-item> 表單子元素的 prop 屬性值相同
驗證內容是：必填，失去焦點時驗證，如果為空，提示信息為 '請輸入用戶名稱'

2. 寫在行內

表單內容

<!-- 表單 -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item label="銀行名稱:" prop="accountName" :rules="[{required:true,message:'請輸入銀行名稱',trigger:'blur'}]">
        <el-input v-model="rulesForm.accountName" style="width:300px" maxlength="50"/>
    </el-form-item>
</el-form>

<el-form-item> -> rules：和第一種方式表現(xiàn)的效果一致，只是寫法不一樣，這里不再贅述

data 數(shù)據(jù)沒有內容

3. 引入外部定義的規(guī)則

表單內容

<!-- 表單 -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item label="銀行卡號:" prop="accountNumber">
       <el-input v-model="rulesForm.accountNumber" style="width:300px" maxlength="19"/>
    </el-form-item>
</el-form>

表單內容與第一種方式寫法一致，這里不再贅述

script 內容

<script>
// 引入了外部的驗證規(guī)則
import { validateAccountNumber } from "@/utils/validate";
 
// 判斷銀行卡賬戶是否正確
const validatorAccountNumber = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("請輸入賬戶信息"));
  } else {
    if (validateAccountNumber(value)) {
      callback();
    } else {
      return callback(new Error('賬號格式不正確'))
    }
  }
};
 
export default {
    data() {
        return {
            // 省略別的數(shù)據(jù)定義
            ...
        
            // 表單驗證
            formRules: {
                accountNumber: [
                    {required: true,validator: validatorAccountNumber,trigger: "blur"}
                ]
            }
        }
    }
}
</script>

import：先引入了外部的驗證規(guī)則
const：定義一個規(guī)則常量，常量名可變， '= (rule, value, callback) => {}' 為固定格式，value 入?yún)轵炞C的字段值
formRules -> accountNumber：表單驗證中使用 validator 指定自定義校驗規(guī)則常量名稱

validate.js

/* 銀行賬戶 */
export function validateAccountNumber(str) {
  const reg = /^([1-9]{1})(\d{14}|\d{18})$/
  return reg.test(str)
}

驗證規(guī)則

以上都是在失去焦點時的驗證，下面來分析一下如何在表單提交時驗證

1. 表單的提交按鈕

<!-- 表單 -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item>
        <el-button type="primary" @click="onSubmit('rulesForm')">保存</el-button>
        <el-button @click="cancel">取消</el-button>
    </el-form-item>
</el-form>

<el-button>：按鈕
<el-button> -> type：按鈕類型
<el-button> -> @click：按鈕點擊時觸發(fā)的事件，這里注意方法的入?yún)?'rulesForm'，這里要與 <el-form> 表單的 rel 屬性值一致

2. methods 方法

methods: {
    // 保存
    onSubmit(formName) {
        this.$refs[formName].validate(valid => {
            if (valid) {
                console.log("success submit!!");
            }else{
                console.log("error submit!!");
            }
        });
    },
    // 取消
    cancel() {
        
    }
}

this.$refs[formName].validate：formName 就是傳入的 'rulesForm'，與 <el-form> 表單的 rel 屬性值一致，這樣就指定好需要驗證的表單了

完整示例代碼如下

1. rules.vue

<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="表單" name="rulesPane" @tab-click="handleClick">
        <!-- 表單 -->
        <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
          <el-form-item label="用戶名稱:" prop="userName">
            <el-input v-model="rulesForm.userName" style="width:300px" maxlength="50"/>
          </el-form-item>
          <el-form-item label="銀行名稱:" prop="accountName" :rules="[{required:true,message:'請輸入銀行名稱',trigger:'blur'}]">
            <el-input v-model="rulesForm.accountName" style="width:300px" maxlength="50"/>
          </el-form-item>
          <el-form-item label="銀行卡號:" prop="accountNumber">
            <el-input v-model="rulesForm.accountNumber" style="width:300px" maxlength="50"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('rulesForm')">保存</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
 
<script>
import { validateAccountNumber } from "@/utils/validate";
 
// 判斷銀行卡賬戶是否正確
const validatorAccountNumber = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("請輸入賬戶信息"));
  } else {
    if (validateAccountNumber(value)) {
      callback();
    } else {
      return callback(new Error('賬號格式不正確'))
    }
  }
};
 
export default {
  name: "rules",
  data() {
    return {
      activeName: "rulesPane",
      defaultProps: {
        children: "children",
        label: "label"
      },
      rulesForm: {
      },
      //   表單驗證
      formRules: {
        userName: [
          {
            required: true,
            message: "請輸入用戶名稱",
            trigger: "blur"
          }
        ],
        accountNumber: [
          {
            required: true,
            validator: validatorAccountNumber,
            trigger: "blur"
          }
        ],
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleClick(tab) {
      
    },
    // 取消
    cancel() {
      
    },
    // 保存
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log("success submit!!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
 
<style lang="scss">
</style>

2. validate.js

/* 銀行賬戶 */
export function validateAccountNumber(str) {
  const reg = /^([1-9]{1})(\d{14}|\d{18})$/
  return reg.test(str)
}

效果圖

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue中的v-cloak使用解讀
本篇文章主要介紹了Vue中的v-cloak使用解讀，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
解決vue項目中前后端交互的跨域問題、nginx代理配置方式
這篇文章主要介紹了解決vue項目中前后端交互的跨域問題、nginx代理配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue項目總結之文件夾結構配置詳解
這篇文章主要給大家總結介紹了關于vue項目之文件夾結構配置的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
2017-12-12
使用vue3+vite導入圖片路徑錯亂問題排查及解決
使用vue3+vite開發(fā)的時候,導入svg圖片時,同一個文件夾下的文件,其中一個路徑正常解析,另一個不行,更改文件名之后,該圖片文件就可以正常解析了,本文給大家介紹了使用vue3+vite導入圖片路徑錯亂問題排查及解決,需要的朋友可以參考下
2024-03-03
elementui的默認樣式修改方法
下面小編就為大家分享一篇elementui的默認樣式修改方法，具有很好的參考價值，希望對大家有所幫助，一起跟隨小編過來看看吧
2018-02-02
關于iview和elementUI組件樣式覆蓋無效問題及解決
這篇文章主要介紹了關于iview和elementUI組件樣式覆蓋無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue點擊在彈窗外部實現(xiàn)一鍵關閉的示例代碼
在Vue應用中,彈窗是一個常見的交互元素,有時我們可能希望用戶點擊彈窗外部時,彈窗能夠自動關閉,本文主要介紹了Vue點擊在彈窗外部實現(xiàn)一鍵關閉的示例代碼,感興趣的可以了解一下
2024-06-06
詳解vue-cli 腳手架項目-package.json
本篇文章主要介紹了詳解vue-cli 腳手架項目-package.json，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
Vue如何使用CSS自定義變量
這篇文章主要介紹了Vue如何使用CSS自定義變量，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下
2021-05-05
vue3數(shù)據(jù)更新而視圖未更新問題解決
本文主要介紹了vue3?解決數(shù)據(jù)更新而視圖未更新問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-10-10