vue實現(xiàn)表單單獨移除一個字段驗證

更新時間：2022年03月21日 09:04:04 作者：friend_ship

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)表單單獨移除一個字段驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)表單單獨移除一個字段驗證的具體代碼，供大家參考，具體內(nèi)容如下

下面的代碼以登錄功能為例。

功能描述：用戶輸入密碼時，失去焦點進(jìn)行密碼校驗，當(dāng)輸入有誤時，顯示錯誤提示信息；只要密碼值發(fā)生了變化，錯誤提示信息就移除。

通過watch監(jiān)控password字段，實現(xiàn)實時移除。

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語法開發(fā)，代碼如下：

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引入進(jìn)來
? ? ? ? })
?
? ? ? ? const formRef = ref(null);
? ? ? ??
? ? ? ? const submit = () ?=> {
? ? ? ? ? ? // 表單校驗
? ? ? ? ? ? const formValidate = await new Promise(resolve => {
? ? ? ? ? ? ? ? (formRef as any).value.validate((valid: boolean) => resolve(valid));
? ? ? ? ? ? });
?
? ? ? ? ? ? if(!formValidate) return;
? ? ? ? ? ? // 表單校驗通過后進(jìn)行的邏輯
? ? ? ? }
?
? ? ? ? const reset = () => {
? ? ? ? ? ? ?Object.keys(formState).map((key: string) => formState[key] = (initFormState as any)[key]);
? ? ? ? }
? ??
? ? ? ? // 監(jiān)控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>
? ? ? ? )
? ? }
?
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: