vue+iview的form表单校验总结

这篇文章时关于如何使用iview的form表单校验。主要学习如何使用form校验(以校验文字长度为例),以及如何动态添加校验规则和异步校验。

1.为需要校验的表单添加form标签

<!--注意: ref/rules/model/prop等属性是必须的-->
<Form res="foemRef" :rules="formRules" :model="formData" v-if="liveNode">
    <Row>
        <!--正常校验-->
        <Col>
            <FormItem prop="name">
                <Input v-model="formData.name"></Input>
            </FormItem>
        </Col>
        <!--动态校验-->
        <Col v-if="flag">
            <FormItem prop="age">
                <Input v-model="formData.age"></Input>
            </FormItem>
        </Col>
        <!--异步校验-->
        <Col>
            <FormItem prop="asyName">
                <Input v-model="formData.asyName"></Input>
            </FormItem>
        </Col>
    </Row>
</Form>

2.添加校验规则

formRules: {
    name: [
        {required: true, message: "必输项不能为空", trigger: 'blur'},
        {validator:(rule, value, cb)=>{lenValid(value, 30, cb)}, trigger: 'blur'}
    ],
    age:[], // 注意因为age是根据条件判断是否必输,先留个坑
    asyName: [ // 异步校验,使用change触发,即使不改变输入数据也会在提交数据的时候自动校验一次
        {validator:(rule, value, cb)=>{asyValid(value, cb)}, trigger: 'change'}
    ]
}

3.校验方法

// 校验输入的字符长度
function lenValid(str, num, cb){
    if(str){
        let len = getLen(str)
        if(len > num){
            return cb(new Error('Too Long...'))
        }
    }
    cb()
}

// 获取字符长度
function getLen(str){
    let len = 0
    if(str){
        str = str + '' // to string
        for(let i=0; i<str.length; i++){
            let c = str.charCodeAt(i)
            if((c >= 0x0001 && c <= 0x007e) || (0xff60 < = c && c <= 0xff9f)){
               len++ // 单字节
            }else{
                len += 3 // 汉字
            }
        }
    }
    return len
}

4.动态添加校验规则

有时候需要动态切换一个输入框,比如:上面的age字段,显示的时候是必输项,隐藏的时候是非必输的,这个时候需要动态的修改校验规则

this.liveNode = flase // 先抹去Form,等校验规则修改后在重新渲染
if(this.flag){
   this.formRules.age.unShift({required: true, message: '必输项'})
}else{
    if(this.formRules.age.length > 0){
        this.formRules.age.shift()
    }
}
this.liveNode = true // 重新渲染Form

5.异步校验

有时候输入的内容需要到后台异步校验

// 异步校验 - 成败都要有回调函数,校验失败抛出异常
function asyValid(value, cb){
    let param = {asyName: value} // 将需要校验的值作为参数
    $http(url,action,param,(res)=>{
        cb()
    },(err)=>{
        cb(new Error(err.data.message))
    })
}

原文地址:https://www.cnblogs.com/codebook/p/11332824.html

时间: 2024-10-09 23:16:48

vue+iview的form表单校验总结的相关文章

应用二:Vue之ElementUI Form表单校验

  表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明~ 如下代码是Form表单校验的demo示例: <template> <div id="demo"> <el-dialog title="表单校验示例" :close-on-click-modal="false" :visible.sync="dialogVisible" width=&q

简约的form表单校验插件

前言 网上有好多form表单校验插件,包括jquery的表单检验插件,这些中好多插件功能很齐全强大,提示方式很酷,很美观好看.本想拿来用,但是发现几个问题: 1.使用不方便.校验规则繁多,调用校验函数难记忆. 2.提示方式固定.一般插件给出固定的几种提示方式,但是实际中,不同系统都有自己的页面风格样式,有自己的提示方式,插件自带的一般用不上. 因此,我最终没有采用这些插件,以免用后出现难以修改或实现的情况. 如果一种校验插件能避免以上两个问题最好了,方便使用,提示方式自定义 ,所以自己做了一个简

element-ui Form表单校验

使用element-ui自带的表单校验,注意几个点: 1.el-form通过rules属性,绑定校验规则 2.el-form-item的prop属性,设置为需要校验的字段名 3.提交后二次校验 saveEdit(formName) { this.$refs[formName].validate((valid) =>{ if (valid){ this.editVisible = false } else{ this.$alert('有必填项未输入,请检查') } }) } element-ui文

vue elementUI之Form表单 验证

首先说一下 我在form表单里面遇见的坑: 1.例如我要给后台传的不是对象,而是一个数组,怎么写验证? 2.比如我有四个弹出框,都要做验证,这个时候就要注意了,每一个弹出框的ref都不能给的一样,并且一定要与当前弹框的确定或者保存按钮一一对应,例如:第一个弹框的ref='number',按钮的click比如为xxxxxx('number'),第二个弹出框的ref='number2',对应的按钮>>xxxxxx('number2').如果ref用的都一样,就会出现,点击下一步我没有去做验证,我再

element-ui Form表单校验小结及踩坑

1.要验证输入只能为数字时 . 如果使用type=“number”样式这边去掉type=number时自带的属性 /* 去除webkit中input的type="number"时出现的上下图标 */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"] { -moz-appearance

vue 表单校验(二)

vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐,因而一直在研究中 表单校验分类 前后端校验 前端校验 后端校验 这种目前一般是结合起来使用,很少单纯前端校验,或者单纯后端校验的 前端检验 数据录入时校验 数据回显时校验 动态创建时校验 数据是否必填时校验 接下来所谈论的校验都是基于前端进行校验,若是后天校验,只是统一校验规则而已,这样前后便可以统

实现一个兼容eleUI form表单的多选组件

本质上是实现了一个eleUI select组件中的创建条目功能的组件,仅仅是将dropdown的选择框变成了label形式.支持eleUI的form表单校验,同时组件也提供了组件内自定义校验的方法.常规的用eleUI校验表单只需要在rules中正常定义: rules: FormRules = { labels: [ { required: true, type: 'array', message: '请选择标签', trigger: 'change' }, { required: true, t

react之form表单工具:formik+yup

从网上搜到的form表单解决方案如下: 1.uform,地址:https://uformjs.org/#/MpI2Ij/dNFzFyTb UForm 和核心特性: 基于标准 JSON Schema 协议,数据化构建表单 基于 rxjs 对表单内部的副作用做统一管理,轻松解决各种复杂联动校验场景 支持各种表单布局方案 支持可视化构建表单 支持自定义组件扩展 分布式状态管理,表单性能更高 不足:基于styled-components来开发的,涉及到的自定义样式主要是Form和FormItem层面上的

【转】vue.js表单校验详解

1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue"); var VueValidator=require("vue-validator"); Vue.use(VueValidator); 2.直接使用script标签引入vue.js 要下载vue-validator,那么进入cdn的地址https://cdn.bootcss.com/vue-validator/2.