前端登陆表单_内容非空验证_rules属性与validate方法

更多校验规则查看：ElementUI官网-form-attributes

表单内容

<!--3、通过rules属性传入约定的验证规则v-bind:model="dataForm"绑定data中的dataForm数据v-bind:rules="rules"绑定data中的rules属性，里面定义了要校验的属性及规则ref="loignForm"=>当前el-form表单对象的一个标识。
-->
<el-form ref="loginForm" v-bind:model="dataForm" v-bind:rules="rules"><h2>请登录</h2><!--将Form-Item的 prop 属性设置为需校验的字段名--><el-form-item prop="username"><!--4、该prop中绑定的属性要与打他dataForm与rules中的一致--><el-input v-model="dataForm.username" placeholder="用户名" clearable></el-input></el-form-item><el-form-item prop="password"><el-input v-model="dataForm.password" placeholder="密码" clearable></el-input></el-form-item><el-button type="primary" v-on:click="loginHandle">登&emsp;&emsp;陆</el-button>
</el-form>

验证

<script>export default {		data(){return{//1、el-form表单绑定的数据dataForm:{username: '',password: '',},//2、表单元素的实时校验对象rules:{//username=>要校验的dataForm中的属性，名字与dataForm中的username保持一致username:[//非空校验规则，required：true => 必填，message：失败提示语，//trigger：'blur'失去焦点时验证{required:true, message: '请输入用户名', trigger:'blur'}],//dataForm中要校验的password属性password: [{required:true, message: '请输入密码', trigger: 'blur'}]}}},methods:{loginHandle(){//validata对整个表单进行校验的方法，参数为一个回调函数。// 该回调函数会在实时校验结束后被调用,参数valid代表是否校验成功this.$refs.loginForm.validate(valid=>{//表单提交校验if(valid){//模拟登陆if(this.dataForm.username == 'admin' && this.dataForm.password == '123'){this.$message.success('登录成功')let userInfo = {username: 'admin',nickName: '管理员'}/*** 登陆成功之后将登录的用户信息存储到session会话存储空间中*/sessionStorage.setItem('userInfo',JSON.stringify(userInfo))//路由跳转到内部this.$router.replace('/')}else{//没有校验成功弹出提示信息this.$message.error('用户名或密码错误')}}})}	}}      
</script>

登录后获取浏览器本地session会话存储空间中的用户信息

<!--体部标签-->
<el-container><!--体部左标签--><el-aside width="150px" style="background-color: #545c64"><!--左侧导航栏,default-active="welcome"默认选中index="welcome"的菜单项--><el-menu class="nav-list" default-active="welcome" background-color="#545c64" router><el-menu-item index="welcome"><i class="el-icon-user"></i><span slot="title">欢迎:{{username}}</span></el-menu-item></el-menu></el-aside>
<el-container>       

<script>export default {data(){return{username:undefined	}},/*从会话存储空间中取得用户信息，并在钩子函数为vue对象中的数据赋值*/mounted(){let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))console.log(typeof userInfo)this.username = userInfo.nickName}}	
</script>