element puls select 表单验证
后端：
public record OptionItem(string Label, string Value);
public List<OptionItem> _datatype { get; set; }
public async Task<IActionResult> OnGetAsync()
{
#region select下拉框数据
_datatype = new List<OptionItem>
{
new("类型一", "1"),
new("类型二", "2")
};
#endregion
return Page();
}前端：
<div class="mt-3 xxt-box">
<form id="form1" method="post">
<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-input v-model="form.columnname"
name="columnname"
id="columnname"
placeholder="请输入"
size="large"
clearable
required>
</el-input>
</div>
</div>
<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-input v-model="form.columndesc"
name="columndesc"
id="columndesc"
placeholder="请输入"
size="large"
clearable
required>
</el-input>
</div>
</div>
<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-select v-model="form.datatype"
id="datatype"
name="datatype"
class="error-waring-select"
placeholder="请选择"
size="large"
clearable>
<el-option v-for="item in _datatype"
:key="item.Value"
:label="item.Label"
:value="item.Value" />
</el-select>
</div>
</div>
<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-input v-model="form.defaultvalue"
name="defaultvalue"
id="defaultvalue"
placeholder="请输入"
size="large"
required
style="width:50%">
</el-input>
时间：now()
</div>
</div>
<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-switch v-model="form.sy"
name="sy"
id="sy"
size="large"
active-text="是"
inactive-text="否"
inline-prompt>
</el-switch>
</div>
</div>
<div class="row mb-3">
<label class="col-md-2 col-form-label text-md-end">
</label>
<div class="col-md-10">
<input type="hidden" name="fst" id="fst" asp-for="fst">
<input type="hidden" name="snd" id="snd" asp-for="snd">
<input type="hidden" name="thd" id="thd" asp-for="thd">
<div class="d-grid d-md-block">
<button type="button" class="btn btn-primary btn-lg" @@click="submit">提交</button>
</div>
</div>
</div>
</form>
</div>
@section Scripts
{
<script>
const {
createApp
} = Vue;
const ElMessage = ElementPlus.ElMessage;
const _datatype = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model._datatype));
const App = {
data() {
return {
form: {
},
_datatype: _datatype
};
},
methods: {
submit() {
// 1. 原生校验
const formEl = document.getElementById("form1");
const selectEl = document.getElementById("datatype");
if (!formEl.reportValidity()) return;
// 2. Vue数据校验
if (!this.form.datatype) {
const el = document.querySelector(".error-waring-select");
el?.classList.add("is-error");
ElMessage({
message: "请选择数据类型",
type: "warning",
offset: 250
});
return;
}
//3. 提交表单（关键）
formEl.submit();
}
},
watch: {
"form.datatype"(val) {
if (val) {
const el = document.querySelector(".error-waring-select");
el?.classList.remove("is-error");
}
}
}
};
const app = createApp(App);
app.use(ElementPlus);
//图标注册
for (const [key, comp] of Object.entries(ElementPlusIconsVue)) {
app.component(key, comp);
}
app.mount("#app");
</script>
</script>
}
