前端校验rules写法：

最新推荐文章于 2024-07-03 23:00:00 发布

泗水六年

最新推荐文章于 2024-07-03 23:00:00 发布

阅读量659

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Jackey1314007/article/details/116528699

版权

vue 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了在前端开发中使用Vue.js实现参数配置表单的验证规则，包括名称、描述和参数类型的必填验证，以及触发时机的设置。通过`el-form`和`el-form-item`组件结合`rules`属性，实现了表单的实时校验功能。

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

前端校验rules：
<template>
<div class="table">

<div v-if="addVisible">
<el-dialog :title="saveParameter?'新增参数':'修改参数'" :visible.sync="addVisible" width="40%" top="10vh">
<el-form ref="parameterObject" :model="parameterObject" :rules="rules" label-width="100px">
<el-form-item label="名称" prop="name">
<el-input v-model.trim="parameterObject.name"></el-input>
</el-form-item>
<el-form-item label="描述" prop="content">
<el-input v-model.trim="parameterObject.content"></el-input>
</el-form-item>
<el-form-item label="参数类型" prop="parameterType">
<el-radio v-model.trim="parameterObject.parameterType" :label="0">唯一参数</el-radio>
<el-radio v-model.trim="parameterObject.parameterType" :label="1">分组参数</el-radio>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addVisible = false">取消</el-button>
<el-button class="bg-primary text-white" @click="submitForm('parameterObject')">确定</el-button>
</span>
</el-dialog>
</div>

</div>
</template>

<script>
export default {
data() {
       return {
       rules: {
       name: [{
           required: true,
           message: "请输入名称",
           trigger: "blur"
       }],
       content:[
           {
           required: true,
           message: "请输入描述",
           trigger: "blur"
           }
       ],
       parameterType:[
           {
           required:true,
           message:"请选择参数类型",
           trigger:"blur"
           }
       ]
       }
       }
       }
   }
</script>