vue3+async-validator가 양식 확인을 구현하는 방법

vue3 프로젝트 빌드

프로젝트를 만들기 전에 가장 먼저 설명해야 할 것은 우리가 사용하는 버전

• Nodejs: v17.5.0Nodejs：v17.5.0

• pnpm：7.0.0

• Vue：3.2.25

首先我们 Vite 创建一个 vue3 的项目demo，名字就叫 FormValidate, 我们在命令行输入命令

pnpm create vite FormValidate 回车

然后选择 vue

继续回车，说明我们已经初步创建了 FormValidate (表单验证)项目

根据命令行的提示，我们进入项目根目录，然后使用命令 pnpm install 安装项目需要的依赖，当然这里使用 pnpm 是比 npm 或者 yarn 快很多的。

接着，我们启动项目 pnpm run dev, 终端中输出如图内容

 vite v2.9.7 dev server running at:
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
  ready in 954ms.

启动浏览起，输入地址 http://localhost:3000/

ok, 到这里我们已经把项目搭建起来了，结下来我们就开始来说说我们今天主题-表单验证

vue3的表单验证

这里我们使用 async-validator 这是个异步验证表单的插件，在github上有 5k+ 的star，使用的也很广泛，比如 Ant.design，Element UI， Naive UI 等都在使用这个插件，甚至与有些Nodejs后端项目也在使用这个。

先安装一下这个插件，在命令行输入

pnpm install async-validator

这里 async-validator 版本是 4.1.1

1.表单代码

打开项目中的 App.vue 文件，删除多余的文件内容，输入标题 vue3 表单验证，并添加一些初始代码

<template>
    <div class="main">
        <h4>vue3 表单验证</h4>

        <form>
            <div>
                <label class="label">账号</label>
                <input  type="text"  placeholder="请输入账号" class="input" />
            </div>
            <div>
                <label class="label">密码</label>
                <input  tyep="password" type="text" class="input"  placeholder="请输入密码"  />
            </div>

            <div>
                <button>保存</button>
            </div>
        </form>
    </div>
</template>
<script setup>

</script>
<style lang="css">
.main{
    text-align:center;
}
.label {
    padding-right: 10px;
    padding-left: 10px;
    display: inline-block;
    box-sizing: border-box;
    width: 100px;
    text-align: right;
}
.input {
    width: 200px;
    height: 30px;
    margin-top:10px;
}
</style>

是不是看起来有点丑，别急，我们加点css代码，简单的美化一下

<template>
    <div class="main">
        <h4>Vue3表单验证</h4>

        <form class="form-box">
            <div class="form-group ">
                <label class="label">账号</label>
                <input type="text" class="input" placeholder="请输入账号"  />
            </div>
            <div class="form-group">
                <label class="label">密码</label>
                <input  tyep="password" type="text"  placeholder="请输入密码" class="input" />
            </div>

            <div class="form-group">
                <button class="btn ">保存</button>
            </div>
        </form>
    </div>
</template>
<script setup>

</script>
<style scoped>
.main {
    text-align: center;
}
.btn{
    margin: 0;
    line-height: 1;
    padding: 15px;
    height: 30px;
    width: 60px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    background-color: #2080f0;
    white-space: nowrap;
    outline: none;
    position: relative;
    border: none;
    display: inline-flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    user-select: none;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}
.form-box{
    width: 500px;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px;
}
.form-group{
    margin: 10px;
    padding: 10px 15px 10px 0
}
.label {
    padding-right: 10px;
    padding-left: 10px;
    display: inline-block;
    box-sizing: border-box;
    width: 110px;
    text-align: right;
}

.input {
    width: calc(100% - 120px);
    height: 28px;
}
</style>

2.添加验证

2-1. 初始化

引入ref 属性和 async-validator，这里我们给每个 input 框添加 v-model 绑定属性,

