仅当数据存在时如何验证文本字段？

Question

我有一个text-field接受 facebook URL 的程序。用户可以将其留空或输入一个值。如何使用 Vuetify 验证来实现这一目标？

模板

 <div>            
        <v-text-field outline                      
                      v-model="socialMediaAccounts.facebook"
                      :rules="facebookUrlRules"
                      append-icon="fa-facebook"></v-text-field>          
 </div>

脚本

data() {
        return {                
            facebookUrlRules: [
                f => this.regexMatchesText('facebook', f) || 'Enter a valid facebook url'
            ]
        }
    },

methods: {
        regexMatchesText(socialMedium, url) {
            let regEx = {
                facebook: /(?:(?:http|https):\/\/)?(?:www.)?facebook.com\/(?:(?:\w)*#!\/)?(?:pages\/)?([\w\-]*)?/

            };
            let checker = new RegExp(regEx[socialMedium]);
            return checker.test(url);
        }
    },

该代码正在检查有效的网址，但如果我将文本字段留空，也会显示错误消息。有什么方法可以检查有效条目或空白吗？

Codepen 示例

谢谢

Answer 1

这很简单：

gstRules: [n => !n || this.regexMatchesTextGst(n) || 'Invalid gst format'],