Vue中Form表单中添加Rules规则

最新推荐文章于 2024-10-18 09:18:31 发布

原创最新推荐文章于 2024-10-18 09:18:31 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #vue

Vue模板开发同时被 2 个专栏收录

4 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文介绍了在Vue.js应用中如何利用Rules规则进行表单验证。详细步骤包括在HTML中定义表单，data中设置Rules，以及在methods中处理验证逻辑。当表单提交时，会根据Rules自动检查输入是否符合要求，如不符则提示用户，Valid属性将反映验证结果。

部署运行你感兴趣的模型镜像

1、写入HTML

<el-form :model="pageForm" label-width="80px"  :rules="pageFormRules" ref="pageForm">
      <el-form-item label="文档部门" prop="archiveApartment">
        <el-input v-model="pageForm.archiveApartment" auto-complete="off" ></el-input>
      </el-form-item>
      <el-form-item label="文档标签" prop="archiveNature">
        <el-input v-model="pageForm.archiveNature" auto-complete="off" ></el-input>
      </el-form-item>
      <el-form-item label="文档名称" prop="archiveName">
        <el-input v-model="pageForm.archiveName" auto-complete="off" ></el-input>
      </el-form-item>
      <el-form-item label="保密等级" prop="archiveLevel">
        <el-input v-model="pageForm.archiveLevel" auto-complete="off" ></el-input>
      </el-form-item>
      <el-form-item label="文档位置" prop="archivePosition">
        <el-input v-model="pageForm.archivePosition" auto-complete="off" ></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker type="datetime" placeholder="创建时间" v-model="pageForm.createTime">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="更新时间">
        <el-date-picker type="datetime" placeholder="更新时间" v-model="pageForm.updateTime">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog‐footer">
      <el-button type="primary" @click="editSubmit" >提交</el-button>
      <el-button type="primary" @click="go_back" >返回</el-button>
    </div>

2、写入data

pageFormRules: {
        archiveApartment:[
          {required: true, message: '请选择部门', trigger: 'blur'}
        ],
        archiveNature:[
          {required: true, message: '请选择标签', trigger: 'blur'}
        ],
        archiveName: [
          {required: true, message: '请输入文档名称', trigger: 'blur'}
        ],
        archiveLevel: [
          {required: true, message: '请输入文档保密等级', trigger: 'blur'}
        ],
        archivePosition: [
          {required: true, message: '请输入文档位置', trigger: 'blur'}
        ],
      },

3、写入methods

editSubmit(){
      this.$refs.pageForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            cmsApi.page_edit(this.id,this.pageForm).then((res) => {
              console.log(res);
              if(res.success){
                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
                //自动返回
                this.go_back();
              }else{
                this.$message.error('修改失败');
              }
            });
          });
        }
      });
    },

4、总结

触发Rules的情况

当不符合规则时会提示用户
当直接提交会触发规则

点击保存时
当提交保存单据的时候会校验参数框里的参数是否符合
如果符合那么回调函数中返回的Valid为ture否则为false

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率