vue学习记录（一）——登录表单校验

页面属于：vuejs + elementUi

贴上代码，参考：

<template>
  <div id="app">
    <el-form :rules="rules" ref="loginForm" :model="loginForm" 
    class="loginContainer"
    v-loading="loading"
    element-loading-text="正在登录……"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
        <h3 class="loginTitle">系统登录</h3>
        <el-form-item prop="username">
            <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名">

            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="code">
            <el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片更换验证码"
             style="width: 250px;margin-right: 5px"></el-input>
            <img :src="captchaUrl" @click="updateCaptcha">
        </el-form-item>
        <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
        <el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
    name: "Login",
    data(){
        return{
           loginForm:{
               username:'admin',
               password:'123',
               code:''
           } ,
           checked: true,
           loading:false,
           captchaUrl:'/captcha?time='+new Date(),
           rules:{
               username:[{required: true, message:'请输入用户名', trigger: 'blur'}],
               password:[{required: true, message:'请输入密码', trigger: 'blur'}],
               code:[{required: true, message:'请输入验证码', trigger: 'blur'}]
           }
        }
    },
    methods:{
        updateCaptcha(){
            this.captchaUrl = '/captcha?time='+new Date();
        },
        submitLogin(){
            //$refs 表单中的ref=""
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading=true;
                    this.postRequest('/login',this.loginForm).then(resp=>{
                        this.loading=false;
                        if(resp){
                            //存储用户token
                            const tokenStr = resp.obj.tokenHead + resp.obj.token;
                            window.sessionStorage.setItem('tokenStr',tokenStr);
                            //跳转页面
                            let path = this.$route.query.redirect;
                            this.$router.replace((path=='/'||path==undefined)?'/home':path);
                        }
                    })
                } else {
                    this.$message.error('请输入所有字段!');
                    return false;
                }
            });
        }
    }
}
</script>

<style>
    .loginContainer{
        border-radius: 15px;
        background-clip: padding-box;
        margin: 188px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: #fff;
        border:1px solid #eaeaea;
        box-shadow: 0 0.25px #cac6c6;
    }
    .loginTitle{
        margin: 0px auto 40px auto;
        text-align: center;
    }
    .loginRemember{
        text-align: left;
        margin: 0 0 15px 0; 
    }
    .el-form-item__content{
        display: flex;
        text-align: center;
    }
</style>

在表单加 :rules="rules"
绑定一下规则
记得在每个数据关联加上 prop=“username” prop=“password” 等等。

rules:{
               username:[{required: true, message:'请输入用户名', trigger: 'blur'}],
               password:[{required: true, message:'请输入密码', trigger: 'blur'}],
               code:[{required: true, message:'请输入验证码', trigger: 'blur'}]
           }

提交表单时：
@click=“submitLogin” 绑定点击事件
this.$refs.loginForm.validate
loginForm 需要在表单标签加上 ref=“loginForm”

submitLogin(){
            //$refs 表单中的ref=""
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading=true;
                    this.postRequest('/login',this.loginForm).then(resp=>{
                        this.loading=false;
                        if(resp){
                            //存储用户token
                            const tokenStr = resp.obj.tokenHead + resp.obj.token;
                            window.sessionStorage.setItem('tokenStr',tokenStr);
                            //跳转页面
                            let path = this.$route.query.redirect;
                            this.$router.replace((path=='/'||path==undefined)?'/home':path);
                        }
                    })
                } else {
                    this.$message.error('请输入所有字段!');
                    return false;
                }
            });
        }