vue实现表单单独移除⼀个字段验证
本⽂实例为⼤家分享了vue实现表单单独移除⼀个字段验证的具体代码，供⼤家参考，具体内容如下
下⾯的代码以登录功能为例。
功能描述：⽤户输⼊密码时，失去焦点进⾏密码校验，当输⼊有误时，显⽰错误提⽰信息；只要密码值发⽣了变化，错误提⽰信息就移除。
通过watch监控password字段，实现实时移除。
vue2 模板语法代码如下：
<template>
<div>
<el-form :model="form" :rules="rules" ref="form" label-width="140px">
<el-form-item label="⽤户名" prop="username">
<el-input v-model="form.username" placeholder="请输⼊⽤户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password" placeholder="请输⼊密码"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit('form')">提交</el-button>
<el-button @click="reset('form')">取消</el-button>
</el-form-item>
</el-form>
<div>
</template>
<script>
export default {
data() {
let validatePwd  = (rule, value, callback) => {
// 密码校验
}
return {
form: {
username: '',
password: ''
},
rules: {
username: [{ required: true, message: '请输⼊⽤户名', trigger: 'blur'}],
password: [{ required: true, validator: validatePwd, trigger: 'blur'}]
}
}
},
watch: {
'form.password'(newVal, oldVal) {
if(newVal, oldVal) {
this.$refs['form'].clearValidate('password');
}
}
}
}
</script>
vue2+composition-api 使⽤tsx语法开发，代码如下：
service.ts
export const initFormState = {
username: '',
password: ''
}
const validatePwd = (rule, value, callback) => {
// 密码校验
}
export const formStateRules = {
username: [
{ required: true, message: '请输⼊⽤户名', trigger: 'blur'}
],
password: [
{ required: true, validator: validatePwd, trigger: 'blur'}
]
}
index.tsx⽂件
import { onMounted, reactive, ref, watch } from "@vue/composition-api";
vue中reactiveimport { initFormState} from './service.ts';
export default defineComponent({
setup (prop,{root}) {
const formState= reactive({
...initFormState, // 从service引⼊进来
})
const formRef = ref(null);
const submit = ()  => {
// 表单校验
const formValidate = await new Promise(resolve => {
(formRef as any).value.validate((valid: boolean) => resolve(valid));
});
if(!formValidate) return;
// 表单校验通过后进⾏的逻辑
}
const reset = () => {
Object.keys(formState).map((key: string) => formState[key] = (initFormState as any)[key]);
}
// 监控password，按需移除错误提⽰信息
watch(() => formState.password, ()=> {
const result = formState.password;
if(result) {
(formRef as any).value.clearValidate('password')
}
})
return {
formState,
formRef,
formStateRules,
submit,
reset
}
},
render() {
return (
<div>
<el-form
ref="formRef"
form={this.formState}
props={{model: this.formState}}
rules={formStateRules}  label-width="140px">
<el-form-item label="⽤户名" prop="username">
<el-input v-model={this.formState.username} placeholder="请输⼊⽤户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model={this.formState.password} placeholder="请输⼊密码"></el-input>                  </el-form-item>
<el-form-item>
<el-button type="primary" onClick={this.submit}>提交</el-button>
<el-button onClick={set}>取消</el-button>
</el-form-item>
</el-form>
</div>
)
}
})
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

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