vue里form表单验证

最新推荐文章于 2023-07-22 02:30:00 发布

IG_wxz

最新推荐文章于 2023-07-22 02:30:00 发布

阅读量1.1k

点赞数

分类专栏：原创转载需经博主同意文章标签： vue form表单验证

本文链接：https://blog.csdn.net/qq_40236722/article/details/89850441

版权

转载需经博主同意同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

原创

21 篇文章 3 订阅

订阅专栏

页面部分代码如下：

  <el-dialog title="老师基本信息修改" :visible.sync="detailVisible" width="500px">
    <el-form ref="teacherCheck" :model="form" :rules="teacherRuler">
      <el-form-item label="姓名" label-width="100px" prop="realyName">
        <el-input v-model="form.realyName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="老师昵称" label-width="100px" prop="nickName">
        <el-input v-model="form.nickName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" label-width="100px" prop="sex">
        <el-select v-model="form.sex" placeholder="请选择">
          <el-option
            v-for="item in sexs"
            :key="item.code"
            :label="item.name"
            :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="生日" label-width="100px" prop="birthday">
        <el-input v-model="form.birthday" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="头像" label-width="100px" prop="tImg">
        <el-upload
          class="avatar-uploader"
          action="/api/management/header/headUpload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          name="headerImg"
          accept="image/*"
        >
          <img v-if="form.tImg" :src="form.tImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="所属学校" label-width="100px" prop="school">
        <el-input v-model="form.school" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="个性签名" label-width="100px" prop="sign">
        <el-input v-model="form.sign" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="简介" label-width="100px" prop="msg">
        <el-input v-model="form.msg" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="Cancle">取 消</el-button>
      <el-button type="primary" @click="OnSubmit('teacherCheck')">确 定</el-button>
    </div>
  </el-dialog>

方法里部分代码如下：

   //校验规则
   teacherRuler: {
        realyName: [{ required: true, message: "请输入名字", trigger: "blur" }],
        sex: [{ required: true, message: "请输入性别", trigger: "blur" }],
        birthday: [{ required: true, message: "请输入生日", trigger: "blur" }],
        tImg: [{ required: true, message: "请上传头像", trigger: "blur" }],
        nickName: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        school: [
          { required: true, message: "请输入所属学校", trigger: "blur" }
        ],
        sign: [{ required: true, message: "请输入个性签名", trigger: "blur" }],
        msg: [{ required: true, message: "请输入简介", trigger: "blur" }]
      }