快捷導(dǎo)航

vue使用element ui自定義手機(jī)驗(yàn)證規(guī)則問(wèn)題

更新時(shí)間：2022年12月29日 10:09:47 作者：像夏天一樣熱

這篇文章主要介紹了vue使用element ui自定義手機(jī)驗(yàn)證規(guī)則問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用element ui自定義手機(jī)驗(yàn)證規(guī)則

1.表單的一項(xiàng)

? <el-form-item label="電話" prop="senderPhone">
? ? ? ? ?<el-input v-model="packageInfo.senderPhone"></el-input>
</el-form-item>

2.制定驗(yàn)證規(guī)則

 data() {
            var checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手機(jī)號(hào)不能為空'));
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                    console.log(reg.test(value));
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('請(qǐng)輸入正確的手機(jī)號(hào)'));
                    }
                }
            };
            return {
                
                packageInfo:{
                    senderName:'asdas',
                    senderPhone:'',
              
                },
                packageInfoRules:{
                    senderName:[
                        { required: true, message: '請(qǐng)輸入寄件人姓名', trigger: 'blur' },
                    ],
                    senderPhone:[

                        {required:true, validator:checkPhone, trigger: ['blur', 'change'] }

                    ]
                },

element-ui form組件自定義校驗(yàn)

<el-form-item
     label="活動(dòng)時(shí)間"
     prop="activityTime">
   <el-date-picker v-model={this.form.activityTime.startTime}/>
</el-form-item>

form表單內(nèi) 元素關(guān)聯(lián)值為對(duì)象關(guān)鍵字

data () {
? ? // 活動(dòng)時(shí)間校驗(yàn)
? ? const checkActivityTime = (rule, value, callback) => {
? ? ? if (!value.startTime) {
? ? ? ? callback('請(qǐng)選擇活動(dòng)開(kāi)始時(shí)間')
? ? ? } else if (!value.endTime) {
? ? ? ? callback('請(qǐng)選擇活動(dòng)結(jié)束時(shí)間')
? ? ? } else if (dayjs(value.endTime).isSameOrBefore(dayjs(value.startTime))) {
? ? ? ? callback('結(jié)束時(shí)間不得等于或晚于當(dāng)前開(kāi)始時(shí)間')
? ? ? } else if (dayjs().isAfter(dayjs(value.endTime))) {
? ? ? ? callback('結(jié)束時(shí)間不得晚于當(dāng)前時(shí)間')
? ? ? } else {
? ? ? ? callback()
? ? ? }
? ? }
?
? ? return {
? ? ? rules: {
? ? ? ? activityTime: [
? ? ? ? ? ? { required: true, validator: checkActivityTime, trigger: 'change'}
? ? ? ? ? ]
? ? ? }
? ? }
? },

自定義校驗(yàn)內(nèi)容可直接在data方法中定義

validator 傳入自定義校驗(yàn)回調(diào)參數(shù)