vue實(shí)現(xiàn)表單驗(yàn)證功能
更新時(shí)間：2021年08月27日 10:53:02 作者：Eva_伊娃
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表單驗(yàn)證功能，基于NUXT的validate方法實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本篇主要講述如何基于NUXT的validate方法實(shí)現(xiàn)表單的驗(yàn)證。
將驗(yàn)證方法封裝后，使用的時(shí)候只需像:rules="filter_rules({required:true,type:'mobile'})"這么一行代碼便可在頁面中實(shí)現(xiàn)驗(yàn)證了。
首先看一下實(shí)現(xiàn)效果
一、新建一個(gè)validate.js文件：
該文檔中放所需的一些驗(yàn)證規(guī)則，下面直接看代碼：
/**
* Created by jiachenpan on 16/11/18.
**/
export function isvalidUsername (str) {
const valid_map = ['admin', 'editor']
return valid_map.indexOf(str.trim()) >= 0
}
// 非負(fù)數(shù)
export function noFuNumber (str) {
const reg = /^\d+(\.{0,1}\d+){0,0}$/
return reg.test(str)
}
// 手機(jī)號
export function isvalidMobile (str) {
const reg = /^1(3|4|5|7|8)\d{9}$/
return reg.test(str)
}
// 中文、英文、數(shù)字
export function regexn (str) {
const reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/
return reg.test(str)
}
/* 合法uri */
export function validateURL (textval) {
const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return urlregex.test(textval)
}
/* 小寫字母 */
export function validateLowerCase (str) {
const reg = /^[a-z]+$/
return reg.test(str)
}
/* 大寫字母 */
export function validateUpperCase (str) {
const reg = /^[A-Z]+$/
return reg.test(str)
}
/* 大小寫字母 */
export function validateAlphabets (str) {
const reg = /^[A-Za-z]+$/
return reg.test(str)
}
/**
* validate email
* @param email
* @returns {boolean}
*/
二、新建filter_rules.js文件：
該文檔放驗(yàn)證的回調(diào)函數(shù)和驗(yàn)證字段。
附代碼：
import { isvalidMobile, regexn, noFuNumber } from '@/utils/validate'
export default {
install (Vue) {
/**
* 注意: 定義type 規(guī)則時(shí) 不用做非空驗(yàn)證
* 只需要傳入 required:true 即可
* */
/* 驗(yàn)證非負(fù)數(shù) */
const isnoFuNumber = (rule, value, callback) => {
if (value != null && value !== '') {
if (!noFuNumber(value)) {
callback(new Error('請輸入非負(fù)數(shù)的數(shù)字!'))
} else {
callback()
}
} else {
callback()
}
}
/* 驗(yàn)證手機(jī)號 */
const isvalidateMobile = (rule, value, callback) => {
if (value != null && value !== '') {
if (!isvalidMobile(value)) {
callback(new Error('請輸入正確的手機(jī)號碼!'))
} else {
callback()
}
} else {
callback()
}
}
/* 含有非法字符(只能輸入中文、英文、數(shù)字) */
const isvalidateRegexn = (rule, value, callback) => {
if (value != null && value !== '') {
if (!regexn(value)) {
callback(new Error('含有非法字符(只能輸入中文、英文、數(shù)字)!'))
} else {
callback()
}
} else {
callback()
}
}
/* 請輸入正整數(shù) */
// const isvalidateInteger= (rule, value, callback) => {
// if (value != null && value != "") {
// if (!integer(value)) {
// callback(new Error('請輸入正整數(shù)!'))
// } else {
// callback()
// }
// }
// else {
// callback();
// }
// }
/**
* 參數(shù) item
* required true 必填項(xiàng)
* maxLength 字符串的最大長度
* min 和 max 必須同時(shí)給 min < max type=number
* type 手機(jī)號 mobile
* 郵箱 email
* 網(wǎng)址 url
* 各種自定義類型 定義在 src/utils/validate 中 持續(xù)添加中.......
* */
Vue.prototype.filter_rules = function (item) {
let rules = []
if (item.required) {
rules.push({ required: true, message: '該輸入項(xiàng)為必填項(xiàng)!', trigger: 'blur' })
}
if (item.maxLength) {
rules.push({ min: 1, max: item.maxLength, message: '最多輸入' + item.maxLength + '個(gè)字符!', trigger: 'blur' })
}
if (item.min && item.max) {
rules.push({ min: item.min, max: item.max, message: '字符長度在' + item.min + '至' + item.max + '之間!', trigger: 'blur' })
}
if (item.type) {
let type = item.type
switch (type) {
// case 'email':
// rules.push({ type: 'email', message: '請輸入正確的郵箱地址', trigger: 'blur,change' })
// break isnoFuNumber
case 'activeOrder':
rules.push({ validator: isnoFuNumber, trigger: 'blur' })
break
case 'mobile':
rules.push({ validator: isvalidateMobile, trigger: 'blur' })
break
case 'name':
rules.push({ validator: isvalidateRegexn, message: '請輸入正確的用戶姓名', trigger: 'blur' })
break
case 'password':
rules.push({ validator: isvalidateRegexn, message: '請輸入密碼', trigger: 'blur' })
break
case 'org_name':
rules.push({ validator: isvalidateRegexn, message: '機(jī)構(gòu)名稱不能包含特殊字符', trigger: 'blur' })
break
default:
rules.push({})
break
}
}
return rules
}
}
}
三、在頁面中引入：
import Validate from '@/utils/filter_rules'
四、在頁面中使用驗(yàn)證：
需將驗(yàn)證規(guī)則寫在el-form-item標(biāo)簽內(nèi)。
需要注意的是：
這三個(gè)地方的名稱要書寫一致。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue部署到線上為啥會(huì)出現(xiàn)404的原因分析及解決
這篇文章主要介紹了vue部署到線上為啥會(huì)出現(xiàn)404的原因分析及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
Vue.js樣式動(dòng)態(tài)綁定實(shí)現(xiàn)小結(jié)
這篇文章主要介紹了Vue.js樣式動(dòng)態(tài)綁定實(shí)現(xiàn)小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
vue中使用router全局守衛(wèi)實(shí)現(xiàn)頁面攔截的示例
這篇文章主要介紹了vue中使用router全局守衛(wèi)實(shí)現(xiàn)頁面攔截的示例，幫助大家維護(hù)自己的項(xiàng)目，感興趣的朋友可以了解下2020-10-10
vue3+element Plus實(shí)現(xiàn)在table中增加一條表單數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue3+element Plus實(shí)現(xiàn)在table中增加一條表單數(shù)據(jù)的操作,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
使用Vue封裝一個(gè)可隨時(shí)暫停啟動(dòng)無需擔(dān)心副作用的定時(shí)器
這篇文章主要為大家詳細(xì)介紹了如何使用Vue封裝一個(gè)可隨時(shí)暫停啟動(dòng)無需擔(dān)心副作用的定時(shí)器,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
今天封裝一個(gè)導(dǎo)航欄的組件,使用的Element的NavMenu組件。遇到一個(gè)問題，本文主要介紹了Element el-menu中NavMenu的用法，感興趣的可以了解一下2023-04-04
今天小編就為大家分享一篇vue data引入本地圖片的兩種方式小結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
ElementUI?$notify通知方法中渲染自定義組件實(shí)現(xiàn)
這篇文章主要為大家介紹了ElementUI?$notify通知方法中渲染自定義組件實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vuerouter的beforeEach與afterEach鉤子函數(shù)的區(qū)別
本文詳細(xì)的介紹了Vuerouter的beforeEach與afterEach鉤子函數(shù)的區(qū)別和使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
優(yōu)化Vue項(xiàng)目編譯文件大小的方法步驟
這篇文章主要介紹了優(yōu)化Vue項(xiàng)目編譯文件大小的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05