表单

 <div class="row mb-3">
     <label class="col-md-2 col-form-label text-md-end">
         所在省市区：         <span class="text-danger">*</span>
     </label>
     <div class="col-md-10">
         <el-cascader v-model="form.area"
                      id="area"
                      :options="areaOptions"
                      class="area-waring"
                      style="width:100%"
                      clearable>
         </el-cascader>
         <input type="hidden"
                name="Xm_Xx.area"
                :value="form.area">
     </div>
 </div>

绑定

 data() {
     return {
         form: @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.Xm_Xx)),
         areaOptions: @Html.Raw(FileHelper.ReadRootFile("wwwroot/json/pub_sta_class.json"))
                   };

事件

  methods: {
     submit() {

         // 1. 原生校验
         const formEl = document.getElementById("form1");
         if (!formEl.reportValidity()) return false;

         // 2. Vue数据校验
         if (!this.form.area) {
             const el = document.querySelector(".area-waring");
             el?.classList.add("is-error");
             ElMessage({
                 message: "请选择所在省市区",
                 type: "warning",
                 offset: 200
             });
             return;
         }
         //3. 提交表单（关键）
         formEl.submit();
     }
 },
 mounted() {
     //默认绑定
     if (this.form.area) {
         this.form.area =
             this.form.area.split(",");
     }

 },
 watch: { 
     "form.area"(val) {
         if (val) {
             const el = document.querySelector(".area-waring");
             el?.classList.remove("is-error");
         }
     },

 }