项目实训6——表单rules和登录的localStorage

1. 表单rules
     element ui的form表单可以设置rules来检测输入内容是否符合设定的规范。我在用户和管理员的注册表单用到了rules。
     首先在el-form的属性框设置遵循的rules，:rules="registerRule"，在data（）的return中设置registerRule的内容，如下所示：

registerRule:{
  uname:[
    {required:true,message:'用户名不能为空',trigger:'blur',max:6}
  ],
  password:[
    {required:true,message:'密码不能为空',trigger:'blur'},
    {min:6,max:10,trigger: 'blur',message: '密码的长度为6-10位'}
  ],
  rname:[
    {required:true,message:'务必填写真实姓名',trigger:'blur',max:4}
  ],
  phonenumber: [
    {required:true,message:'务必填写真实手机号码',trigger:'blur'},
    {trigger: 'blur',message: '手机号码格式不正确',pattern:/^1[3-9]\d{9}$/}
  ]
}

其中required为是否必须填写，trigger为触发条件，message为未填写后显示的信息，max和min限制填写字符的数量，pattern限制输入格式。**在rules的使用时要注意，如我的代码所示，registerRule中的内容是针对于el-form-item的prop而言，如果缺少prop属性或是属性内容与rules内容对应不上，rules就会失效。**对于设置required属性为true的form-item，触发后先显示第一个message，不符合限制内容后限制第二个message。提交函数中可以设置不满足条件和满足条件时的动作，this.$refs.registerForm.validate(valid => {if (valid) {则提交数据，else {this.$message.warning('有未填信息或输入格式不对！');return false;}});

2. localStorage
     用户和管理员登录后，用户名和ID要存下来。我一开始的想法是使用this.$router.push({path:'/user',query:{uuid:this.uid,uuname:this.uname}})这种方法来传递信息，但是在点击浏览器自带的返回键或刷新界面键时，用户信息就可能会消失，所以我选择localStorage来存储用户信息。在点击登录或注册的函数中，调用localStorage.setItem("admin", JSON.stringify(res.data.adminDB.aname));函数可以在之后的网页再调用this.aname=JSON.parse(localStorage.getItem("admin"))获得key为‘admin’的value，这样就可以保证用户数据不被刷新掉。