Vue中常用的rules校驗規(guī)則的實現
更新時間：2023年10月09日 11:36:31 作者：你鄰座的怪同學
在vue開發(fā)中,難免遇到各種表單校驗,本文主要介紹了Vue中常用的rules校驗規(guī)則的實現,具有一定的參考價值,感興趣的可以了解一下
vue的rules中自帶的校驗規(guī)則和常用正則表達式校驗
rules: {
//驗證非空和長度
name: [{
required: true,
message: "站點名稱不能為空",
trigger: "blur"
},{
min: 3,
max: 5,
message: '長度在 3 到 5 個字符',
trigger: 'blur'
}],
//驗證數值
age: [{
type: 'number',
message: '年齡必須為數字值',
trigger: "blur"
}],
//驗證日期
birthday:[{
type: 'date',
required: true,
message: '請選擇日期',
trigger: 'change'
}],
//驗證多選
habit: [{
type: 'array',
required: true,
message: '請至少選擇一個愛好',
trigger: 'change'
}],
//驗證郵箱
email: [{
type: 'email',
message: '請輸入正確的郵箱地址',
trigger: ['blur', 'change']
}],
// 驗證手機號
telephone: [{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "請輸入正確的手機號碼",
trigger: "blur"
}],
// 驗證經度 整數部分為0-180小數部分為0到7位
longitude: [{
pattern: /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,7})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/,
message: "整數部分為0-180,小數部分為0到7位",
trigger: "blur"
}],
// 驗證維度 整數部分為0-90小數部分為0到7位
latitude: [{
pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/,
message: "整數部分為0-90,小數部分為0到7位",
trigger: "blur"
}]
}vue的rules中自定義校驗規(guī)則
<script>
import { checkParam } from "@/api/system/param.js";
export default {
name: "Param",
data() {
var validateCode = (rule, value, callback) => {
if (value === '') {} else {
if (value !== '') {
const param = {
id: this.form.id,
code: this.form.code
}
checkParam(param).then(response => {
if (!response.data) {
callback(new Error(response.msg));
} else {
callback();
}
});
}
}
};
return {
// 表單校驗
rules: {
code: [{
required: true,
message: "參數編碼不能為空",
trigger: "blur"
}, {
max: 50,
message: '參數編碼在 50 個字以內',
trigger: 'blur'
}, {
validator: validateCode,
trigger: 'blur'
}]
}
};
},
created() {
},
methods: {
}
};
</script>使用方法
age: [{ validator: this.formValidate.validateIngeterGTZRule, tigger: 'blur' }]校驗工具類
import validator from 'validator'
/* 表單校驗規(guī)則方法命名以Rule為結尾，方便和一遍的校驗區(qū)分*/
export default {
validateNumberRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
if (!validator.isNumeric('' + value)) {
callback(new Error('請輸入數字'))
} else {
callback()
}
},
validateNumberGTZRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
if (validator.isNumeric('' + value, [{ no_symbols: false }]) && value > 0) {
callback()
} else {
callback(new Error('請輸入正數'))
}
},
validateIntegerRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
if (!validator.isInt('' + value)) {
callback(new Error('請輸入整數'))
} else {
callback()
}
},
validateIngeterGTZRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
if (!validator.isInt('' + value, { gt: 0 })) {
callback(new Error('請輸入正整數'))
} else {
callback()
}
},
validateAlphaRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
if (!validator.isAlpha(value, 'en-US')) {
callback(new Error('請輸入純字母'))
} else {
callback()
}
},
/* 是否身份證號碼*/
validateIdNoRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
if (value === '' || value === undefined || value === null) {
callback()
} else {
if ((!reg.test(value)) && value !== '') {
callback(new Error('請輸入正確的身份證號碼'))
} else {
callback()
}
}
},
/* 是否身份證號碼,詳細規(guī)則校驗*/
validateIdNoStrictRule(rule, code, callback) {
if (code === undefined || code === null || code === '') {
callback()
}
const city = {
11: '北京',
12: '天津',
13: '河北',
14: '山西',
15: '內蒙古',
21: '遼寧',
22: '吉林',
23: '黑龍江 ',
31: '上海',
32: '江蘇',
33: '浙江',
34: '安徽',
35: '福建',
36: '江西',
37: '山東',
41: '河南',
42: '湖北 ',
43: '湖南',
44: '廣東',
45: '廣西',
46: '海南',
50: '重慶',
51: '四川',
52: '貴州',
53: '云南',
54: '西藏 ',
61: '陜西',
62: '甘肅',
63: '青海',
64: '寧夏',
65: '新疆',
71: '臺灣',
81: '香港',
82: '澳門',
91: '國外 '
}
let tip = ''
let pass = true
if (!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)) {
tip = '身份證號格式錯誤'
pass = false
} else if (!city[code.substr(0, 2)]) {
tip = '地址編碼錯誤'
pass = false
} else {
// 18位身份證需要驗證最后一位校驗位
if (code.length === 18) {
code = code.split('')
// ∑(ai×Wi)(mod 11)
// 加權因子
const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
// 校驗位
const parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
let sum = 0
let ai = 0
let wi = 0
for (let i = 0; i < 17; i++) {
ai = code[i]
wi = factor[i]
sum += ai * wi
}
if (parity[sum % 11] !== code[17]) {
tip = '校驗位錯誤'
pass = false
}
}
}
if (!pass) {
callback(new Error(tip))
} else {
callback()
}
// if (!pass) alert(tip)
// return pass
},
validateURLRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
if (!validator.isURL(value)) {
callback(new Error('請輸入正確的網址'))
} else {
callback()
}
},
/* 是否郵箱*/
validateEMailRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
const reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
if (value === '' || value === undefined || value === null) {
callback()
} else {
if (!reg.test(value)) {
callback(new Error('請輸入正確的郵箱地址'))
} else {
callback()
}
}
},
/* 是否手機號碼*/
validateMobileRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
if (value === '' || value === undefined || value === null) {
callback()
} else {
if ((!reg.test(value)) && value !== '') {
callback(new Error('請輸入正確的電話號碼'))
} else {
callback()
}
}
},
/* 是否手機號碼或者固話*/
validateTelOrMobileRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/
if (value === '' || value === undefined || value === null) {
callback()
} else {
if ((!reg.test(value)) && value !== '') {
callback(new Error('請輸入正確的電話號碼或者固話號碼'))
} else {
callback()
}
}
},
/* 是否固話*/
validateTelphoneRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
const reg = /0\d{2}-\d{7,8}/
if (value === '' || value === undefined || value === null) {
callback()
} else {
if ((!reg.test(value)) && value !== '') {
callback(new Error('請輸入正確的固話（格式：區(qū)號+號碼,如010-1234567）'))
} else {
callback()
}
}
},
/* 是否合法IP地址*/
validateIPRule(rule, value, callback) {
if (value === '' || value === undefined || value === null) {
callback()
} else {
const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
if ((!reg.test(value)) && value !== '') {
callback(new Error('請輸入正確的IP地址'))
} else {
callback()
}
}
}
}到此這篇關于Vue中常用的rules校驗規(guī)則的實現的文章就介紹到這了,更多相關Vue rules校驗規(guī)則內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue中使用mxgraph的方法實例代碼詳解,需要的朋友可以參考下2019-05-05
vue依賴包報錯問題eslint\lib\cli-engine\cli-engine.js:421
這篇文章主要介紹了vue依賴包報錯問題eslint\lib\cli-engine\cli-engine.js:421,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue中的Computed實現原理,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue實現動態(tài)顯示與隱藏底部導航的方法,結合實例形式分析了vue.js針對導航隱藏與顯示的路由配置、事件監(jiān)聽等相關操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了Vue 計數器的實現，主要利用HTML實現步驟現在頁面上簡單實現一個計數器，內容簡單且詳細,需要的朋友可以參考一下2021-10-10
今天小編就為大家分享一篇axios的攔截請求與響應方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue中axios的使用與封裝，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
下面小編就為大家分享一篇在vue中實現圖片和文件上傳的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本篇文章主要介紹了淺談Vue.js中ref ($refs)用法舉例總結，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
nextTick?是?Vue?提供的一個重要工具,它的作用主要體現在幫助我們更好地處理異步操作,下面就跟隨小編一起來探索一下nextTick的原理與實現吧2024-02-02