CKQ/pages/login/login.vue

<template>
	<div class="body">		
		<uni-forms ref="form" label-position="top" :rules="rules" :model="form">
			<uni-forms-item label="账号" name="account" clearable>
				<uni-easyinput v-model="form.account" placeholder="请输入账号"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="密码" name="password">
				<uni-easyinput v-model="form.password" type="password" placeholder="请输入密码"></uni-easyinput>
			</uni-forms-item>
		</uni-forms>	
		<button class="login-BT" type="default" @click="submit">登录</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				rules:{
					account:{
						rules:[
							{
								required: true,
								errorMessage: '请填写账号'
							}					
						],
						validateTrigger:'submit'
					},
					password:{
						rules:[
							{
								required: true,
								errorMessage: '请填写密码',
							},						
							{
								minLength: 3,
								maxLength: 6,
								errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
							},
						],
						validateTrigger:'submit'
					}					
				},
				form:{
					account:"",
					password:""
				}
			}
		},
		methods: {
			submit(){
				this.$refs.form.validate().then(res=>{
					console.log('表单数据信息：', res);
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.body{
	padding:224upx 90upx 0;
	.login-BT{
		margin-top:110upx;
		background: #8DA6FF;
		border-radius: 6px;
		color: #fff;
	}
}
</style>