8. Form 表单校验规则 重置 Form 表单 验证表单是否符合验证规则 Message Box 弹框 选中多个相同的单词技巧

1. Form 表单校验规则

export default {
  data() {
      // 定义邮箱校验规则
    var checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      
      if(regEmail.test(value)) {
        // 校验通过
        return cb()
      }
      // 校验失败提示
      cb(new Error('请输入合法的邮箱'))
    }

    // 定义校验手机规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式  这个验证规则邮缺陷  只能验证13 开头的手机号
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

      if(regMobile.test(value)) {
         // 校验通过
        return cb()
      }
      // 校验失败提示
      cb(new Error('请输入合法的手机号'))
    }
      return {
          
      }
  }
}

// 添加用户校验规则
      addFormRules: {
          email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: checkMobile, trigger: 'blur' }
        ]
      }

2. 重置 Form 表单数据

// 监听添加用户对话框的关闭事件
    addDialogClosed() {
      // 重置对话框表单
      this.$refs.addFormRef.resetFields()
    }

3. 验证表单是否符合 验证规则（返回promise 函数）

// 注意： addForm  addFormRules  addFormRef  这些数据都需要在 数据 中定义的



// 添加新用户
    addUser() {
      // 表单预验证
      this.$refs.addFormRef.validate( validate => {
        // console.log(validate) 返回 的是 false 和 true
        if(!validate) return
          //  表单校验完成后， 就可以发起请求了
          const {data: res} = await this.$http.post(`categories/${this.cateId}/attributes`, {attr_name: this.addForm.attr_name, attr_sel: this.activeName})
      })

4. Message Box 弹框

// 根据Id删除对应的用户信息
    async removeUserById() {
       const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch( err => {
          return err
        })
      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      // console.log(confirmResult)
      if(confirmResult !== 'confirm') {
        return this.$message.info('已取消删除该用户')
      }

      console.log('删除成功')

5. 选中多个一样的英文单词

editFormRef  1. 选中要修改的单词  2. 按快捷键 Ctrl + D 可以选中多个一样的单词