目的:实现使用iview中表单的验证自己想要的结果

结果:网上找到合适方法validator

步骤:

1.在form中设置好要验证的值

            <FormItem label="分类:" prop="MenuClassifyId">
            <Select v-model="formItem.MenuClassifyId">
             <Option :value="11">1111</Option>

            <Option :value="22">222</Option>
            </Select>

2.在vue中data(){}写验证函数。官网有案例:https://www.iviewui.com/components/form

  export default {
    data () {
    var that=this
        const validateMenuClassifyId = (rule, value, callback) => {
         console.log("单个表单验证")
           console.log(value) //value是对应的ormItem.MenuClassifyId值
                if (value === ''||value ===0) {     //写逻辑从而达到验证值
                    callback(new Error('请选择分类!'));   //callback()暂时理解为回调,验证后回调给界面的信息
                } else {
                    callback();   //默认回调,没有异常值
                }
            };

 

3.在form中的验证调用2的函数。

MenuClassifyId:[

                        //required显示*号,validator验证回到的函数,validateMenuClassifyId自定义验证函数,

                   //trigger暂时理解为验证值是否为空                

   { required: true,validator: validateMenuClassifyId, trigger: 'blur' }
                    ],

4.这样设置好,form表单就会自动输入提交时验证函数validateMenuClassifyId。

     that.$refs[name].validate((valid) => {
           console.log(valid)  //验证全部表单,validateMenuClassifyId回到有错误则会valid返回false。
                    if (valid) {}else{}

}

疑问:在验证中如果每个form验证调用同一个验证时只会验证一次。

            <FormItem label="简介:">
            <Input v-model="formItem.About" placeholder="简短介绍" prop="Name"></Input>
            </FormItem>
             <FormItem label="销售量:" >
             <InputNumber v-model="formItem.Sale" disabled  prop="Name"></InputNumber>
            </FormItem>

///////////////

                    Name: [
                        { required: true, message: '不能为空!', trigger: 'blur' }
                    ],

官网给出了一个详细的验证说明:https://github.com/yiminghe/async-validator

但是我不会用。只能网上一点一点找方法最后找到上面自己提炼后的方法。

看不懂的可以留言。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