From 06ee76d0a83854ad7a044689627e0f00a66e5ce5 Mon Sep 17 00:00:00 2001
From: lijh <lijh>
Date: Wed, 19 Jan 2022 18:36:23 +0800
Subject: [PATCH] 表单校验
---
src/components/group/tempFormCheck.vue | 183 ++++++++++++++++++++-------------------------
1 files changed, 81 insertions(+), 102 deletions(-)
diff --git a/src/components/group/tempFormCheck.vue b/src/components/group/tempFormCheck.vue
index 5876d7f..47c5ffa 100644
--- a/src/components/group/tempFormCheck.vue
+++ b/src/components/group/tempFormCheck.vue
@@ -1,59 +1,19 @@
<template>
- <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
- <a-form-model-item ref="name" label="Activity name" prop="name">
- <a-input v-model="form.name" @blur="
- () => {
- $refs.name.onFieldBlur();
- }
- " />
+ <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
+ <a-form-model-item has-feedback label="Password" prop="pass">
+ <a-input v-model="ruleForm.pass" type="password" autocomplete="off" />
</a-form-model-item>
- <a-form-model-item label="Activity zone" prop="region">
- <a-select v-model="form.region" placeholder="please select your zone">
- <a-select-option value="shanghai">
- Zone one
- </a-select-option>
- <a-select-option value="beijing">
- Zone two
- </a-select-option>
- </a-select>
+ <a-form-model-item has-feedback label="Confirm" prop="checkPass">
+ <a-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
</a-form-model-item>
- <a-form-model-item label="Activity time" required prop="date1">
- <a-date-picker v-model="form.date1" show-time type="date" placeholder="Pick a date" style="width: 100%;" />
- </a-form-model-item>
- <a-form-model-item label="Instant delivery" prop="delivery">
- <a-switch v-model="form.delivery" />
- </a-form-model-item>
- <a-form-model-item label="Activity type" prop="type">
- <a-checkbox-group v-model="form.type">
- <a-checkbox value="1" name="type">
- Online
- </a-checkbox>
- <a-checkbox value="2" name="type">
- Promotion
- </a-checkbox>
- <a-checkbox value="3" name="type">
- Offline
- </a-checkbox>
- </a-checkbox-group>
- </a-form-model-item>
- <a-form-model-item label="Resources" prop="resource">
- <a-radio-group v-model="form.resource">
- <a-radio value="1">
- Sponsor
- </a-radio>
- <a-radio value="2">
- Venue
- </a-radio>
- </a-radio-group>
- </a-form-model-item>
- <a-form-model-item label="Activity form" prop="desc">
- <a-input v-model="form.desc" type="textarea" />
+ <a-form-model-item has-feedback label="Age" prop="age">
+ <a-input v-model.number="ruleForm.age" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
- <a-button type="primary" @click="onSubmit">
- Create
+ <a-button type="primary" @click="submitForm('ruleForm')">
+ Submit
</a-button>
- <a-button style="margin-left: 10px;" @click="resetForm">
+ <a-button style="margin-left: 10px" @click="resetForm('ruleForm')">
Reset
</a-button>
</a-form-model-item>
@@ -62,70 +22,89 @@
<script>
export default {
data() {
+ let checkPending;
+ let checkAge = (rule, value, callback) => {
+ clearTimeout(checkPending);
+ if (!value) {
+ return callback(new Error('Please input the age'));
+ }
+ checkPending = setTimeout(() => {
+ if (!Number.isInteger(value)) {
+ callback(new Error('Please input digits'));
+ } else {
+ if (value < 18) {
+ callback(new Error('Age must be greater than 18'));
+ } else {
+ callback();
+ }
+ }
+ }, 1000);
+ };
+ let validatePass = (rule, value, callback) => {
+ if (value === '') {
+ callback(new Error('Please input the password'));
+ } else {
+ if (this.ruleForm.checkPass !== '') {
+ this.$refs.ruleForm.validateField('checkPass');
+ }
+ callback();
+ }
+ };
+ let validatePass2 = (rule, value, callback) => {
+ if (value === '') {
+ callback(new Error('Please input the password again'));
+ } else if (value !== this.ruleForm.pass) {
+ callback(new Error("Two inputs don't match!"));
+ } else {
+ callback();
+ }
+ };
+
+ let validateContent = (rule, value, callback) => {
+ console.log(1111);
+ if (1 == 1) {
+ this.$refs.ruleForm.validateField('checkPass');
+ }
+ callback();
+ };
return {
- labelCol: {
- span: 4
- },
- wrapperCol: {
- span: 14
- },
- other: '',
- form: {
- name: '',
- region: undefined,
- date1: undefined,
- delivery: false,
- type: [],
- resource: '',
- desc: '',
+ ruleForm: {
+ pass: '',
+ checkPass: '',
+ age: '',
},
rules: {
- name: [{
- required: true,
- message: 'Please input Activity name',
- trigger: 'blur'
- },
- {
- min: 3,
- max: 5,
- message: 'Length should be 3 to 5',
- trigger: 'blur'
- },
- ],
- region: [{
- required: true,
- message: 'Please select Activity zone',
+ pass: [{
+ validator: validatePass,
trigger: 'change'
}],
- date1: [{
- required: true,
- message: 'Please pick a date',
+ checkPass: [{
+ validator: validatePass2,
trigger: 'change'
}],
- type: [{
- type: 'array',
- required: true,
- message: 'Please select at least one activity type',
- trigger: 'change',
- }, ],
- resource: [{
- required: true,
- message: 'Please select activity resource',
+ age: [{
+ validator: checkAge,
trigger: 'change'
- }, ],
- desc: [{
- required: true,
- message: 'Please input activity form',
- trigger: 'blur'
}],
+ common: [{
+ validator: validateContent,
+ trigger: 'change'
+ }],
+ },
+ layout: {
+ labelCol: {
+ span: 4
+ },
+ wrapperCol: {
+ span: 14
+ },
},
};
},
methods: {
- onSubmit() {
- this.$refs.ruleForm.validate(valid => {
+ submitForm(formName) {
+ this.$refs[formName].validate(valid => {
if (valid) {
- console.log('11');
alert('submit!');
} else {
console.log('error submit!!');
@@ -133,8 +112,8 @@
}
});
},
- resetForm() {
- this.$refs.ruleForm.resetFields();
+ resetForm(formName) {
+ this.$refs[formName].resetFields();
},
},
};
--
Gitblit v1.9.1