表单验证正确输入无法通过

表单里面明明有正确的输入,但是一直无法通过验证,并且提示输入内容,但是console能显示数据。

原因:

1:v-model的字段名,prop字段名和rules中的字段名必须一致!

2:表单与v-model是否正确绑定!

3:如果data中的form中包含对象,那么rules中的验证规则也需要和form一致!!!

我的是第3中情况,以下是参考代码:

<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
<el-row>
    <el-col :span="12">
        <el-form-item label="用户昵称" prop="sysUser.nickName">
            <el-input v-model="form.sysUser.nickName" placeholder="请输入用户昵称" maxlength="30" />
        </el-form-item>
    </el-col>
    <el-col :span="12">
        <el-form-item label="归属部门" prop="deptId">
            <treeselect v-model="form.sysUser.deptId" :options="deptOptions" :normalizer="normalizer" :show-count="true" placeholder="请选择归属部门" />
        </el-form-item>
    </el-col>
</el-row>
<el-row>
    <el-col :span="12">
        <el-form-item label="手机号码" prop="sysUser.phonenumber">
            <el-input v-model="form.sysUser.phonenumber" placeholder="请输入手机号码" maxlength="11" />
        </el-form-item>
    </el-col>
    <el-col :span="12">
        <el-form-item label="邮箱" prop="sysUser.email">
            <el-input v-model="form.sysUser.email" placeholder="请输入邮箱" maxlength="50" />
        </el-form-item>
    </el-col>
</el-row>
<el-row>
    <el-col :span="12">
        <el-form-item v-if="form.sysUser.userId == undefined" label="用户名称" prop="sysUser.userName">
            <el-input v-model="form.sysUser.userName" placeholder="请输入用户名称" maxlength="30" />
        </el-form-item>
    </el-col>
    <el-col :span="12">
        <el-form-item v-if="form.sysUser.userId == undefined" label="用户密码" prop="sysUser.password">
            <el-input v-model="form.sysUser.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
        </el-form-item>
    </el-col>
</el-row>
</el-form>

form:{
    postIds:[],
    roleIds:[],
    sysUser:{
        userId: null,
        deptId: 100,
        userName: null,
        nickName: null,
        password: null,
        phonenumber: null,
        email: null,
        sex: "0",
        status: "0",
        remark: null,
    }
},
rules: {
    sysUser:{
        nickName: [{required: true, message: '请输入用户名', trigger: 'blur'},
            {
                min: 2,
                max: 10,
                message: '用户昵称长度 2 到 10 个字符',
                trigger: 'blur'
            }
        ],
        phonenumber: [
            {
                required: false,
                message: '',
                trigger: 'blur'
            },
            {
                pattern: /^$|^[1][3,4,5,6,7,8,9][0-9]{9}$/,
                min: 11,
                max: 11,
                message: '请输入正确的手机号',
                trigger: 'blur'
            }
        ],
        email: [
            {
                required: false,
                message: '',
                trigger: 'blur'
            },
            {
                pattern: /^$|^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
                min: 5,
                max: 15,
                message: '请输入正确的邮箱',
                trigger: 'blur'
            }
        ],
        userName: [{required: true, message: '请输入用户名', trigger: 'blur'},
            {
                min: 2,
                max: 10,
                message: '用户名长度 2 到 10 个字符',
                trigger: 'blur'
            }
        ],
        password: [{required: true, message: '请输入密码', trigger: 'blur'},
            {
                min: 6,
                max: 15,
                message: '密码长度在 6 到 15 个字符',
                trigger: 'blur'
            }
        ],
    }
},
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值