el-form 表单的校验

最新推荐文章于 2025-03-07 15:53:14 发布
最新推荐文章于 2025-03-07 15:53:14 发布
阅读量2w 收藏 136
点赞数 33
分类专栏： vue 文章标签： elementui element-plus
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31126175/article/details/121704069
版权
本文详细介绍了Vue.js中el-form组件的规则绑定、对象校验、数组校验以及自定义校验方法的使用，包括如何处理对象数组的校验、多条件校验逻辑等，并提供了丰富的代码示例。同时，探讨了v-if/v-show在表单中的应用以及rules关键字的详细说明。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

form

rules 绑定

  1. 绑定到el-form

    <template>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="age" prop="age">
            <el-input v-model.number="form.age" type="age"></el-input>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
const checkAge = (rule, value, callback) => {
    console.warn('checkAge');
    if (value < 18) {
        callback(new Error('Age must be greater than 18'));
    } else {
        callback();
    }
};
export default {
    data() {
        // const checkAge = (rule, value, callback) => {
        //     console.warn('checkAge');
        //     if (value < 18) {
        //         callback(new Error('Age must be greater than 18'));
        //     } else {
        //         callback();
        //     }
        // };
        return {
            form: {
                age: ''
            },
            rules: {
                age: [
                    { required: true, message: 'age is required' },
                    { type: 'number', message: 'age must be a number' },
                    { validator: checkAge, trigger: ['blur', 'change'] }
                ]
            }
        };
    }
};
</script>

    checkAge 可以写到data里面或者export default 外面

    缺点：不能与其他data中的值关联校验。

  2. 绑定到el-form-item

    <template>
    <el-form ref="form" :model="form" label-width="100px">
        <el-form-item
            label="name"
            prop="name"
            :rules="[
                { required: true, message: 'name is required' },
                { type: 'string', message: 'name must be a string' },
                { validator: checkName, trigger: ['blur'] }
            ]"
        >
            <el-input v-model="form.name"></el-input>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
export default {
    data() {
        return {
            form: {
                name: '',
                age: ''
            },
            realName: 'zhangsan'
        };
    },
    methods: {
        checkName(rule, value, callback) {
            console.warn('checkName');
            if (value.length < 6 || value.length > 10) {
                callback(new Error('name 长度6～10'));
            } else if (!value.startsWith(this.realName)) {
                callback(new Error(`必须以 ${this.realName} 开头`));
            } else {
                callback();
            }
        }
    }
};
</script>

    校验方法需写到methods中，🉑️与其他data中的值关联校验。

对象校验

  1. 一行

    image-20211203162810239

    缺点：校验不通过时，所有输入框变红。

    <template>
    <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="地址" prop="origin">
            <el-row :gutter="10">
                <el-col :span="8">
                    <el-input v-model="form.origin.protocol" placeholder="协议"></el-input>
                </el-col>
                <el-col :span="8">
                    <el-input v-model="form.origin.hostname" placeholder="域名"></el-input>
                </el-col>
                <el-col :span="8">
                    <el-input v-model.number="form.origin.port" placeholder="端口"></el-input>
                </el-col>
            </el-row>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
