Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”
Forms and form validation are very common functions, and some common validation is summarized, such as default validation, custom validation, list item validation, and so on.
FormModel form: antdv.com/components/…
Based on using
As shown below, is basic form information, where the form object is passed through Model, the form validation rule is provided through Rules, and the prop property of the FormItem is set to the name of the field to validate.
<template>
<a-form-model
class="m-form"
ref="ruleForm"
:model="form"
:rules="rules"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 14 }"
>
<a-form-model-item label="Name" prop="name">
<a-input v-model="form.name" />
</a-form-model-item>
<a-form-model-item label="Gender" prop="sex">
<a-radio-group v-model="form.sex">
<a-radio value="1">male</a-radio>
<a-radio value="2">female</a-radio>
</a-radio-group>
</a-form-model-item>
<a-form-model-item label="Mobile phone Number" prop="mobile">
<a-input v-model="form.mobile" ref="mobile" placeholder="Please enter your mobile phone number." />
</a-form-model-item>
<a-form-model-item label="Certificate" prop="cardList">
<div v-for="card in form.cardList" :key="card.id" class="card-list">
<a-select v-model="card.idType" placeholder="Please select id type">
<a-select-option :value="1">Id card</a-select-option>
<a-select-option :value="2">passport</a-select-option>
</a-select>
<a-input v-model="card.idNo" placeholder="Employee Identification Number" />
</div>
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button type="primary" @click="onSubmit">submit</a-button>
</a-form-model-item>
</a-form-model>
</template>
<script>
import * as R from "ramda";
export default {
data() {
return {
form: {
name: "".sex: "".mobile: "".cardList: [{id: 1.idType: 1.idName: "Identity card".idNo: "111111" },
{ id: 2.idType: 2.idName: "Passport".idNo: "sd1234" },
{ id: 3.idType: undefined.idName: "".idNo: "" },
{ id: 4.idType: undefined.idName: "".idNo: ""},],},rules: {}}; },methods: {
onSubmit() {
this.$refs.ruleForm.validate((valid) = > {
if (valid) {
alert("Verification successful");
} else {
alert("Verification failed");
return false; }}); ,}}};</script>
<style lang="scss">
.m-form {
.ant-form-item-label {
line-height: 32px;
}
.card-list {
display: flex;
align-items: center;
margin-bottom: 24px;
.ant-select {
width: 218px;
margin-right: 16px; }}}</style>
Copy the codeThe default calibration
The Form component provides basic Form validation capabilities that can be handled in most cases. You can check the official website for specific configuration items. The following lists only the basic configuration required, message, and trigger.
<script>
export default {
data() {
return {
rules: {
name: [{required: true.// This parameter is mandatory
message: "Please enter user name".// Verify copy
trigger: ["change"."blur"].// Trigger time, can be array or string
},
{
min: 3.// Minimum length
max: 5.// Maximum length
message: "The length of the name should be between 3 and 5.".trigger: "blur"],},sex: [{required: true.message: "Please select a gender.".trigger: "change",},],},}; }};</script>
Copy the codeCustom check
For special cases, you can also use a custom function validator. As follows, take the mobile phone number and id information as an example to verify, where the mobile phone number validateMobile not only verifies the required, but also verifies the format, and can also locate the specific position focus() after the error is reported, which is convenient to modify.
<script>
export default {
data() {
// Verify mobile phone number
let validateMobile = (rule, value, callback) = > {
if (R.isNil(value) || R.isEmpty(value)) {
// Locate the error data box
this.$refs.mobile.focus();
return callback(new Error("Please enter your mobile phone number."));
}
// Check the format
let reg = /^1[0-9]\d{9}$/;
if(! reg.test(value)) {this.$refs.mobile.focus();
return callback(new Error("Please enter the correct mobile phone number")); }};// Verify the certificate
let validateCard = (rule, list, callback) = > {
let flag = false;
if(! (list && list.length)) { flag =true;
} else {
R.forEach((o) = > {
if(! o.idType || ! o.idNo) flag =true;
}, list);
}
if (flag) {
callback(new Error("Please fill in the id card information")); }};return {
rules: {
mobile: [{required: true.validator: validateMobile, trigger: "change"},].cardList: [{required: true.validator: validateCard, trigger: "change"},],}}; }};</script>
Copy the codeThe overall check effect is shown in the figure below, and the error message will be displayed at the bottom of the corresponding form:
List item check
The above verification of certificate information is the whole verification, as long as there is one does not meet the conditions, the whole list items will be marked red, so that the experience is relatively poor. Normal or not, so you still have to check each item in the list individually.
The key configuration is :prop=”cardList.${index}. IdType “. A concatenated string that handles data in array or object form. And it must correspond to the validation rule :rules=” rules.idtype “, otherwise it will not work.
<template>
<div
v-for="(card, index) in form.cardList"
:key="card.id"
class="card-list card-list2"
>
<a-form-model-item
:label=${index + 1} '"
:prop="`cardList.${index}.idType`"
:rules="rules.idType"
>
<a-select v-model="card.idType" placeholder="Please select id type">
<a-select-option :value="1">Id card</a-select-option>
<a-select-option :value="2">passport</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item
:prop="`cardList.${index}.idNo`"
:rules="rules.idNo"
>
<a-input v-model="card.idNo" placeholder="Employee Identification Number" />
</a-form-model-item>
</div>
</template>
<script>
export default {
data() {
return {
rules: {
idType: [{required: true.message: "Please select id type".trigger: "change"],},idNo: [{required: true.message: "Please fill in your id number.".trigger: "change",},],},}; }}Copy the code