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);
        }
    },

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

Codepen Example

谢谢

Answer 1

这很简单：

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

Answer 2

f => !f ? true : this.regexMatchesText('facebook', f) || 'Enter a valid facebook url'

Answer 3

这可能与原始人无关，但是... 这是我如何使它起作用的方法：

Damien Spivak非常接近。 ***重要的部分是包装 ( blah blah ) || 'error message str' f => (!f ? true : this.regexMatchesText('facebook', f)) || 'Enter a valid facebook url'

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

3 个答案: