el-form前端表单校验步骤详细

Y.喜乐平安

于 2022-10-20 10:48:12 发布

阅读量5.6k

点赞数 2

分类专栏：学习文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/YLJ25800/article/details/127422524

版权

el-form前端表单校验步骤详细

(1)，Form组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可。

<el-form :model="formData" :rules="rules" ref="form">
    <el-form-item label="活动名称" prop="name">
        <el-input v-model="formData.name" />
    </el-form-item>
</el-form>
<el-button @click="submit">提交</el-button>

(2)，data->return里面加上formData,在这里写上限定条件，通过rules属性传入约定的验证规则

<script>
    export default {
        return {
            name:''
        },
        const nameValidator = (rule,value,callback)=>{ 校验内容 },
        rules:{
            name:[
                { required: true(不填的时候提示不能为空), message: '请输入活动名称', trigger: 'blur'(失去焦点的时候触发) },
                // 第一条验证复合要求时，才会执行第二条
                {