iview表单校验必填项required时显示xxx is required,或者trigger验证不刷新问题

使用iview中的From组件时,如果需要的表单项目为必填项,通常可以使用直接添加required或者在rules中添加required的方式来使其检验为必填项。
iview文档网址:
http://v4.iviewui.com/docs/introduce
iview文档
1.方法一:直接添加required

<template>
    <Form ref="form" :model="form" :rules="rule">
    	<FormItem prop="user" required>
    		<Input type="text" v-model="form.user" placeholder="Username"></Input>
    	</FormItem>
    </Form>
</template>
<script>
    export default {
        data () {
            return {
                form: {
                    user: ''
                },
            }
        }
    }
</script>

此时不填写的校验信息为:user is required
2.方法二:在rules中添加required

<template>
    <Form ref="form" :model="form" :rules="rule">
    	<FormItem prop="user">
    		<Input type="text" v-model="form.user" placeholder="Username"></Input>
    	</FormItem>
    </Form>
</template>
<script>
    export default {
        data () {
            return {
                form: {
                    user: ''
                },
                ruleInline: {
                    user: [
                        { required: true, message: 'Please fill in the user name', trigger: 'blur' }
                    ],
                }
            }
        },
        methods: {
        }
    }
</script>

此时不填写的校验信息为:Please fill in the user name

但注意两个方式不要同时使用,即如果设置了rules规则就不要再在FormItem上添加required,不然可能导致:
1.设置的trigger不触发,不能自动校验,验证不刷新
或者
2.不显示预期校验信息,而显示默认校验信息 xxx is required ,
等问题。具体原因不详,欢迎大佬指点。

可能是因为你没有在表单中设置 `prop` 属性,或者设置了错误的 `prop` 属性。`prop` 属性用于唯一标识表单,从而触发表单验证。 另外,如果你使用了 `rules` 属性来设置表单验证规则,可以考虑使用 `validate` 方法触发表单验证,而不是 `trigger` 方法。`validate` 方法可以同验证整个表单,而 `trigger` 方法只能验证当前表单。 以下是一个示例代码: ``` <template> <Form :model="form" :rules="rules" ref="formRef"> <FormItem label="用户名" prop="username"> <Input v-model="form.username" /> </FormItem> <FormItem label="密码" prop="password"> <Input type="password" v-model="form.password" /> </FormItem> <FormItem> <Button type="primary" @click="submitForm">提交</Button> </FormItem> </Form> </template> <script> import { Form, FormItem, Input, Button } from 'iview' export default { components: { Form, FormItem, Input, Button }, data () { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' } ] } } }, methods: { submitForm () { this.$refs.formRef.validate(valid => { if (valid) { // 表单验证通过,可以进行提交操作 console.log('表单验证通过') } else { // 表单验证不通过,需要给出错误提示 console.log('表单验证不通过') } }) } } } </script> ``` 在上面的示例代码中,我们在表单中设置了 `prop` 属性,并且在 `rules` 属性中设置了验证规则。在提交表单,我们使用 `validate` 方法触发表单验证,并根据验证结果进行相应的操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值