26.(前端)登录预验证与表单重置

1.登录预验证

1.1概况

由于避免给后端服务器过大压力，前端可以做一个数据验证。


validate此函数主要的就是用于验证是否表单中存在输入数据，然后通过判断语句进行进一步验证，例如密码是否存在大小写一类既可。

1.2流程

首先，对登录进行绑定函数，如果触发函数，通过ref调用内置方法validate()验证表单是否存在数据，在其中可以写入具体想要的方法。本篇文章就是先搭建一下。

1.3代码展示

<template>
    <div class="login_container">
        <div class="login_box">
            <div class = "logo">
                
                <img src="../assets/logo.png" alt="">
            div>
            
            
            
            
            
            <el-form ref="userRef" :model="userForm" :rules="rule" label-width="0px" class="form_style">
                <el-form-item prop="name">
                    
                    <el-input v-model="userForm.name" prefix-icon="el-icon-user-solid" placeholder="用户名">el-input>
                el-form-item>
                <el-form-item prop="pwd">
                    <el-input show-password v-model="userForm.pwd" prefix-icon="el-icon-unlock" placeholder="密码">el-input>
                el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="login">登录el-button>
                    <el-button @click="restForm">重置el-button>
                el-form-item>
            el-form>
        div>
    div>
template>

<script>
import '../plugins/element.js'
// 默认导出
export default {
  name: 'Login',
  data(){
    return{
        userForm:{
            name:'sxt',
            pwd:'123'
        },
        rule:{
            pwd:[
                { required: true, message: '请输入名称', trigger: 'blur' },
                { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
            ],
            name:[
                { required: true, message: '请输入密码', trigger: 'blur' }
            ]
        }
    }
  },
  methods: {
    restForm () {
        // 测试用：查看ref到底是什么
        // console.log(this);
        // 通过this获取到整个ref对象，找到我们在表单中设定的ref名，再调用内置重置方法
        this.$refs.userRef.resetFields()
    },
    login () {
        this.$refs.userRef.validate((valid)=>{
             // 测试用：输入框中全部存在数据则打印true
            // console.log(valid);
            if (!valid) return
            // 具体的登录操作
        })
    }
  }
}
script>

<style lang="less" scoped>
/*
scpoed：只针对当前组件的样式
less：语法格式
*/
.login_container{
    color: #FF8C00;
    background-color: #FF8C00;// 百度搜索颜色值
}
//  设计登录的方框
 .login_box{
    width: 450px;
    height: 300px;
    // 圆角
    border-radius: 5px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    // 定位方框位置
    transform:translate(-50%,-50%);
 }
 .logo{
    height: 80px;
    width: 200px;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 10%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    // 阴影效果
    box-shadow: 0 0 10px #eee;
    img{
        // 充满整个边框
        width: 100%;
        height: 100%;
    }
 }
 .form_style{
    position: absolute;
    width: 100%;
    bottom: 0px;
    padding: 0 10%;
    // 方框的盒子模型是要设置的，不然使用默认大小
    box-sizing: border-box;

 }
 .btns{
    display: flex;// 让他活动，然后置于右边
    justify-content: flex-end;
 }
style>

2.表单的重置

2.1 查看官网

官网网址为：https://element.eleme.cn/#/zh-CN/component/form

2.2流程

1.通过ref绑定表单元素
ref的功能：主要就是用来获取和操作dom；获取组件，拿到组件中的变量和方法。通过给变量赋值的方法，展示该组件中的内容。
2.使用按钮触发函数，通过获取到的ref调用内置方法

<template>
    <div class="login_container">
        <div class="login_box">
            <div class = "logo">
                
                <img src="../assets/logo.png" alt="">
            div>
            
            
            
            
            
            <el-form ref="userRef" :model="userForm" :rules="rule" label-width="0px" class="form_style">
                <el-form-item prop="name">
                    
                    <el-input v-model="userForm.name" prefix-icon="el-icon-user-solid" placeholder="用户名">el-input>
                el-form-item>
                <el-form-item prop="pwd">
                    <el-input show-password v-model="userForm.pwd" prefix-icon="el-icon-unlock" placeholder="密码">el-input>
                el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary">登录el-button>
                    <el-button @click="restForm">重置el-button>
                el-form-item>
            el-form>
        div>
    div>
template>

<script>
import '../plugins/element.js'
// 默认导出
export default {
  name: 'Login',
  data(){
    return{
        userForm:{
            name:'sxt',
            pwd:'123'
        },
        rule:{
            pwd:[
                { required: true, message: '请输入名称', trigger: 'blur' },
                { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
            ],
            name:[
                { required: true, message: '请输入密码', trigger: 'blur' }
            ]
        }
    }
  },
  methods: {
    restForm () {
        // 测试用：查看ref到底是什么
        // console.log(this);
        // 通过this获取到整个ref对象，找到我们在表单中设定的ref名，再调用内置重置方法
        this.$refs.userRef.resetFields()
    }
  }
}
script>