vue驗證（手機號碼，name,手機版本號）
<template> <div class="box"> <header> <div><img src="./img/index_bg1.jpg"/></div> <div><img src="./img/index_bg2.jpg"/></div> <div class="out_con"> <div class="content"> <h3>21-55週歲均可申請</h3> <div class="place"> <span><img src="./img/name_inbg.png"/></span> <input type="text" placeholder="請輸入您的姓名" v-model="name"/> </div> <div class="place"> <span><img src="./img/phone_inbg.png"/></span> <input type="tel" placeholder="請輸入您的手機號" v-model="phone" oninput='if(value.length>11)value=value.slice(0,11)'/> </div> <div> <input type="checkbox"/> <span>同意智借《使用者註冊協議》</span> </div> <x-button @click.native="tip('middle')" type="button">提交</x-button> <toast v-model="showPositionValue" type="text" :time="1000" is-show-mask :position="position">請輸入您的姓名</toast> <toast v-model="showPositionValue1" type="text" :time="1000" is-show-mask :position="position">請輸入您的手機號</toast> <toast v-model="showPositionValue2" type="text" :time="1000" is-show-mask :position="position">請輸入正確格式的手機號</toast> <toast v-model="showPositionValue3" type="text" :time="1000" is-show-mask :position="position">提交成功，請稍等</toast> <toast v-model="showPositionValue4" type="text" :time="1000" is-show-mask :position="position">您的姓名書寫有誤</toast> </div> </div> </header> <section> <div> <div class="pic"> <img src="./img/part_tit1.png"/> </div> <ul class="list"> <li> <img src="./img/youdian1.png"/> <p>免抵押免擔保</p> <p>最高可貸<span>30萬</span></p> </li> <li> <img src="./img/youdian2.png"/> <p>免抵押免擔保</p> <p>最高可貸<span>30萬</span></p> </li> <li> <img src="./img/youdian3.png"/> <p>免抵押免擔保</p> <p>最高可貸<span>30萬</span></p> </li> </ul> </div> <div> <div class="pic"> <img src="./img/part_tit1.png"/> </div> <ul class="list"> <li> <img src="./img/shihe1.jpg"/> <p>免抵押免擔保</p> <p>最高可貸<span>30萬</span></p> </li> <li> <img src="./img/shihe2.jpg"/> <p>免抵押免擔保</p> <p>最高可貸<span>30萬</span></p> </li> <li> <img src="./img/shihe3.jpg"/> <p>免抵押免擔保</p> <p>最高可貸<span>30萬</span></p> </li> </ul> </div> </section> <footer> <img src="./img/tuijian.png" alt="" /> <div>©智借</div> </footer> </div> </template> <script> import { Checker, CheckerItem , XButton ,Toast} from 'vux' import MD5 from 'js-md5' export default{ name:'Zhijie', components: { Checker, CheckerItem, XButton, Toast }, data(){ return{ phone:"", name:"", position:"default", showPositionValue:false, showPositionValue1:false, showPositionValue2:false, showPositionValue3:false, showPositionValue4:false, parameter:this.$store.state.parameter, salt:this.$store.state.salt } }, methods:{ tip(position){ if(this.name==""){ this.position= position this.showPositionValue=true return false } //名字只能未漢字 最少兩位 最多20 if(!/^[\u4E00-\u9FA5]{2,20}$/.test(this.name)){ this.position =position this.showPositionValue4=true return false } if(this.phone==""){ this.position= position this.showPositionValue1=true return false } if(!/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(14[5,7]{1})|(17[0,1,3,6,7,8]))+\d{8})$/.test( this.phone ) && !/(?:(?:0(?=1)|1(?=2)|2(?=3)|3(?=4)|4(?=5)|5(?=6)|6(?=7)|7(?=8)|8(?=9)){5}|(?:9(?=8)|8(?=7)|7(?=6)|6(?=5)|5(?=4)|4(?=3)|3(?=2)|2(?=1)|1(?=0)){5})\d/.test( this.phone ) ){ this.position= position this.showPositionValue2=true return false }else{ this.position= position this.showPositionValue3=true let params = this.parameter var agent = navigator.userAgent.toLowerCase(); //獲取手機使用者資訊 params.apiKey = "wisdom.netmoney.index.kx.registeredBasic" let data = Object.assign( { userAgent : agent, name : this.name, mobile : this.phone, cid : this.$route.query.c ? this.$route.query.c : "", sid : this.$route.query.s ? this.$route.query.s : "" } ) params.data = JSON.stringify(data) params.sign = MD5(params.apiKey + '' + params.data + this.salt) this.http.post(BASE_URL,params).then(data=>{ console.log(data) if(data.code == 'success'){ this.$router.push("/components/component_b") } }).catch(err=>{ console.log(err) }) } } } } </script>
裡面是自己的專案 可能看起來比較繁瑣
核心程式碼：
名字的驗證：
<div class="place"> <span><img src="./img/name_inbg.png"/></span> <input type="text" placeholder="請輸入您的姓名" v-model="name"/> </div> <div class="place"> <span><img src="./img/phone_inbg.png"/></span> <input type="tel" placeholder="請輸入您的手機號" v-model="phone" oninput='if(value.length>11)value=value.slice(0,11)'/> </div>
if(this.name==""){ } if(!/^[\u4E00-\u9FA5]{2,20}$/.test(this.name)){ }
手機號的驗證
if(!/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(14[5,7]{1})|(17[0,1,3,6,7,8]))+\d{8})$/.test( this.phone ) && !/(?:(?:0(?=1)|1(?=2)|2(?=3)|3(?=4)|4(?=5)|5(?=6)|6(?=7)|7(?=8)|8(?=9)){5}|(?:9(?=8)|8(?=7)|7(?=6)|6(?=5)|5(?=4)|4(? =3)|3(?=2)|2(?=1)|1(?=0)){5})\d/.test( this.phone ) ){ }
獲取手機使用者資訊
var agent = navigator.userAgent.toLowerCase();