在寫業務代碼時,會遇到各種需要對使用者輸入的資料進行校驗的場景,最常見的就是表單驗證,各種非空校驗,正則校驗等等
這裡我就分享下在項目中是如何封裝使用的
1. 屬性介紹
參數 | 說明 | 類型 | 可選值 | 預設值 |
---|---|---|---|---|
model | 表單資料對象 | object | — | — |
rules | 表單驗證規則 | object | — | — |
2. 主元件index.vue
<template>
<el-form ref="drawerRef" :model="formModel" :rules="drawerRule" class="drawer-form">
<el-form-item label="姓名" prop="mobile">
<el-input v-model.trim="formModel.mobile" size="small" maxlength="11" placeholder="請輸入手機号" clearable></el-input>
</el-form-item>
</el-form>
<div class="flex flex-center-center drawer-bottom">
<el-button type="text" @click="cancel">取消</el-button>
<el-button type="primary" @click="submit">儲存</el-button>
</div>
</template>
<script >
import {Component, Vue, Prop, Watch} from 'vue-property-decorator'
import { checkPhone } from '@/utils/validate'
@Component({
name: 'xxxx',
})
export default class extends Vue {
private formModel: any = {
mobile: ''
}
private drawerRule: any = {
mobile: [
{ required: true, validator: checkPhone, trigger: 'blur' },
]
}
private cancel() {
(this.$refs.drawerRef as any).resetFields()
}
private submit() {
(this.$refs.drawerRef as any).validate(async(valid: boolean) => {
if (valid) {
// 業務代碼
} else {
return false;
}
})
}
</script>
3.validate.ts
// 手機号
export const checkPhone = ( rule: any, value: any, callback: any) => {
const phoneReg = /^(?:13\d|14\d|15\d|16\d|17\d|18\d|19\d)\d{5}(\d{3}|\*{3})$/
const numReg = /^[0-9]+$/
const englishNmae = rule.field
const required = rule.required // 必填
let chineseName;
switch (englishNmae) {
case 'mobile':
chineseName = '手機号碼'
break;
default:
}
if (!value && required) {
return callback(new Error(`請輸入${chineseName}`))
} else if (!numReg.test(value) && required ) {
callback(new Error(`${chineseName}必須為數字`))
} else if (!phoneReg.test(value) && required ) {
callback(new Error(`請輸入正确的${chineseName}格式`))
} else {
callback()
}
}
一次封裝,全局使用,幹淨又友善