本篇主要講述如何基於NUXT的validate方法實現表單的驗證。

將驗證方法封裝後，使用的時候只需像:rules="filter_rules({required:true,type:'mobile'})"這麼一行程式碼便可在頁面中實現驗證了。

首先看一下實現效果

一、新建一個validate.檔案：

該文件中放所需的一些驗證規則，下面直接看程式碼：

/**
* Created by jiachenpan on 16/11/18.
**/
 
 
 
export function isvalidUsername (str) {
  const valid_map = ['admin','editor']
 return valid_map.indexOf(str.trim()) >= 0
 
}
 
// 非負數
export function noFuNumber (str) {
  const reg = /^\d+(\.{0,1}\d+){0,0}$/ 
 return reg.test(str)
 
}
 
// 手機號
export function isvalidMobile (str) { 
  const reg = /^1(3|4|5|7|8)\d{9}$/ 
 return reg.test(str)
 
}
 
// 中文、英文、數字 
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-z
 
A-Z]{2}))(:[0-9]+)*(\/($|[a-zwww.cppcns.comA-Z0-9.,?'\\+&%$#=~_-]+))*$/ 
return urlregex.test(textval)
 
}
  
 
/* 小寫字母 */ 
export function validateLowerCase (str) {
  const reg = /^[a-z]+$/
 return reg.test(str)
 
}
 
  
/* 大寫字母 */ 
export function validateUpperCase (str) { 
   http://www.cppcns.comconst 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檔案：

該文件放驗證的回撥函式和驗證欄位。

附程式碼：

import { isvalidMobile,regexn,noFuNumber } from '@/utils/validate' 
export default {
install () {
 
/**
* 注意: 定義type 規則時 不用做非空驗證
* 只需要傳入 required:true 即可
* */
 
/* 驗證非負數 */
 
const isnoFuNumber = (rule,value,callback) => { 
 if (value != null && value !== '') { 
 if (!noFuNumber(value)) { 
  callback(new Error('請輸入非負數的數字!')) 
 } else {
 
callback()
 
}
 
} else { 
callback()
 
}
 
}
 
/* 驗證手機號 */
const isvalidateMobile = (rule,callback) => { 
if (value != null && value !== '') {
if (!isvalidMobile(value)) {
callback(new Error('請輸入正確的手機號碼!'))
 
  } else {
callback()
}
 
   } else { 
callback()
 
}
 
}
 
/* 含有非法字元(只能輸入中文、英文、數字) */ 
const isvalidateRegexn = (rule,callback) => { 
if (value != null && value !== '') { 
if (!regexn(value)) { 
callback(new Error('含有非法字元(只能輸入中文、英文、數字)!'))
 
} else {
 
callback() 
}
 
} else { 
callback()
 
}
 
}
 
/* 請輸入正整數 */
 
// const isvalidateInteger= (rule,callback) => { 
// if (valueDtnJxCG
 
 != null && value != "") { 
// if (!integer(value)) { 
// callback(new Error('請輸入正整數!')) 
// } else { 
// callback() 
// } 
// } 
// else {
 
// callback(); 
// } 
// }
 
 
 
/**
* 引數 item
* required true 必填項
* maxLength 字串的最大長度
* min 和 max 必須同時給 min < max type=number
* type 手機號 mobile
* 郵箱 email
* 網址 url
* 各種自定義型別 定義在 src/utils/validate 中 持續新增中.......
* */
 
 
Vue.prototype.filter_rules = function (item) {
let rules = [] 
if (item.required) { 
rules.push({ required: true,message: '該輸入項為必填項!',trigger: 'blur' })
 
}
 
if (item.maxLength) {
rules.push({ min: 1,max: item.maxLength,message: '最多輸入' + item.maxLength + '個字元!',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: '機構名www.cppcns.com稱不能包含特殊字元',trigger: 'blur' }) 
break
 
 
default:
 
rules.push({})
 
break
 
}
 
}
 
 
return rules
 
}
 
}
 
}

三、在頁面中引入：

import Validate from '@/utils/filter_rules'

四、在頁面中使用驗證：

需將驗證規則寫在el-form-item標籤內。

需要注意的是：

這三個地方的名稱要書寫一致。

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