Element中的表单进行验证

对于表单中的数据合法性是否需要验证 , 需要视情况而定 .

一般都需要对表单需要进行验证 , 因为作为第一道护城河 , 将数据进行筛选可以有效降低服务器的压力 就像这样的.

<el-form :model="userForm" :rules="userFormRules" ref="userFormRef" label-width="100px">
  <el-form-item label="登录名称" prop="username">
    <el-input v-model="userForm.username" disabled></el-input>
  </el-form-item>
  <el-form-item label="用户昵称" prop="nickname">
    <el-input v-model="userForm.nickname" minlength="1" maxlength="15"></el-input><!--已规定长度 -->
  </el-form-item>
  <el-form-item label="用户邮箱" prop="email">
    <el-input v-model="userForm.email"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="SubChange">提交修改</el-button>
    <el-button @click="resetForm">重置</el-button>
  </el-form-item>
</el-form>

 userFormRules: {
        nickname: [
          { required: true, message: '昵称不能为空', trigger: 'blur' },
          { pattern: /^\S{1,15}$/, message: '密码为1~15位非空字符', trigger: 'blur' } //正则进行校验
        ],
        email: [
          { required: true, message: '请输入用户邮箱', trigger: 'blur' },
          { type: 'email', message: '邮箱填写不正确', trigger: 'blur' } //表单属性自动验证:是否为邮箱
        ]
      }

表单内部规则 , 已经规定了只能这么写 , 比如还有 type: 'number' 规定了只能填写数字 , 有效帮助了合法检测 , 推荐使用 .

SubChange() {
  // 1. 验证表单的合法性
  this.$refs.userFormRef.validate(async valid => {  对表单规则最后进行一次遍历,当全部通过为true,继续执行
    // 2. 验证失败
    if (!valid) return  //反之结果为false ,终止运行
    // 3. 验证通过，发起请求
    const { data: res } = await this.$http.put('/my/userinfo', this.userForm)
    if (res.code !== 0) return this.$message.error('更新用户信息失败！')
    // 4. 更新用户信息成功，刷新 Vuex 中的数据
    this.$message.success('更新用户信息成功！')
    this.$store.dispatch('initUserInfo')
  })
}