tab切换表单填写，提交前的验证，demo只是简单示例，可以按需展开。
阻止了表单的默认事件后即使验证通过也无法提交，需要用Vue或JQ的方法手动让其提交。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue form</title> <script src="../js/vue.min.js"></script> <style type="text/css"> li {list-style: none} .nav li {float: left;border: 1px solid purple; height: 30px;width: 100px; text-align: center; vertical-align: middle;line-height: 30px;} .clear {clear: both;} .active {background: pink} </style> </head> <body> <div id="app"> <form action="#" ref="refForm" @submit.prevent="onSubmit" id="form"> <!--阻止默认提交事件--> <ul class="nav"> <li @click="showId=1" :class="showId==1 ? 'active' : ''">基本信息</li> <li @click="showId=2" :class="showId==2 ? 'active' : ''">附加信息</li> </ul><br> <div class="clear"></div> <div v-show="showId==1"> <!-- 输入框 --> 姓名： <input v-model.lazy.trim="name" placeholder="请输入姓名">姓名是 <span>{{ name }}</span><br> <p>年龄： <input v-model.number="age" type="number" name=""></p> 简介： <textarea v-model.trim="content" placeholder="多行输入……"></textarea><br> </div> <div v-show="showId==2"> <!-- 复选框 --> <input type="checkbox" v-model="checked" name="">值：{{ checked }}<br> <p>多个复选框:</p> <input type="checkbox" v-model="checkNum" value="BMW">BMW <input type="checkbox" v-model="checkNum" value="FORD">FORD <input type="checkbox" v-model="checkNum" value="LINCON">LINCON <p>选择的是：{{ checkNum }}</p> <!-- 单选按钮 --> <p>单选按钮：</p> <input type="radio" v-model="radio" value="yes" name="">是 <input type="radio" v-model="radio" value="no" name="">否 <p>选择的是：{{ radio }}</p> <p>下拉框</p> <select v-model="select"> <option value="">选择车系</option> <option value="BMW">BMW</option> <option value="BUICK">BUICK</option> <option value="FORD">FORD</option> </select> <p>选择的是：{{ select }}</p> </div> <p><button type="submit">提交</button></p> </form> </div> </body> </html> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ checked:false, name:'', age:25, content:'', checkNum:[], radio:'yes', select:'', showId:1, }, methods:{ onSubmit(){ if (!this.name) { alert('请输入姓名');return false; } if (!this.content) { alert('请输入简介');return false; } if (!this.select) { alert('请选择车系');return false; } 验证后提交，有两种方法 // document.getElementById('form').submit(); this.$refs.refForm.submit(); } } }) </script>