// html
<input type="text" v-model="form.account" class="input" placeholder="请输入账号"  />
<input  tyep="password" v-model="form.password" type="text"  placeholder="请输入密码" class="input" />
// script
import { ref } from "vue"
import Schema from &#39;async-validator&#39;;

const form = ref({
    account: null,
    password: null,
})

根据表单的情况，我们定义一个对象，这个对象里面存储了需要校验的对象和校验不通过时的信息

const rules = {
    account: { required: true, message: '请输入账号' },
    password: { required: true, message: '请输入密码' }
}

实例化 Schema, 将 rules 传入 Schema，得到一个 validator

const validator = new Schema(rules)

验证单个表单我们使用 失去焦点事件, 定义一个函数，将这个函数添加到 account input上的失焦事件上

// html
<input v-model="account" type="text" class="input" @blur="handleBlurAccount" placeholder="请输入账号"  />
// script
const handleBlurAccount = () => {}

接着将实例化后的校验器函数写到 handleBlurAccount 中

const handleBlurAccount = () => {
    validator.validate({account: form.value.account}, (errors, fields) => {
        if (errors && fields.account) {
            console.log(fields.account[0].message);
            return errors
        }
    })
}

在account 的 input 中测试，我们可以看到在控制台打印出了 请输入账号 等字

同样的，我们给密码框也添加如下代码

//html
<input v-model="form.password" tyep="password" type="text" @blur="handleBlurPassword"  placeholder="请输入密码" class="input" />
//script
const handleBlurPassword = () => {
    validator.validate({password: form.value.password}, (errors, fields) => {
        if (errors && fields.password) {
            console.log(errors, fields);
            console.log(fields.password[0].message);
            return errors
        }
    })
}

2-2. 多个表单的验证

当然这里校验的只是单个input的，我们接下来说说多个表单的校验，定义一个点击事件为submit，将submit事件添加到button上，当然不要忘记阻止浏览器默认事件

const submit = (e) => {
    e.preventDefault();
    validator.validate(form.value, (errors, fields) => {
        if (errors) {
            for(let key of errors) {
                console.log(key.message);
            }
            return errors
        }
    })
}

2-3. Promise方式验证

了上面的方式，async-validator 还提供 Promise 的方式，我们把 submit 函数中的代码修改为如下

validator.validate(form.value).then((value) => {
        // 校验通过
        console.log(value);
}).catch(({ errors, fields }) => {
    console.log(errors);
    return errors
})

点击保存，同样的，我们可以看到控制台已经打印了错误信息，说明我们写的是合适的

2-4. 正则验证

当然有时候我们会输入邮箱，电话号码等表单，这时候我们就需要添加正则来进行验证了,我们先添加两个表单，并添加失焦事件, 正则验证需要用到 async-validator

pnpm: 7.0.0

Vue: 3.2.25

먼저 vue3 프로젝트 데모를 만듭니다. Vite에서 이름은 FormValidate입니다. 명령줄에

pnpm create vite FormValidate 명령을 입력하고 Enter

를 누른 다음 vue

를 선택하고 계속 누릅니다. Enter를 누르면 처음에 FormValidate(양식 유효성 검사) project

를 생성했음을 나타냅니다. 명령줄 프롬프트에 따라 프로젝트 루트 디렉터리를 입력한 다음 pnpm install 명령을 사용합니다. code>를 사용하여 프로젝트에 필요한 종속성을 설치합니다. 물론 여기서는 npm이나 Yarn보다 훨씬 빠릅니다.

다음으로 pnpm run dev 프로젝트를 시작하면 터미널의 출력은 그림과 같습니다.

<div class="form-group ">
    <label class="label">电话号码</label>
    <input v-model="form.phone" type="text" class="input" @blur="handleBlurPhone"
                    placeholder="请输入电话号码" />
</div>

<div class="form-group ">
    <label class="label">邮箱</label>
    <input v-model="form.email" type="text" class="input" @blur="handleBlurEmail"
                    placeholder="请输入邮箱" />