export default {
    data() {
        return {
            form: {
                origin: {
                    protocol: '',
                    hostname: '',
                    port: ''
                }
            },
            rules: {
                origin: {
                    type: 'object',
                    required: true,
                    fields: {
                        protocol: [
                            { required: true, message: '协议必填', trigger: 'blur' },
                            { type: 'enum', enum: ['http', 'https'], message: '不在枚举范围', trigger: 'blur' }
                        ],
                        hostname: [
                            { required: true, message: '域名必填', trigger: 'blur' },
                            {
                                message: '域名不正确',
                                pattern:
                                    /^(?=^.{3,255}$)[*a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/
                            }
                        ],
                        port: [
                            { type: 'integer', required: true, message: '端口必填', trigger: 'blur' },
                            { type: 'integer', min: 1, max: 30000, message: '端口范围1～30000', trigger: 'blur' }
                        ]
                    }
                }
            }
        };
    }
};
</script>
<style scoped>
.el-row + .el-row {
    margin-top: 10px;
}
</style>

  2. 每个输入框单独校验

    image-20211203165036004

    <template>
    <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="地址">
            <el-row :gutter="10">
                <el-col :span="8">
                    <el-form-item prop="origin.protocol">
                        <el-input v-model="form.origin.protocol" placeholder="协议"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="origin.hostname">
                        <el-input v-model="form.origin.hostname" placeholder="域名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="origin.port">
                        <el-input v-model.number="form.origin.port" placeholder="端口"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
export default {
    data() {
        return {
            form: {
                origin: {
                    protocol: '',
                    hostname: '',
                    port: ''
                }
            },
            rules: {
                origin: {
                    protocol: [
                        { required: true, message: '协议必填', trigger: 'blur' },
                        { type: 'enum', enum: ['http', 'https'], message: '不在枚举范围', trigger: 'blur' }
                    ],
                    hostname: [
                        { required: true, message: '域名必填', trigger: 'blur' },
                        {
                            message: '域名不正确',
                            pattern: /^(?=^.{3,255}$)[*a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/
                        }
                    ],
                    port: [
                        { type: 'integer', required: true, message: '端口必填', trigger: 'blur' },
                        { type: 'integer', min: 1, max: 30000, message: '端口范围1～30000', trigger: 'blur' }
                    ]
                }
            }
        };
    }
};
</script>

  3. 一行，为每个输入框进行校验，但是校验文本只显示一个

    image-20211217134508302

数组校验

  1. 普通

    image-20211202141650242

    <template>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="favoriteFood" prop="favoriteFood">
            <el-checkbox-group v-model="form.favoriteFood">
                <el-checkbox label="apple">苹果</el-checkbox>
                <el-checkbox label="banana">香蕉</el-checkbox>
                <el-checkbox label="orange">橙子</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
export default {
    data() {
        const checkFavoriteFood = (rule, value, callback) => {
            console.warn('checkFavoriteFood', value);
            if (!value.includes('apple')) {
                callback(new Error('必须有苹果'));
            } else {
                callback();
            }
        };
        return {
            form: {
                name: '',
                age: '',
                favoriteFood: []
            },
            rules: {
                favoriteFood: [
                    { required: true, message: 'favoriteFood is required' },
                    // { type: 'array', message: '至少有选两项', min: 2 },
                    // { type: 'array', message: '只能选两项', len: 2 },
                    { type: 'array', message: '最多选两项', max: 2 },
                    { validator: checkFavoriteFood, trigger: ['blur', 'change'] }
                ]
            }
        };
    }
};
</script>

  2. 多行

    image-20211202161912494

    <template>
    <el-form ref="form" :model="form" label-width="120px">
        <el-form-item
            v-for="(domain, index) in form.domains"
            :key="index"
            :label="'Domain' + index"
            :prop="`domains.${index}.value`"
            :rules="{
                required: true,
                message: 'domain can not be null',
                trigger: 'blur'
            }"
        >
            <el-row :gutter="10">
                <el-col :span="20">
                    <el-input v-model="domain.value"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-button @click.prevent="removeDomain(index)" icon="el-icon-delete" type="danger">
                        Delete
                    </el-button>
                </el-col>
            </el-row>
        </el-form-item>
        <el-form-item>
            <el-button @click="addDomain" icon="el-icon-plus">New domain</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
export default {
    data() {
        return {
            form: {
                domains: [
                    {
                        value: ''
                    }
                ]
            }
        };
    },
    methods: {
        removeDomain(index) {
            this.form.domains.splice(index, 1);
            if (!this.form.domains.length) this.addDomain();
        },
        addDomain() {
            this.form.domains.push({
                value: ''
            });
        }
    }
};
</script>
<style scoped>
.el-row + .el-row {
    margin-top: 10px;
}
</style>

    image-20211202164117273

    用slot只展示第一行label

    <template v-if="!index" v-slot:label>Domain</template>

  3. 数组中对象

    image-20211203172647069

    <template>
    <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item v-for="(item, index) in form.domains" :key="index">
            <template v-if="!index" v-slot:label>地址</template>
            <el-row :gutter="10">
                <el-col :span="7">
                    <el-form-item :prop="`domains.${index}.protocol`" :rules="rules.domains.protocol">
                        <el-input v-model="item.protocol" placeholder="协议"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item :prop="`domains.${index}.hostname`" :rules="rules.domains.hostname">
                        <el-input v-model="item.hostname" placeholder="域名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item :prop="`domains.${index}.port`" :rules="rules.domains.port">
                        <el-input v-model.number="item.port" placeholder="端口"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-button @click.prevent="removeDomain(index)" icon="el-icon-delete" type="danger">
                        Delete
                    </el-button>
                </el-col>
            </el-row>
        </el-form-item>
        <el-form-item>
            <el-button @click="addDomain" icon="el-icon-plus">New domain</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
export default {
    data() {
        return {
            form: {
                domains: [
                    {
                        protocol: '',
                        hostname: '',
                        port: ''
                    }
                ]
            },
            rules: {
                domains: {
                    protocol: [
                        { required: true, message: '协议必填', trigger: 'blur' },
                        { type: 'enum', enum: ['http', 'https'], message: '不在枚举范围', trigger: 'blur' }
                    ],
                    hostname: [
                        { required: true, message: '域名必填', trigger: 'blur' },
                        {
                            message: '域名不正确',
                            pattern: /^(?=^.{3,255}$)[*a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/
                        }
                    ],
                    port: [
                        { type: 'integer', required: true, message: '端口必填', trigger: 'blur' },
                        { type: 'integer', min: 1, max: 30000, message: '端口范围1～30000', trigger: 'blur' }
                    ]
                }
            }
        };
    },
    methods: {
        removeDomain(index) {
            this.form.domains.splice(index, 1);
            if (!this.form.domains.length) this.addDomain();
        },
        addDomain() {
            this.form.domains.push({
                protocol: '',
                hostname: '',
                port: ''
            });
        }
    }
};
</script>


    rules: {
                domains: {
                    type: 'array',
                    required: true,
                    message: '至少有一个地址',
                    defaultField: {
                        type: 'object',
                        fields: {
                            protocol: [
                                { required: true, message: '协议必填', trigger: 'blur' },
                                { type: 'enum', enum: ['http', 'https'], message: '不在枚举范围', trigger: 'blur' }
                            ],
                            hostname: [
                                { required: true, message: '域名必填', trigger: 'blur' },
                                {
                                    message: '域名不正确',
                                    pattern:
                                        /^(?=^.{3,255}$)[*a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/
                                }
                            ],
                            port: [
                                { type: 'integer', required: true, message: '端口必填', trigger: 'blur' },
                                { type: 'integer', min: 1, max: 30000, message: '端口范围1～30000', trigger: 'blur' }
                            ]
                        }
                    }
                }
            }

  4. demo1

    image-20211217174751352

    需求：

    实现向对象中加key、value的操作。

    维护一个数组arr:[{key:'',value:''}] 对数组中的key进行单独校验 使其不能重复。

    思路：

    1. 维护一个keyList，当input-key的输入框focus时，我们拿到除当前输入框之外的其他key。用于当前input的输入框校验。

    2. 提交时，keyList要维护所有重复的key，用于每个input判断。

    3. 删除时，也要⚠️，当在input focus 后删除，

    如果遍历时绑定的:key='index' 那么删除时，由于索引位置的变化，其实导致了删除时，其位置后面的数据都变化了。

    由于keyList绑定的还是之前focus时的keyList，由于数据变化，再次走校验，导致校验不正常。

    Dec-20-2021 15-33-10

    • blur时清空keyList

    • 删除时重新校验，这里需要注意需要nextTick

      deleteLabel(index) {
  this.nodeLabelForm.labelList.splice(index, 1)
  // 校验时 keyList要存重复的key
  this.$nextTick(() => {
    // 不使用nextTick，会导致报错
    this.keyList = this.getRepeatElement()
    this.$refs.form.validate()
  })
},

      image-20211220155017919

      报错原因：因为数据变化时，页面还没有发生变化，导致这一项还是需要校验的，但是数据已经没有了。所以需要$nextTick

    • 绑定唯一的key解决。

    完整代码

    <template>
    <div>
        <el-form ref="form" :model="nodeLabelForm" size="small" label-position="top">
            <el-form-item label="标签">
                <el-row v-for="(item, index) in nodeLabelForm.labelList" :key="index" :gutter="10">
                    <div v-show="item.value !== null">
                        <el-col :span="11">
                            <el-form-item
                                :prop="`labelList.${index}.key`"
                                :rules="{
                                    trigger: ['change', 'blur'],
                                    validator: validateKey
                                }"
                            >
                                <el-input
                                    v-model.trim="item.key"
                                    clearable
                                    placeholder="键"
                                    @focus="keyFocus(index)"
                                    @blur="keyBlur"
                                />
                            </el-form-item> 
                        </el-col>
                        <el-col :span="11">
                            <el-form-item>
                                <el-input v-model.trim="item.value" clearable placeholder="值" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <el-tooltip effect="light" content="删除" placement="top">
                                <i class="el-icon-delete delete-icon" @click="deleteLabel(index)"></i>
                            </el-tooltip>
                        </el-col>
                    </div>
                </el-row>
                <el-row>
                    <el-button
                        type="primary"
                        icon="el-icon-plus"
                        :disabled="addLabelDisabled"
                        @click="addLabel"
                    >添加标签</el-button>
                </el-row>
            </el-form-item>
        </el-form>
        <el-button @click="config.visible = false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="confirm">确定</el-button>
    </div>
</template>
<script>

export default {
    name: 'EditVolumeForm',
    data() {
        return {
            loading: false,
            nodeLabelForm: {
                name: '',
                labelList: [{ key: '', value: '' }]
            },
            keyList: []
        };
    },
    computed: {
        addLabelDisabled() {
            return this.nodeLabelForm.labelList.some(item => {
                return !item.key
            })
        }
    },

    methods: {
        //  rules
        validateKey(rule, value, callback) {
            console.warn('校验', this.keyList);
            if (value === '') {
                callback(new Error('无法添加空的 key'))
            } else if (this.keyList.includes(value)) {
                callback(new Error('无法添加重复的 key'))
            } else {
                callback()
            }
        },
        keyFocus(i) {
            // focus 时，找到非当前输入框的 其他key,用于校验
            this.keyList = this.nodeLabelForm.labelList.filter((item, index) => index !== i).map(item => item.key)
        },
        keyBlur() {
            this.keyList = []
        },
        // 标签
        addLabel() {
            this.nodeLabelForm.labelList.push({
                key: '',
                value: ''
            })
        },
        deleteLabel(index) {
            this.nodeLabelForm.labelList.splice(index, 1)
        },
        clearValidate() {
            if (this.$refs.form) {
                this.$refs.form.clearValidate()
            }
        },
        getRepeatElement() {
            const allKeyList = this.nodeLabelForm.labelList.map(item => item.key)
            const noRepeat = []
            const repeat = []
            allKeyList.forEach(item => {
                noRepeat.includes(item) ? repeat.push(item) : noRepeat.push(item)
            })
            return repeat
        },
        async confirm() {
            // 校验时 keyList要存重复的key
            this.keyList = this.getRepeatElement()
            this.$refs.form.validate((valid) => {
                if (valid) {
                    alert('submit!')
                } else {
                    console.log('error submit!!')
                    return false
                }
            })

        }
    }
};
</script>
<style lang="scss" scoped>
.tips {
    color: rgba($color: #00102f, $alpha: 0.45);
}
.el-row + .el-row {
    margin-top: 10px;
}
.mb-20 {
    margin-bottom: 20px;
}
.accessModes {
    .el-radio--small.is-bordered {
        height: 50px;
    }
    span {
        display: block;
        margin-left: 20px;
    }
}
.storage {
    display: flex;
    .storage-slider {
        flex: 1;
    }
    .storage-unit {
        width: 20px;
        margin-left: 10px;
        vertical-align: middle;
    }
}
</style>

validate 方法

官方

this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
})

Async/await

await vaild = this.$refs[formName].validate().catch(err => {
        return err;
    });

// 将 element-ui 或 mtd 的 validate 变成一个始终是resolved状态的promise, 不用写try-catch或者回调函数的形式
export const pifyValidate = validateFn => {
    return new Promise(resolve => {
        validateFn(valid => {
            resolve(valid);
        });
    });
};

validateField方法

可用于分步校验

Async/await

// 将 element-ui 的 validateField 多个参数校验时，返回 校验成功true｜失败false
// 使用方法：
// const vaild = await pifyValidateField(this.$refs[formName].validateField, ['name', 'region']);
export const pifyValidateField = async (validateFieldFn, args) => {
  const promiseList = args.map(item => {
    return new Promise(resolve => {
      validateFieldFn(item, errMsg => {
        errMsg ? resolve(errMsg) : resolve()
      })
    })
  })
  const msgArr = await Promise.all(promiseList)
  const errMsgArr = msgArr.filter(item => item !== undefined)
  return !errMsgArr.length
}

form中的v-if/v-show

涉及到v-if 的表单，注意要加key

当v-if值由false变true时，校验不触发，因为vue渲染时复用了 必须加key vue2 常见

Vue3 会自动加key 不需要手动加,支持<template> 绑定key ,官方link

分步骤表单用v-show

‼️入坑多次

rules 中的关键字说明

rules官方文档

Type
  • string: 字符串类型（默认值）
  • number: 数字类型
  • boolean:布尔类型
  • method: 函数类型
  • regexp:正则表达式
  • integer: 整型
  • float: 双精度浮点型数字
  • array: 数组类型
  • object: 对象类型
  • enum: 枚举值
  • date: 日期格式
  • url: 网址格式
  • hex: 16进制数字
  • email: 电子邮箱格式
  • any: 任意类型
required

必填字段，即非空验证。如上面实例中的的非空验证，以及邮箱前边的必填符号*，就是这个参数的功劳。

pattern

正则表达式

{ type : "string" , required: true , pattern : /^[a-z]+$/ }
min/max

判断数据大小范围，通常对数字大小范围做校验。对于字符串和数组类型，将根据长度进行比较。

{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
Len

len属性与min、max属性同时出现了，len属性有更高的优先级。

长度验证，如11位手机号码

{type: "number", required: true, len: 11}
enum

枚举值验证

{type: "enum", enum: ['admin', 'user', 'guest']}
whitespace

验证是否只有空格(如果没有该配置，则全空格的输入值也是有效的）。

{
 type: "string",
 message: '只存在空格',
 whitespace:true,
 trigger: ['change', 'blur']
}
transform

有时有必要在验证之前转换值，以强制或以某种方式对其进行清理。为此 transform ，向验证规则添加一个功能。在验证之前，先转换属性，然后将其重新分配给源对象，以更改该属性的值。

{
type: 'string',
required: true,
pattern: /^[a-z]+$/,
transform(value) {
return value.trim();
},
}

//transform:Number
fields

深层规则

object

{
 type: "object", required: true,
 fields: {
   street: {type: "string", required: true},
   city: {type: "string", required: true},
   zip: {type: "string", required: true, len: 8, message: "invalid zip"}
 }
}

array

{
 type: "array", required: true, len: 3,
 fields: {
   0: {type: "string", required: true},
   1: {type: "string", required: true},
   2: {type: "string", required: true}
 }
}

defaultField

{
 type: 'array',
 required: true,
 defaultField: { type: 'url' },
}
message

支持 字符串、html、vue-i18n

validator

可以为指定字段自定义验证函数——这就相当于把前边配置的东西用js按照以前的方式编写验证逻辑了。虽然麻烦点，但是能实现比较复杂的业务逻辑判断。

rule, value, callback, source, options

参考link

link

link

vue2表单校验：添加自定义el-form表单校验规则
l_q_l的专栏
08-27 1497
其中的自定义函数checkPeople，来自定义检查规则。rules:{people:[this.checkPeople(rule, value, callback) //自定义校验方法},//message: '请添加人员',],//自定义验证的逻辑if(!return callback(new Error(`请添加人员`));}else{//判断重复项i++) {j < i;j++) {
el-form-item不显示报错$option；label和input不是行内样式显示；el-form表单校验不生效；el-form表单校验正则
killerdoubie的博客
02-27 1359
el-form-item不显示报错$option;label和input不是同行显示；el-form表单校验不生效；el-form表单校验正则
el-form表单验证
seimeii的博客
08-05 3061
el-form表单验证
el-form 表单验证
生命不息，学习不止
07-17 1297
el-form验证
Element ui form表单校验规则总结
最新发布
weixin_52217243的博客
03-07 1208
自定义表单的校验规则需要使用validator函数，validator函数的参数有三个，其中rule指向该条规则对象，value传入需要校验的字段值，callback执行回调，使用方法是：callback(‘…’);。如果不传参表示验证通过，如果传入值则作为错误提示。<el-form-item label="姓名" prop="name"><input v-model="form.name" type="text" placeholder="请输入姓名">
el-form表单校验
weixin_53917307的博客
03-31 3540
1、局部校验 填写时校验 在<el-form>标签中使用:rules="rules" rules是表单验证规则，为object对象。 rules: { payMode: [//el-form-item标签中的prop { required: true, message: "请选择支付方式", trigger: "change" } ], allongeQuantity: [ { re...
el-form表单多项控制校验；el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
i_am_a_div的博客
06-30 1万+
el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
ElementUI问题:el-form表单校验功能
chenghao13834505361的博客
07-08 1702
ElementUI问题:el-form表单校验功能
el-form表单校验失效，检测不到输入内容
m0_48390697的博客
11-01 2034
el-form表单校验失效，检测不到输入内容检测不到输入内容，很可能是没绑上，尤其是已经输入内容了，还是提示输入为空，这个时候一定要保证对应的数据名称都一样，以官网的例子说明一下。
【Vue项目实战】常见的el-form表单校验整理==＞异步调接口校验手机号唯一性_vue3
2401_84434086的博客
05-09 714
由于项目设置手机号登录，因此需要判断新建账号的手机号唯一。后端可以在添加时报错提示，但是用户友好的方式就是在注册时直接显示’手机号已经被注册‘。（jsx可以进行更多的js逻辑和操作）5）vue：组件之间的通信（props，callback，emit）如果需要修改，直接修改pattern中的正则表达式就可以了。密码一般需要符合一定的要求，并且需要校验两次输入密码相同。4）vue：view——medol之间双向绑定。3）props，单一数据流。2）状态管理（react）3）对象属性（vue）
【Vue项目实战】常见的el-form表单校验整理==＞异步调接口校验手机号唯一性
Sabrina_cc的博客
07-18 4112
本文主要总结elementUI 中el-form的表单校验，手机号，邮箱，密码，并且提供了异步校验手机号唯一性的方法。
vue element el-form多表单验证.txt
09-17
在使用element-ui，想要多个表单同时验证时，可以使用promise的方法进行异步验证取得结果后再进行操作
三分钟细数 el-form 表单校验的坑点，前车之鉴，可助你避坑
热门推荐
本博客纯属个人网络笔记，如对阁下有用，甚喜；否则，关掉即可，不喜勿喷。专心写代码，不做键盘侠！
10-12 1万+
Vue 的 el-form 提供了表单校验功能，通过 :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。通过封装，让前端校验更方便。具体使用过程中，有几个容易出错的地方，本文来整理一下。每一个坑都是笔者亲自趟过的，写完本文后，以后应该不会再踏入相同的坑。...
el-form表单验证的一些方法总结
weixin_39639298的博客
07-08 4566
Form 组件提供了表单验证的功能，只需要通过 属性传入约定的验证规则，并将 Form-Item 的 属性设置为需校验的字段名即可。以一般的form表单为例： 一般在vue中这样来写,就可以对表单进行验证。 如果有一些复杂的验证规则，也可以选择自定义验证, 方式二（表单嵌套） 嵌套的表单,一般业务场景是，有一些表单项需要按照条件显示或者隐藏，data里面的model数据可能会是对象里面套对象的，el-form也同样支持嵌套的验证，写法一般如下：...
el-form前端表单校验步骤详细
YLJ25800的博客
10-20 5755
笔记
＜el-form 表单验证
kwame211的博客
12-09 396
<!-- 表单 --> <el-form ref="rulesForm" :rules="rules" :model="rules" label-width="200px"> <el-form-itemprop="username"> <el-inputtype="text"v-model="loginForm.username"autocomplete="off"placeholder="用户名"prefix-...
【element-ui】el-from的表单验证方式以及属性的使用总结
工作的日常记录和平凡的生活分享
04-12 6588
在后台管理系统的开发中，一般都是操作数据，因此表单的使用频率很高，然而表单的输入基本都需要输入验证来确保提交的数据格式符合需求，因此前端的验证很重要，就会避免一些不必要的错误提交到后台去
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值