vue中使⽤elementui中表单验证规则，async和await异步函数处理基于elementui
在适当的el-form表单中添加规则
:rules:"rules"
然后给所需要表单规则验证的属性添加prop属性
（在el-form-item中 加上prop，然后在输⼊框内的输⼊的值和它要双向绑定）
<el-form-item label="机构代码:":label-width="formLabelWidth" prop="code">
<el-input v-model="de" autocomplete="off":></el-input>
</el-form-item>
然后在返回的data数据层中定义rules规则
//表单规则
rules:{
code:[
{
required:true,
message:"机构代码可以由英⽂字母和下划线组成",
validator: validatorCode,
trigger:"blur"
}
],
name:[
{ required:true, message:"请输⼊组织机构名称", trigger:"blur"}
],
contact:[
{
required:true,
message:"请输⼊联系⼈",
trigger:"change",
validator: validatorContact
}
],
phone:[
{
required:true,
message:"请输⼊正确的⼿机号码",
validator: validatorPhone,
trigger:"blur"
}
],
licenseUrl:[
{ required:true, message:"请输⼊营业许可URL", trigger:"blur"},
{
type:"url",
min:1,
max:1,
message:"请上传⼀张图⽚",
trigger:"blur"
}
],
addr:[{ required:true, message:"请输⼊", trigger:"blur"}],
status:[{ required:true, message:"请选择状态", trigger:"change"}],
type:[{ required:true, message:"请选择公司类型", trigger:"change"}]
}
上⾯提供了表单规则的简易写法和⾃定义规则
⾃定义规则就是validator: ....这⾥写你的验证函数名，具体的操作⽅法可上⽹查询
然后就是对于每个表单规则验证的提交表单⽅法
例如对于机构信息的修改要⽤到异步函数处理的话，要写在表单校验函数⾥⾯
/修改组织机构信息
updateOrganization(){
this.$refs.editForm.validate(async valid =>{
if(valid){
//这是⼀个回显函数
//对应的对话框关闭时间
await this.http.put(
"这⾥是后台接⼝路径",
);
}else{
console.log("error submit!!");
return false;
}
});
关于函数⾥⾯的editForm是在所需验证的表单中添加ref=“editForm”属性，这样⼦就可以关联起来了
<!--添加机构弹窗-->
<el-dialog
title="添加机构"
:
visible.sync="organizationFormVisible"
append-to-body
@closed="organizationDialogClose"
width="740px"
custom-class="dialog"
>
<el-form
:model="organization"
:rules="rules"
label-width="100px"
class="demo-Form"
ref="addForm"
>
<el-form-item label="机构代码:":label-width="formLabelWidth" prop="code">
<el-input v-model="de" autocomplete="off":></el-input>
</el-form-item>
<el-form-item label="机构名称:":label-width="formLabelWidth" prop="name">
<el-input v-model="organization.name" autocomplete="off":></el-input>
</el-form-item>
<el-form-item label="联系⼈:":label-width="formLabelWidth" prop="contact">
<el-input
v-model="act"
autocomplete="off"
:
></el-input>
</el-form-item>
<el-form-item label=":":label-width="formLabelWidth" prop="phone">
<el-input v-model="organization.phone" autocomplete="off":></el-input>
</el-form-item>
<el-form-item label=":":label-width="formLabelWidth" prop="addr">
<el-input v-model="organization.addr" autocomplete="off":></el-input>
</el-form-item>
<el-form-item label="状态:":label-width="formLabelWidth" prop="status">
<el-select v-model="organization.status">
<el-option label="正常" value="true"></el-option>
<el-option label="禁⽤" value="false"></el-option>
</el-select>
</el-form-item>
<el-form-item label="营业执照:":label-width="formLabelWidth" prop="licenseUrl">
<el-input type="hidden" v-model="organization.licenseUrl" autocomplete="off"></el-input>
<el-upload
action="/v2-auth/sys-user-permission/upload"
list-type="picture-card"
:limit="uploadLimit"
:
on-success="uploadSuccess"
:on-error="uploadError"
:on-preview="handlePictureCardPreview"
trigger="hover"
:file-list="fileList"
content="点击上传"
:on-remove="handleRemove"
>
<i>
<span class="el-icon-plus">
<br />添加图⽚
</span>
</i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" append-to-body>
<img width="100%":src="dialogImageUrl" alt />
</el-dialog>
</el-form-item>
<el-form-item label="备注:":label-width="formLabelWidth" prop="remark">
<el-input type="textarea" v-model="ark":></el-input>
</el-form-item>
</el-form>
vue element admin
<div slot="footer"class="dialog-footer">
<el-button @click="organizationFormVisible = false">取消</el-button>
<el-button type="primary" @click="addOrganization()">确定</el-button>
</div>
</el-dialog>
以上是部分代码，⼩⽩不太懂原理，说法不正确莫怪。关于异步函数怎么校验这是我想出来最简洁的⽅法了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。