</div>


const form = ref({
    account: null,
    email: null,
    password: null,
})

const rules = {
    account: { required: true, message: &#39;请输入账号&#39; },
    phone: {
        required: true,
        pattern: /^1\d{10}$/,
        message: "请输入电话号码"
    },
    email: {
        required: true,
        pattern: /^([a-zA-Z0-9]+[_|_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,6}$/,
        message: "请输入邮箱"
    },
    password: { required: true, message: &#39;请输入密码&#39; }
}

const handleBlurPhone = () => {
    validator.validate({ phone: form.value.phone }, (errors, fields) => {
        if (errors && fields.phone) {
            console.log(errors, fields);
            console.log(fields.phone[0].message);
            return errors
        }
    })
}
const handleBlurEmail = () => {
    validator.validate({ email: form.value.email }, (errors, fields) => {
        if (errors && fields.email) {
            console.log(errors, fields);
            console.log(fields.email[0].message);
            return errors
        }
    })
}

🎜 탐색을 시작하고 http://localhost:3000 주소를 입력합니다. /🎜🎜 좋습니다. 여기서 프로젝트를 설정했습니다. 오늘 주제인 양식 유효성 검사🎜🎜vue3 양식 유효성 검사🎜🎜여기에서는 async-validator를 사용합니다. 비동기식입니다. 양식 확인 플러그인은 github에 5,000개 이상의 별표가 있으며 Ant.design, Element UI, Naive UI와 같이 널리 사용됩니다. > 모두가 이 플러그인을 사용하고 있으며 일부 Nodejs 백엔드 프로젝트에서도 이 플러그인을 사용하고 있습니다. 🎜🎜먼저 이 플러그인을 설치하고 🎜🎜pnpm install async-validator🎜🎜를 입력하세요. 여기서 async-validator 버전은 4.1.1🎜입니다.

1. 양식 코드

🎜프로젝트에서 App.vue 파일을 열고, 중복된 파일 내용을 삭제하고, vue3 양식 유효성 검사라는 제목을 입력하고, 초기 코드를 추가하세요🎜

account: { required: true, min:5, max:10, message: '请输入账号' }

🎜 조금 보기 흉하지 않나요? 걱정하지 마세요. CSS 코드를 추가하여 간단히 꾸며보겠습니다.🎜

account: [
    { required: true, min:5, max:10, message: '请输入账号' },
    { required: true, pattern: /[\u4e00-\u9fa5]/, message: '请输入中文账号' }
],

2. 확인 추가

🎜2-1. ref를 소개합니다. code> 속성 그리고 <code>async-validator, 여기서는 각 입력 상자에 v-model 바인딩 속성을 추가합니다. 🎜

field:{
    required: true,
    validator(rule, value, callback){
      return value === '';
    },
    message: '值不等于 "".',
}

🎜폼 상황에 따라 객체를 정의합니다. , 이 개체 내부에는 확인해야 하는 개체와 확인 실패 시 정보가 저장됩니다🎜

<label class="label">
    <span>账号</span>
    <span class="asterisk"> *</span>
</label>
.asterisk{
    color: #d03050;
}

🎜스키마를 인스턴스화하고 규칙을 스키마에 전달하고 유효성 검사기를 가져옵니다🎜

 <span class="asterisk" v-if="getRequired(rules.account)"> *</span>
const getRequired = (condition) => {
    if(Object.prototype.toString.call(condition) === "[object Object]") {
        return condition.required
    } else if (Object.prototype.toString.call(condition) === "[object Array]") {
        let result = condition.some(item => item.required)
        return result
    }
    return false
}

🎜단일 양식을 확인하려면 포커스 이벤트 상실, 함수를 정의하고 계정 입력🎜

<div class="form-group">
    <label class="label">
        <span>账号</span>
        <span class="asterisk" v-if="getRequired(rules.account)"> *</span>
    </label>
    <input v-model="form.account" type="text" maxLength="10" class="input" prop="account" @blur="handleBlurAccount" placeholder="请输入账号" />
    <div class="input feedback" v-if="modelControl[&#39;account&#39;]">{{modelControl[&#39;account&#39;]}}</div>
</div>

.feedback{
    color: #d03050;
    font-size:14px;
    margin-top: 3px;
    text-align:left;
    margin-left:110px;
}

🎜의 아웃 포커스 이벤트에 이 함수를 추가한 다음 인스턴스화된 유효성 검사 함수를 계정 입력의 handlerBlurAccount🎜

const handleBlurAccount = (e) => {
    const prop = e.target.attributes.prop.value
    if (!prop) {
        return false
    }
    validator.validate({ account: form.value.account }, (errors, fields) => {
        if (errors && fields.account) {
            console.log(errors, fields);
            console.log(fields.account[0].message);

            modelControl.value[prop] = fields[prop][0].message
            return errors
        }
        modelControl.value[prop] = null
    })
}
validator.validate(form.value).then((value) => {
        // 校验通过
    console.log(value);
}).catch(({ errors, fields }) => {
    console.log(errors, fields);
    for(let key in fields) {
        modelControl.value[key] = fields[key][0].message
    }
    console.log(modelControl);
    return errors
})

🎜테스트에 작성하면 다음과 같이 할 수 있습니다. 컨트롤에서 계좌 번호를 입력하세요라는 단어가 데스크탑에 인쇄됩니다. 🎜🎜마찬가지로 비밀번호 상자에 다음 코드도 추가합니다🎜

.form-group {
    margin: 2px;
    padding: 10px 15px 3px 0;
    height:57px;
    transition: color .3s ease;
}

🎜2-2. 여러 양식 확인🎜🎜. 물론 여기서는 하나만 확인됩니다. 입력에 대해서는 다음으로 여러 양식의 확인에 대해 이야기하겠습니다. 제출로 클릭 이벤트를 정의하고 버튼에 제출 이벤트를 추가하고 브라우저 기본 이벤트를 차단하는 것을 잊지 마세요. 🎜rrreee🎜2-3. Promise 메소드 검증🎜🎜 async-validator는 Promise 메소드도 제공합니다. 다음과 같이 submit 함수의 코드를 수정합니다. 마찬가지로 콘솔 정보에 오류가 인쇄된 것을 볼 수 있으며 이는 우리가 작성한 내용이 적절함을 나타냅니다🎜🎜🎜🎜2-4. 규칙성 확인🎜🎜물론 이메일, 전화번호, 기타 양식을 입력할 때도 있습니다. 이때 필요합니다. 검증을 위한 규칙성을 추가하려면 먼저 두 개의 양식을 추가하고 누락된 Focus 이벤트를 추가해야 합니다. 정규 검증에서는 async-validator의 속성 패턴을 사용해야 합니다. 규칙에 요구 사항을 충족하는 일반 규칙을 추가하겠습니다. 코드는 다음과 같습니다🎜rrreee🎜물론 테스트에는 문제가 없습니다🎜🎜2- 5. 길이 제어🎜🎜양식 입력 내용의 길이를 제어하려면 min 및 max 속성을 사용하면 됩니다. 예를 들어 계정 양식을 규칙 개체의 계정에 추가합니다. 예를 들어 계정 번호는 다음과 같이 최소 5자, 최대 10자여야 합니다. 사용자 입력을 제어하기 위한 입력의 기본 속성 maxLength="10"🎜🎜2-6. 다중 검증 조건🎜🎜 검증 조건이 여러 개인 경우에도 규칙의 검증 조건을 배열로 작성할 수 있습니다. 예를 들어, 계좌 요구 사항은 중국어로 되어 있어야 하며, 계좌 번호는 5자 이상, 최대 10자여야 합니다. 코드는 다음과 같습니다. 🎜rrreee🎜2-5. 특별한 검증 상황을 충족하기 위해 사용자 정의 검증 기능을 사용할 것입니다. 이때는 이렇게 할 수 있습니다🎜rrreee🎜이 시점에서 기본적으로 vue3의 양식 검증 기능 프로토타입이 나왔습니다. 아래에서는 검증 기능이 개선됩니다.

3.优化完善

之前的表单验证虽然已经做出了，但是校验的提示信息是在控制台，这个很不友好，用户也看不到提示，所以这里我们完善下这部分功能

首先我们在 label 边加一个 "*" 表示必填，并且添加样式,给一个红色，醒目一些

<label class="label">
    <span>账号</span>
    <span class="asterisk"> *</span>
</label>
.asterisk{
    color: #d03050;
}

我们考虑到 rules 对象中 required 属性的作用，这里使用 vue 的条件判断语句 v-if 来判断，先定义一个函数，名字就叫 getRequired，然后将 rules.account,作为参数传进去，这里要重点说明一下，如果考虑封装验证方法，这里可以不用传参，不多说，后面讲到了，我们再说，先看代码

 <span class="asterisk" v-if="getRequired(rules.account)"> *</span>
const getRequired = (condition) => {
    if(Object.prototype.toString.call(condition) === "[object Object]") {
        return condition.required
    } else if (Object.prototype.toString.call(condition) === "[object Array]") {
        let result = condition.some(item => item.required)
        return result
    }
    return false
}

因为 rules.account, 有可能是对象或者数组，这里我们加一个判断区别下，如果传递进来的是对象，我们直接将属性required返回回去，至于required属性是否存在，这里没有必要多判断。 如果传递进来的是数组，我们使用 some 函数获取下结果，然后再返回.

修改 rules.account 的 required 值为false，星号消失，这里只要有一个required 值为true，那么这个星号就显示

我们接着来添加错误信息的显示与隐藏

我们定义一个对象 modelControl，这个对象里面动态存储错误信息，

const modelControl = ref({})

接着给 account 的 input 框添加一个自定义属性 prop, 属性值是 account, 再加一个div显示错误提示信息

<div class="form-group">
    <label class="label">
        <span>账号</span>
        <span class="asterisk" v-if="getRequired(rules.account)"> *</span>
    </label>
    <input v-model="form.account" type="text" maxLength="10" class="input" prop="account" @blur="handleBlurAccount" placeholder="请输入账号" />
    <div class="input feedback" v-if="modelControl[&#39;account&#39;]">{{modelControl[&#39;account&#39;]}}</div>
</div>

.feedback{
    color: #d03050;
    font-size:14px;
    margin-top: 3px;
    text-align:left;
    margin-left:110px;
}

为了动态的显示和隐藏错误信息，我们需要修改失焦事件 和 submit 事件,在事件执行的时候，动态的将值赋予或清除，代码如下

const handleBlurAccount = (e) => {
    const prop = e.target.attributes.prop.value
    if (!prop) {
        return false
    }
    validator.validate({ account: form.value.account }, (errors, fields) => {
        if (errors && fields.account) {
            console.log(errors, fields);
            console.log(fields.account[0].message);

            modelControl.value[prop] = fields[prop][0].message
            return errors
        }
        modelControl.value[prop] = null
    })
}
validator.validate(form.value).then((value) => {
        // 校验通过
    console.log(value);
}).catch(({ errors, fields }) => {
    console.log(errors, fields);
    for(let key in fields) {
        modelControl.value[key] = fields[key][0].message
    }
    console.log(modelControl);
    return errors
})

到这里 表单的动态验证功能基本算是完成了，但是我们发现，每次错误信息的展示都会使得input框跳动，所以还得调整下样式

.form-group {
    margin: 2px;
    padding: 10px 15px 3px 0;
    height:57px;
    transition: color .3s ease;
}

위 내용은 vue3+async-validator가 양식 확인을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!