账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    在vue中使用input required属性不起作用
    82
    0

    vue构建的项目，有个表单提交页，因为有文件提交，采取的formdata的提交方式
    input的required属性不起作用，求问是哪里的问题
    ：

    <form  id= "uploadForm" name="regForm" enctype="multipart/form-data" >
              <label class="ivu-form-item-label" style="width: 80px;">服务厂商</label>
              <input type="text" name="bankName" v-model="input.input1" class="ivu-input" :disabled="isReadOnly" :required="true"><br>



              <label class="ivu-form-item-label" style="width: 80px; position: relative;bottom: 100px;">厂商简介</label>
              <textarea  name="bankInfo" v-model="input.input2" class="ivu-text" :disabled="isReadOnly" required="required"></textarea><br>
              <label class="ivu-form-item-label" style="width: 80px;">厂商人数</label>
              <input type="text" name="peopleNumber" v-model="input.input3" class="ivu-input" :disabled="isReadOnly" required="required"><br>
              <label class="ivu-form-item-label" style="width: 80px;">产品图片</label>
              <input type="file" name="businessLicence"  v-show="fileshow"  class="ivu-input" :disabled="isReadOnly" required="required" accept="image/gif,image/jpeg,image/jpg,image/png"><br>


              <label class="ivu-form-item-label" style="width: 80px;">产品许可文件</label>
              <input type="file" name="openingLermission" v-show="fileshow"  class="ivu-input" :disabled="isReadOnly" required="required" accept="image/gif,image/jpeg,image/jpg,image/png"><br>
              <label class="ivu-form-item-label" style="width: 80px;">产品名称</label>
              <input type="text" name="workNake" v-model="input.input6" class="ivu-input" :disabled="isReadOnly" required="required"><br>
              <label class="ivu-form-item-label" style="width: 80px;">产品介绍</label>
              <input type="text" name="workFlowInfo" v-model="input.input7" class="ivu-input" :disabled="isReadOnly" required="required"><br>
              <label class="ivu-form-item-label" style="width: 80px;">开发者</label>
              <input type="text" name="developer" v-model="input.input8" class="ivu-input" :disabled="isReadOnly" required="required"><br>
              <label class="ivu-form-item-label" style="width: 80px;">管理部门</label>
              <input type="text" name="adminDept" v-model="input.input9" class="ivu-input" :disabled="isReadOnly" required="required"><br>
              <label class="ivu-form-item-label" style="width: 80px;">运行时间</label>
              <input type="text" name="setTime" v-model="input.input10" class="ivu-input" :disabled="isReadOnly" required="required"><br>
              <label class="ivu-form-item-label" style="width: 80px;">目前运行状态</label>
              <input type="text" name="currentStatus" v-model="input.input11" class="ivu-input" :disabled="isReadOnly" required="required"><br>
              <label class="ivu-form-item-label" style="width: 80px;">上传页面截图</label>
              <input type="file" name="screenshot"  v-show="fileshow" class="ivu-input" :disabled="isReadOnly" required="required" accept="image/gif,image/jpeg,image/jpg,image/png"><br>
              <!-- <Button v-show="showbtn" @click="goBack()">返回上一页</Button> -->

              <!-- <input type="file" name="screenshot"  v-show="fileshow" class="ivu-input" :disabled="isReadOnly" required><br> -->


               <input class="ivu-btn" v-show="showbtn" :disabled="disabled1"  type="button" value="确认提交" @click="doUpload()" />

               <input class="ivu-btn" v-show="showedit" :disabled="disabled2" type="button" value="确认修改并提交" @click="editUpload()" />

            </form>
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 被你骗惯了 普通会员 1楼

      在Vue中，<input> 标签用于创建文本输入框。required 属性用于设置输入框字段的必填性。然而，如果在使用<input> 标签的同时，设置了 required 属性，但是页面加载后并没有显示必填字段，可能是以下原因导致的：

      1. Vue 未初始化：在Vue 程序中，<input> 标签必须在模板加载后才能被渲染。在尝试使用 required 属性之前，Vue 可能尚未初始化或绑定数据到 input 标签。

      html <input type="text" required v-model="inputValue" />

      首先，确保在模板文件（例如，app.vue）中导入 Vue 和绑定 input 标签：

      html <template> <div> <input type="text" v-model="inputValue" /> <p v-if="inputValue">This is a required field.</p> </div> </template>

      然后，尝试在页面加载时添加 v-if 元素，如下所示：

      html <template> <div> <input type="text" v-model="inputValue" required v-if="inputValue"> <p v-if="inputValue">This is a required field.</p> </div> </template>

      1. 未绑定 input 实例到组件：在模板文件中，需要为 input 标签绑定到组件实例，而不是通过全局变量 inputValue。

      html <template> <div> <input type="text" v-model="inputValue" required /> <p v-if="inputValue">This is a required field.</p> </div> </template>

      在 app.vue 中，将 input 标签绑定到组件实例：

      html <template> <div> <input type="text" v-model="inputValue" required v-bind="$attrs"> <p v-if="inputValue">This is a required field.</p> </div> </template>

      在 app.vue 中，使用 $attrs 访问 input 标签的 v-model 属性，如下所示：

      javascript data() { return { inputValue: '' }; }, mounted() { this.inputValue = this.$attrs.inputValue; }

      这样，当 input 标签被绑定到组件实例后，required 属性就会自动生效，并在页面加载时显示必填字段。

      1. HTML 错误：确保 <input> 标签的 type 属性设置为 text，而不是 required。 <input> 标签的 type 属性用于指定输入框的类型，而 required 属性用于设置输入框的必填性。

      html <input type="text" />

      如果 <input> 标签的 type 属性设置为其他类型，例如 number、email 或 date，那么即使在页面加载后，required 属性也不会显示。

      1. 浏览器插件或库问题：某些浏览器插件或库可能使用 required 属性，但在 Vue 中，可能没有正确配置或使用。例如，Angular 使用 ngModel 组件将 required 属性应用于 <input> 标签，而 Vue 的 v-model 属性默认不具有 required 属性。

      检查 ngModel 组件或 Vue 实例是否正确使用了 required 属性，以及是否设置了 v-model 的默认值为 true。例如：

      html <input type="text" ngModel v-model="inputValue" required />

      或者：

      javascript data() { return { inputValue: '', inputModel: true }; }, mounted() { this.inputValue = this.inputModel ? this.$attrs.inputValue : ''; }

      如果 ngModel 或 Vue 实例使用了正确的 required 属性配置，并且设置了 v-model 的默认值为 true，那么页面加载后 required 属性应该会显示。如果仍然没有显示，可能需要检查其他 Vue 调用或设置，如 Vue 实例的属性绑定或组件挂载。

      总之，确保 Vue 项目已正确初始化，组件实例已正确绑定到 input 标签，并且在模板文件中正确使用了 required 属性。如果问题仍然存在，请检查浏览器插件或库是否正确配置了 required 属性，以及 Vue 实例的属性绑定或组件挂载是否正确。如果以上步骤都正确，但仍然没有显示必填字段，建议查看 Vue 技术文档或寻求 Vue 官方的帮助。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部