vue表单单独移除一个字段验证

时间:2022-05-28 friend_ship 人气:0

下面的代码以登录功能为例。

功能描述：用户输入密码时，失去焦点进行密码校验，当输入有误时，显示错误提示信息；只要密码值发生了变化，错误提示信息就移除。

通过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>
        )
    }
 
})

加载全部内容