我之前也踩过Vue Material的md-select原生HTML验证的坑，你遇到的情况很典型——这个组件是基于自定义元素封装的，并没有直接复用原生<select>的行为，所以你加的required属性其实是挂在自定义组件上，原生HTML验证根本识别不到选中的状态，哪怕你选了值，原生表单还是会判定这个“字段”未填写。

下面给你几个靠谱的解决方案：

方法1：添加隐藏的原生<input>同步值 #

这是适配原生HTML验证最直接的方式，因为原生验证只认原生表单元素。你可以在md-select旁边加一个隐藏的input，把v-model绑定到同一个变量，这样当md-select选中值时，这个input也会同步更新，原生验证就能正确识别了。

代码示例：

<md-field>
  <label>User type</label>
  <md-select v-model="userType" name="userType" id="userType">
    <md-option v-if="$loggedInUserType == 'admin'" value="admin">admin</md-option>
    <md-option v-if="$loggedInUserType == 'admin'" value="company">company</md-option>
    <md-option v-if="$loggedInUserType == 'company'" value="staff">staff</md-option>
  </md-select>
  <!-- 隐藏的原生input用于原生HTML验证 -->
  <input type="hidden" v-model="userType" name="userType" required>
</md-field>

方法2：改用Vue表单验证替代原生HTML验证 #

如果你的项目本来就用Vue的表单验证逻辑（比如VeeValidate或者自定义验证），完全可以抛弃原生HTML验证，这样更贴合Vue生态，也能避免自定义组件的兼容问题。

比如自定义提交前的验证逻辑：

methods: {
  submitForm() {
    if (!this.userType) {
      alert('请选择用户类型');
      // 给md-field添加错误提示样式
      this.showUserTypeError = true;
      return;
    }
    // 执行表单提交逻辑
  }
}

然后在模板中绑定错误状态：

<md-field :error="showUserTypeError">
  <label>User type</label>
  <md-select v-model="userType" name="userType" id="userType" @change="showUserTypeError = false">
    <!-- 选项不变 -->
  </md-select>
  <span v-if="showUserTypeError" class="md-error">请选择用户类型</span>
</md-field>

方法3：手动触发原生验证状态更新 #

如果你一定要坚持用原生HTML验证，可以通过监听md-select的change事件，手动更新表单的验证状态。不过这种方法稳定性稍差，不如前两种可靠。

代码示例：

<form ref="userForm">
  <md-field>
    <label>User type</label>
    <md-select v-model="userType" name="userType" id="userType" required @change="refreshValidation">
      <!-- 选项不变 -->
    </md-select>
  </md-field>
  <button type="submit">提交</button>
</form>

methods: {
  refreshValidation() {
    // 手动触发表单验证更新
    this.$refs.userForm.checkValidity();
  }
}

个人最推荐第一种方法，能快速解决原生验证的问题；如果项目已有Vue验证体系，第二种方法会更优雅。

内容的提问来源于stack exchange，提问作者Krishnadas PC