基本的表单验证

最新推荐文章于 2024-08-08 15:28:54 发布

凉·点

最新推荐文章于 2024-08-08 15:28:54 发布

阅读量75

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/SHDUAO/article/details/130567340

版权

本文介绍了如何在Vue.js中使用组件进行表单数据绑定和规则校验。通过:model和:rules属性实现数据与校验规则的关联，利用el-form-item和prop进行输入字段的验证，并通过ref在方法中调用validate()进行提交前的数据校验。

摘要由CSDN通过智能技术生成

1.使用<el-form>包裹整个表单在其中使用:model 绑定数据和 :rules绑定校验规则

 <el-form :model="user" :rules="rules">

......................................

</el-from>

2.在script中添加使用数据以及校验规则（都添加在data中）

 data() {
    return {
      rules: {
        cinema_name: [{ required: true, message: '必填', trigger: 'blur' }],
        address: [{ required: true, message: '必填', trigger: 'blur' }]
       
      },
    }
  },

3.在input应该被el-from-item包裹传入prop （prop对应校验数据）

   <div class="title">登录</div>

<el-form :model="user" :rules="rules">

        <el-form-item prop="username">

          <el-input

            size="medium"

            style="margin: 10px auto"

            prefix-icon="el-icon-user"

            v-model="user.username" ></el-input>

      </el-form-item>

  </el-from>

4.数据提交校验在<el-form>中使用ref （校验失败就不会发送请求）ref：本页面获取dom元素

 <el-form :model="user" :rules="rules" ref="userForm">

在methods方法中使用回调判断数据校验

示例：

// 执行提交表单
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 所有字段验证通过
          // 整理字段
          this.form.tags = this.form.tags.join(',')
          console.log(this.form)
          // 发送新增影院请求，执行业务
          httpApi.cinemaApi.add(this.form).then((res) => {
            if (res.data.code == 200) {
              // 新增成功
              this.$message({
                message: '恭喜，影院新增成功',
                type: 'success',
              })
              this.$router.push('/home/cinema-list')
            }
          })
        }
      })
    },