17--vue 登录页面 账号密码提交验证validator + 跳转方式

跳转方式：
this.$router.replace(’/schoolmanager’).catch(res => {})

this.$router.go(-1)

this.$router.back

常用的两种处理数据的方式：
one:

		const p1 = this.$refs.validator0.validate()
				p1.then(res => {
					if (this.valid) {
						sessionStorage.setItem('number', this.new_number)
						this.$router.go(-1)
					} else {

					}
				})

异步调用 promise 数组filter,map,every…
two:

	Promise.all([p1, p2]).then(res => {})

登录页面代码：>>>

<template>
	<div class="page">
		<div class="header">用户登录</div>
		<div class="row">
			<cube-select v-model="role"  :options="roles"></cube-select>
		</div>
		<div class="row">
			<cube-validator ref="validator0" v-model="valid" :model="tel" :rules="rules[0]">
				<cube-input v-model='tel' :placeholder="ph_tel" :messages="telmessages">
					<template v-slot:prepend>
						<i class="cubeic-person"></i>
					</template>
				</cube-input>
			</cube-validator>
		</div>
		<div class="row">
			<cube-validator ref="validator1" v-model="valid" :model="password" :rules="rules[1]">
				<cube-input v-model="password" :messages="pwmessages" :placeholder="ph_pw" :type="type" :maxlength="maxlength"
				 :autofocus="autofocus" :eye="eye">
					<template v-slot:prepend>
						<i class="cubeic-lock"></i>
					</template>
				</cube-input>
			</cube-validator>
		</div>
		<div class="row">
			<cube-button type="submit" @click="submit">登录</cube-button>
		</div>
		<div class="row">
			<span>没有账户，请先</span>
			<router-link :to="{name:'reg'}">注册</router-link>
		</div>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				roles: ['学生', '班级管理员', '学校管理员'],
				role: '学生',
				tel: '15032189999',
				password: '21223333',
				result: [undefined, undefined],
				valid: undefined,
				type: 'password',
				maxlength: 10,
				autofocus: true,
				eye: {
					open: true,
					reverse: false
				},
				rules: [{
						required: true,
						type: 'tel',
						min: 11
					},
					{
						required: true,
						type: 'password',
						min: 6,
						max: 10

					}
				],
				ph_tel: '请输入手机号',
				ph_pw: '请输入密码',
				telmessages: {
					required: '手机号不能为空'
				},
				pwmessages: {
					required: '密码不能为空'
				}
			}
		},
		methods: {
			submit: function() {
				const p1 = this.$refs.validator0.validate()
				const p2 = this.$refs.validator1.validate()
				// console.log(p1)
				// let r1=undefined
				// let r2=undefined
				// 异步调用 promise 数组filter,map,every........
				Promise.all([p1, p2]).then(res => {
					console.log(res)
					// var pass=res.every(function(item){
					// 	return item
					// })
					// es6箭头函数  var single=a=>a 普通函数 function single(a){	return a }					 
					var pass = res.every(item => item)
					console.log(pass)
					if (pass) {
						// 调用API
						let role = this.role
						if (role == '学生') {
							this.$router.replace('/student').catch(res => {})
						} else if (role == '班级管理员') {
							this.$router.replace('/classmanager').catch(res => {})
						} else if (role == '学校管理员') {
							this.$router.replace('/schoolmanager').catch(res => {})
						}
					} else {
						// 表示验证未通过
						this.$createToast({
							type: 'error',
							txt: '未通过',
							time: 1000
						}).show()
					}
				})
				// p1.then((res) => {
				// 	// console.log(res)
				// 	r2 = res
				// })
				// console.log(r1,r2)
			}
		}
	}
</script>



<style scoped>
	div,span,image{
		box-sizing: border-box;
	}
	.page {
		// padding: .5rem .3rem;
		position: relative;
		width: 100%;
		height: 100vh;
		padding: 10px 15px 0;
	}

	.page .row {
		margin: 10px 0;
	}
		.cube-input {
		padding: 1px 10px;
		font-size: .5rem;
	}
	.header {
		padding: 20px 0;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
	}
</style>

效果 ^ _ ^