说明

输入电话号码，失去焦点时，校验格式，不正确给出警告信息

代码

css：

<style>
    .warn{
        color: red;
    }
</style>

html:

<div id="app">
    联系方式：<input type="text" v-model="phone" @blur="validatePhone">
    <span>{{phone_warn}}</span>
</div>

js：

<script>
    var app = new Vue({
        el: '#app', 
        data: { //数据
            phone:"",
            phone_warn:"", // 警告
        },
        methods:{
            validatePhone:function(){
                let reg=/^1[3-9][0-9]{9}$/
                let res = reg.test(this.phone)
                if( !res ){
                    this.phone_warn = "手机号格式错误，请重新填写！"
                }else{
                    this.phone_warn = ""
                }

            }
        }
    })
</script>

原文出处：/show_1IX3E3EdLunl.html