uniapp学习系列二之登录验证

登录验证

简单验证

判空提示，密码圆点显示，固定账号密码

<template>
	<view class="login bg-gradual-green"><!-- 背景颜色bg-gradual-green渐变色 -->
		<view class="content bounceInDown">
			<!-- 头部logo -->
			<view class="header">
				<image src="../../common/logo.png"></image>
			</view>
			
			<view class="systemName">
				学习系统
			</view>
			
			<!-- 主体表单 -->
			<view class="main">
				<form>
					<view class="cu-form-group margin-top account">
						<view class="title"><text class="lg cuIcon-my"></text></view>
						<input class="inputText" placeholder="输入账户" name="codeNum" v-model="codeNum" ></input>
					</view>
					<!-- v-model是双向绑定值  密码输入框添加password后内容不可见-->
					<view class="cu-form-group margin-top account">
						<view class="title"><text class="lg cuIcon-lock"></text></view>
						<input class="inputText" placeholder="输入密码" password name="password" v-model="password" ></input>
					</view>
					<button class="cu-btn round lg btnlogin"  @click="Login()" >登 录</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeNum:'',
				password:''
			}
		},
		methods: {
			Login: function(){
				let that=this;
				
				if(that.codeNum == ''){
					uni.showToast({
						title: '请输入账户',
						icon: 'none',
						duration:1000
					});
					return false;
				}
				
				if(that.password == ''){
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
						duration:1000
					});
					return false;
				}
				
				if(that.codeNum == 'admin' && that.password == '123'){
					uni.navigateTo({
						url: '../index/index',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			}
		}
	}
</script>

复杂验证

调用接口判断账户密码

<script>
	export default {
		data() {
			return {
				codeNum:'',
				password:''
			}
		},
		methods: {
			Login: function(){
				let that=this;
				
				if(that.codeNum == ''){
					uni.showToast({
						title: '请输入账户',
						icon: 'none',
						duration:1000
					});
					return false;
				}
				
				if(that.password == ''){
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
						duration:1000
					});
					return false;
				}
				
				/* if(that.codeNum == 'admin' && that.password == '123'){
					uni.navigateTo({
						url: '../index/index',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} */
				uni.request({
					url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
					method:'POST',
					data: {
					    codeNum: that.codeNum,
						password: that.password
					},
					header: {
					    'content-type': 'application/json' //自定义请求头信息
					},
					success: (res) => {
					    // console.log(res.data);
					    uni.navigateTo({
					    	url: '../index/index',
					    	success: res => {},
					    	fail: () => {},
					    	complete: () => {}
					    });
					}
				});
			}
		}
	}
</script>