vue删除确认框,vue表单验证不起作用
这篇文章主要为大家详细介绍了某视频剪辑软件实现表单单独移除一个字段验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现表单单独移除一个字段验证的具体代码，供大家参考，具体内容如下
下面的代码以登录功能为例。
功能描述：用户输入密码时，失去焦点进行密码校验，当输入有误时，显示错误提示信息；只要密码值发生了变化，错误提示信息就移除。
通过看监控密码字段，实现实时移除。
vue2模板语法代码如下：
模板
差异
El-form:model= form :rules= rules ref= form label-width= 140 px
El-表单-项目标签=用户名prop=用户名
El-input v-model= form。用户名 placeholder=请输入用户名/el-input
/El-表单-项目
El-表单-项目标签=密码prop=密码
El-输入type= password v-model= form。密码 placeholder=请输入密码
/el-input
/El-表单-项目
埃尔-表单-项目
El-button type= primary @ click= submit( form )提交/el-button
el-button @click=reset(form )取消/el-button
/El-表单-项目
/el格式
差异
/模板
脚本
导出默认值{
data() {
让validatePwd=(规则，值，回调)={
//密码校验
}
返回{
表单：{
用户名： ,
密码：""
},
规则：{
用户名：[{必填：真，消息： 请输入用户名，触发器：模糊 }],
密码：[{ required: true，validatePwd，trigger: blur}]
}
}
},
观察：{
form.password(newVal，oldVal) {
if(newVal，oldVal) {
这个refs[form].clearValidate("密码");
}
}
}
}
/脚本
vue2成分-api使用多伦多股票交易所语法开发，代码如下：
服务。分时（同timesharing）
导出常量initFormState={
用户名： ,
密码：""
}
const validatePwd=(规则，值，回调)={
//密码校验
}
导出const formStateRules={
用户名：[
{必需：真，消息： 请输入用户名，触发器：模糊 }
],
密码：[
{必需：true，validatePwd，trigger: blur}
]
}
index.tsx文件
从" @vue/composition-api "导入{ onMounted，reactive，ref，watch }；
从""导入{ initFormState} ./服务。ts’；
导出默认定义组件({
setup (prop，{root}) {
const formState=reactive({
.initFormState，//从服务引入进来
})
const form ref=ref(null)；
const submit=()={
//表单校验
const form validate=wait new Promise(resolve={
(形式参考，如有)。价值。validate((valid:布尔值)=resolve(valid))；
});
如果(!表单验证)返回；
//表单校验通过后进行的逻辑
}
常量重置=()={
Object.keys(formState).map((key:string)=formState[key]=(init formState as any)[key])；
}
//监控密码，按需移除错误提示信息
watch(()=formState.password，()={
const结果=formstate。密码；
如果（结果){
(形式参考，如有)。价值。清除验证(“密码”)
}
})
返回{
表单状态，
formRef，
formStateRules，
提交，
重置
}
},
render() {
返回（
差异
埃尔格式
ref=formRef
form={this.formState}
props={{model: this.formState}}
rules={ formStateRules } label-width= 140 px
El-表单-项目标签=用户名prop=用户名
El-输入v-model={ this。表单状态。用户名}占位符=请输入用户名/el-input
/El-表单-项目
El-表单-项目标签=密码prop=密码
El-input type= password v-model={ this。表单状态。密码}占位符=请输入密码/el-input
/El-表单-项目
El-表单-项目
El-button type= primary onclick={ this . submit }提交/el-button
El-button onClick={this.reset}取消/el-button
/El-表单-项目
/el格式
/div
)
}
})
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。