uni-app登录表单简单验证demo

简单表单验证

html部分

<template>
    <view class='login'>
        
        <swiper vertical='true' style="height: 100vh;">
            <swiper-item>
                <scroll-view>
                    <view class='login-tel'>
                        <view class='tel-main'>
                            <view class='close' @tap='goBack'>
                                <image class='close-img' src="../../static/img/close.png" mode="">image>
                            view>
                            <view class='logo'>
                                <image class='logo-img' src="../../static/img/logo.jpg" mode="">image>
                            view>
                            <view class='tel'>手机号注册view>
                            <LoginOther>LoginOther>
                            <view class='login-go'>
                                <view>已有账号，去登录view>
                                <image src="../../static/img/down.png" mode="">image>
                            view>
                        view>
                    view>
                scroll-view>
            swiper-item>
            <swiper-item>
                <scroll-view scroll-y="true" >
                    <view class='login-tel'>
                        <view class='tel-main'>
                            <view class='close close-center'>
                                <view @tap="goBack">
                                    <image class='close-img' src="../../static/img/close.png" mode="">image>
                                view>
                                <view class='login-go'>
                                    <image class='close-img' src="../../static/img/up.png" mode="">image>
                                    <view>没有账号，去注册view>
                                view>
                                <view>view>
                            view>
                            <view class='login-from'>
                                <view class='login-user'>
                                    <text class='user-text'>账号text>
                                    <input type="text" v-model="userName" value="" placeholder="请输入手机号/昵称"/>
                                view>
                                <view class='login-user'>
                                    <text class='user-text'>密码text>
                                    <input type="text" v-model="userPwd" value="" placeholder="6-16位字符"/>
                                view>
                            view>
                            <view class='login-quick'>
                                <view>忘记密码?view>
                                <view>免密登录view>
                            view>
                            <view class='tel' @tap='submit'>登录view>
                            <view class='reminder'>温馨提示：您可以选择免密登录，更加方便view>
                            <LoginOther>LoginOther>
                        view>
                    view>
                scroll-view>
            swiper-item>
        swiper>
        
    view>
template>

import LoginOther from '@/components/login/login-other.vue'
    export default {
        data() {
            return {
                //用户输入的内容
                userName:"",
                userPwd:"",
                //验证的规则
                rules:{
                    userName:{
                        rule:/\S/,
                        msg:"账号不能为空"
                    },
                    userPwd:{
                        rule:/^[0-9a-zA-Z]{6,16}$/,
                        msg:"密码应该为6-16位"
                    }
                }
            }
        },
        components:{
            LoginOther
        },
        methods: {
            //关闭当前页面   返回上一页
            goBack(){
                uni.navigateBack({
                    delta:1
                })
            },
            //点击登录
            submit(){
                if(!this.validate('userName')) return;
                if(!this.validate("userPwd"))  return;
                uni.showLoading({
                    title:"登录中..."
                });
                setTimeout(()=>{
                    //隐藏登录状态
                    uni.hideLoading();
                    uni.navigateBack({
                        delta:1
                    })
                },2000)
            },
            //判断验证是否符合要求
            validate(key){
                let bool=true;
                if(!this.rules[key].rule.test(this[key])){
                    //提示信息
                    uni.showToast({
                        title:this.rules[key].msg,
                    })
                    //取反
                    bool=false;
                    return false;
                }
                return bool;
            }
        }
    }