Detailed explanation of rules verification rules

Provides a lightweight, extensible template verification rules. These rules can be passedv-modelAdded in the binding.modifierto use, for example

Here are some common verification rules:

• required: Check if the value is not empty
• email: Check whether the value meets the email format
• min: Check whether the value is greater than or equal to the specified minimum value
• max: Check whether the value is less than or equal to the specified maximum value
• minLength: Check whether the length of the value is greater than or equal to the specified minimum length
• maxLength: Check whether the length of the value is less than or equal to the specified maximum length
• numeric: Check whether the value is a number
• regex: Check whether the value meets the specified regular expression

This is used.modifierApply these rules tov-modelAn example of:

<template>
  <div>
    <input ="username" required>
    <input ="email" type="email" required>
    <input ="age" type="number" min="18" max="99" required>
  </div>
</template>

In this example:

• Remove the spaces before and after the input value
• requiredVerify whether the input is not empty
• type="email"Verify whether the input complies with the email format
• Convert input to numbers
• minandmaxVerify whether the input is within the specified range

In addition to these built-in verification rules, you can also use custom verification functions. The check function should return a Boolean value, indicating whether the input is legal, for example:

<template>
  <div>
    <input v-model="password" :class="{ invalid: !validatePassword }">
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: '',
    };
  },
  computed: {
    validatePassword() {
      return  >= 8;
    },
  },
};
</script>

In this example, we use a computed propertyvalidatePassword, it returns a boolean value based on the length of the password. We also bound a class name to the input box.invalid, if the input does not comply with the rules, add this class name to the input box.

Common rules verification rules in front-end Vue:

1. Whether the IP address is legal:

pattern:/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,

2. Whether it is a mobile phone number or a fixed phone number

pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,

3. Is the ID number?

pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,

4. Whether to email

pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,

5. Fill in integers

pattern:/^-?[1-9]\d*$/,

6. Fill in positive integers

pattern:/^[1-9]\d*$/,

7. Lowercase letters

pattern:/^[a-z]+$/,

8. Capital letters

pattern:/^[A-Z]+$/,

9. Case mixing

pattern:/^[A-Za-z]+$/,

10. Multiple 8-digit numeric formats (yyyyMMdd) separated by commas

pattern:/^\d{8}(\,\d{8})*$/,

11. Numbers plus English, without special characters

pattern:/^[a-zA-Z0-9]+$/,

12. The first two digits are numbers and the next one is in English

pattern:/^\d{2}[a-zA-Z]+$/,

13. Password verification (6-20 digits of English letters, numbers or symbols (except spaces), and letters, numbers and punctuation marks contain at least two types)

pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,

14. Chinese verification

pattern:/^[\u0391-\uFFE5A-Za-z]+$/,

Summarize

This is all about this article about rules verification rules. For more related contents of Vue rules verification rules, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!