vux接口请求案例 验证（手机号码，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"                                             οninput='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();