使用vue进行表单数据验证
使用vue完成手机号码的验证,效果如下
html代码
<div id="app">
<h2 style="margin-top: 80px;">手机号验证</h2>
<input v-model="input" type="text"/>
<!-- 当正则验证不通过时就显示span标签 -->
<span v-show="!input_reg&&input!=''" style="color: red;">手机号格式错误</span>
<button @click="conf">确认</button>
</div>
vue部分
<script>
var app=new Vue({
el:'#app',
data:{
input:'',
input_reg:false
},
methods:{
conf(){
if(this.input_reg)
{
alert('ok')
}
else
{
alert('error')
}
}
}
})
//监听input对象,并进行手机号的验证
app.$watch('input',function(newObj,oldObj){
app.input_reg=/^([1]\d{10}|([\(（]?0[0-9]{2,3}[）\)]?[-]?)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?)$/.test(newObj)
})
</script>
