Vue.js watch 示例代码，用于表单的校验

最新推荐文章于 2024-06-04 10:15:53 发布

碧山云游

最新推荐文章于 2024-06-04 10:15:53 发布

阅读量571

点赞数

分类专栏： Vue.js学习笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_41617901/article/details/121618977

版权

Vue.js学习笔记专栏收录该内容

21 篇文章 1 订阅

订阅专栏

该博客展示了如何在 Vue.js 中使用 v-model 和 watch 监听器来实现对输入手机号码的实时格式验证。当输入长度不为14位时，提示信息会显示"手机格式不正确"，否则提示信息清空。博客内容涵盖了 Vue 的数据绑定和事件监听，以及简单的前端表单验证技巧。

摘要由CSDN通过智能技术生成

代码如下：

<template>
 <div id="app">
  <div id = "computed_props">
         手机号 : <input type = "text" v-model = "phone"> <span>{{tip}}</span>
         
 </div>
</div>
</template>

<script>
export default {
  data () {
    return {
     phone : '',
     tip:''
    }
    
  },
  onload:{
       

   },
   watch : {
               phone:function(val) {
                 var  el=val.trim();
                 if(el.length!=14){
                    this.tip='手机格式不正确';
                 }
                 else{
                   this.tip=''
                 }

               }
              
     }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
/* 定义提示框的基础样式 */
    .msg{
      display:inline-block;
      width:160px;
      height:25px;
      border:1px solid #555;
      text-align:center;
      line-height:25px;
    }
    /* 定义提示框在验证通过时的样式 */
    .success{
      border:1px solid green;
      background-color:lightgreen;
      color:green
    }
    /* 定义提示框在验证失败时的样式 */
    .fail{
      border:1px solid red;
      background-color:pink;
      color:red
    }
</style>

效果如下：