preface

Why do form validation? What is the harm of not verifying forms? How do YOU validate forms? With these questions in mind, let’s take a look at how to implement form validation in VUE3

---

I. Significance of form verification

• If the value entered by the user in the input box or the required option is not selected, the next operation is not triggered
• User information can be set according to certain rules to facilitate unified management
• Form verification can effectively avoid dangerous input by lawbreakers

How to verify the form?

Here we use a third-party package dedicated to form validation: Vee-validate supports Vue3.0

1. Prepare

Open any terminal in the root directory of the project and run the NPM I [email protected] command

Step 3.

• Use the third package providedFormThe tag wraps around the entire area of the form
• Using third-party packages providedFiledThe label will enter the boxinputreplace
• If the form requires validation, it mustnameattribute
• Pass the verification rulerulesBind to what you want to validateFieldOn the label
• When the user enters something that does not pass the validation rule, the error message is fromFormDeconstructed from the slot on the label

Use 3.

In any.vue ending file

I’m using the button component and the message prompt component that I wrapped earlier, so you can click on the link and see how it’s wrapped

The code is as follows (example) :

<template>
  <Form class="form" ref="target" v-slot="{ errors }">
    <div class="form-item">
      <div class="input">
        <i class="iconfont icon-user"></i>
        <Field autocomplete="off" type="text" name="account" :rules="checkAccount" placeholder="Please enter user name or mobile phone number." />
      </div>
      <div class="error" v-if="errors.account"><i class="iconfont icon-warning" />{{ errors.account }}</div>
    </div>

    <div class="form-item">
      <div class="input">
        <i class="iconfont icon-lock"></i>
        <Field type="password" v-model="form.password" name="password" :rules="checkPwd" placeholder="Please enter your password" />
      </div>
      <div class="error" v-if="errors.password"><i class="iconfont icon-warning" />{{ errors.password }}</div>
    </div>
    <my-button type="plain" size="mini" @click="handleLogin" href="javascript:;" class="btn"</my-button> </Form> </template> <script> import {Form, Field} from'vee-validate'
import { ref, reactive, getCurrentInstance } from 'vue'

export default {
  name: 'App',
  components: { Field, Form },
  setup() {const instance = getCurrentInstance() const target = ref(null) Null, // password: null}) const checkAccount = value => {// value is the value of the form element to be used in the future // 1. Mandatory // 2. 6-20 characters, must start with a letter // How to feedback verification success or failuretrueSuccess, failure in other cases, return the cause of failure.if(! value)return 'Please enter a user name'
      if(! / ^ [a zA - Z] {5, 9} $\ w /.test(value)) return 'Starts with a letter and is 6-20 characters long'
      return true} // password validation rule const checkPwd = value => {if(! value)return 'Please enter your password'
      if(! Aiaa / ^ \ w {6} $/.test(value)) return 'Password is 6-24 characters long'
      return true} const handleLogin = async () => {const valid = await target.value.validate()if(valid) {// The form is valid, the interface is invoked to log in // The following is the demo codereturn instance.proxy.$message({ text: 'Verified'.type: 'success'}}})return { target, form, checkAccount, checkPwd, handleLogin }
  }
}
</script>

<style scoped lang="less"Box-sizing: border-box; box-sizing: border-box; } .form { margin: 100px auto; padding: 50px; width: 500px; border: 1px solid#ccc;
  &-item {
    margin-bottom: 28px;
    .input {
      position: relative;
      height: 40px;
      outline: none;
      > i {
        width: 35px;
        height: 35px;
        background: #cfcdcd;
        color: #fff;
        position: absolute;
        left: 0;
        top: 0;
        text-align: center;
        line-height: 34px;
        font-size: 18px;
      }
      input {
        padding-left: 44px;
        border: 1px solid #cfcdcd;
        outline: none;
        height: 36px;
        line-height: 36px;
        width: 100%;
        &.error {
          border-color: #ff3040;
        }
        &.active,
        &:focus {
          border-color: skyblue;
        }
      }
    }
    > .error {
      position: absolute;
      font-size: 12px;
      line-height: 28px;
      color: #ff3040;
      i {
        font-size: 14px;
        margin-right: 2px;
      }
    }
  }
  .btn {
    float: right;
  }
}
</style>

Copy the code

Note: The above is the demo code

• If there are many verification rules, you can manage them in a separate file and import them to the required file
• You can write down the steps to be performed after the verification is passed according to actual requirements.

Third, the result demonstration

---

conclusion

Rome was not built in a day.