下面的代码以登录功能为例。
功能描述： 用户输入密码时，失去焦点进行密码校验，当输入有误时，显示错误提示信息；只要密码值发生了变化，错误提示信息就移除。
通过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";
import { 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={this.reset}>取消</el-button>
</el-form-item>
</el-form>
</div>
)
}
})
