精华内容
下载资源
问答
  • 本篇文章主要介绍了Vue2.0表单校验组件vee-validate的使用详解,详细的介绍了vee-validate使用教程。具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue表单校验

    2021-03-16 10:02:41
    vue表单校验常用方法:vue修饰符,使用第三方插件表单校验组件,本文以以elementui为例,相比官网新增了一些进阶用法:关联元素校验,异步结果校验,动态数组校验。不建议手写监听校验 1.vue表单输入修饰符 前后...

         vue表单校验常用方法:vue修饰符,使用第三方插件表单校验组件,本文以以elementui为例,相比官网新增了一些进阶用法:关联元素校验,异步结果校验,动态数组校验。不建议手写监听校验

    1.vue表单输入修饰符
    • 前后去除空格
     <el-input type="text"    v-model.trim="search"               />
    
    • 只允许输入数字
    <el-input v-model.number="age" />
    
    • 拓展:自定义表单修饰符,目前没发现类似实现,需要自己调研,个人觉得做出来会非常方便
    2.elementui校验表单(基础)
    3.elementui校验表单(进阶使用)
    • 关联元素校验
      官网例子只有对指定元素校验,没有指出涉及多元素关联的校验如何进行,如数组中名称是否重复。
     data () {
        entity
     	// 核心:传入this指针,获取表单中其他值
        let _this = this
        /** 校验属性中map key格式,是否重复 */
        let validateSchoolNameExit = (rule, value, callback) => {
          const reg = /^[a-zA-Z|0-9|_|-\s]+$/
          let exitNum = 0
          _this.school.forEach(item => {
            if (item.name === value) {
              exitNum++
            }
          })
          if (exitNum > 1) {
            return callback(new Error("重复名称"))
          }
          return callback()
        }
        return {
        	//需要校验的对象
        	school:[{name:"实验中学"},{name:"附属一中"}],
        	// 校验规则指定
        	rules: {
    	        validateSchoolNameExit: [
    	          { validator: validateSchoolNameExit, trigger: 'change' }
            ],
        }
    },
    
    
    • 动态数组校验
      校验内容中存在数组是头疼的事情,尤其是动态增减的数组,不慌!看代码
    // 表单页面 
    			 <FormItem
    	                :prop="`school[${index}].name`"
    	                :rules="rules.validateSchoolNameExit"
    	              >
                    <input v-model="school[${index}].name" />
                  </FormItem>
    // js代码:
    data () {
        entity
     	// 核心:传入this指针,获取表单中其他值
        let _this = this
        /** 校验属性中map key格式,是否重复 */
        let validateSchoolNameExit = (rule, value, callback) => {
          const reg = /^[a-zA-Z|0-9|_|-\s]+$/
          let exitNum = 0
          _this.school.forEach(item => {
            if (item.name === value) {
              exitNum++
            }
          })
          if (exitNum > 1) {
            return callback(new Error("重复名称"))
          }
          return callback()
        }
        return {
        	//需要校验的对象
        	school:[{name:"实验中学"},{name:"附属一中"}],
        	// 校验规则指定
        	rules: {
    	        validateSchoolNameExit: [
    	          { validator: validateSchoolNameExit, trigger: 'change' }
            ],
        }
    },
                  
    
    • 异步请求校验
    data () {
        entity
     	// 核心:传入this指针,获取表单中其他值
        let _this = this
        /** 校验属性中map key格式,是否重复 */
        let validateSchoolNameExit = async (rule, value, callback) => {
          let validateExit= await _this.validateExit()
          if (validateExit) {
            return callback(new Error("名称已存在"))
          }
          return callback()
        }
        return {
        	//需要校验的对象
        	school:[{name:"实验中学"},{name:"附属一中"}],
        	// 校验规则指定
        	rules: {
    	        validateSchoolNameExit: [
    	          { validator: validateSchoolNameExit, trigger: 'change' }
            ],
        }
    },
    methods:{
    	async validateExit(){
    	 const res = await post('/q/quota/entity/checkEntityTypeName'})
          if (res > 0 && res.code !== 200) {
            console.log('validateEntityTypeNameExit true')
            return true
          } else {
            console.log('validateEntityTypeNameExit false')
            return false
          }
    	}
    }
    

    效果:
    在这里插入图片描述

    展开全文
  • Vue2.0表表单单校校验验组组件件vee-validate的的使使用用详详解解 本篇文章主要介绍了Vue2.0表单校验组件vee-validate的使用详解详细的介绍了vee-validate使用教程具有一定 的参考价值感兴趣的小伙伴们 以参考一下 ...
  • Vue2.0表单校验组件vee-validate的使用 vee-validate使用教程 *本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释。本人也是一边学习一边使用,如果错误之处敬请批评指出...

    Vue2.0表单校验组件vee-validate的使用

    vee-validate使用教程

    *本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释。本人也是一边学习一边使用,如果错误之处敬请批评指出*

    一、安装

    npm install vee-validate@next --save
    注意:@next,不然是Vue1.0版本

    bower install vee-validate#2.0.0-beta.13 --save

    二、引用

    import Vue from 'vue';
    import VeeValidate from 'vee-validate';
    Vue.use(VeeValidate);

    组件设置:

    import VeeValidate, { Validator } from 'vee-validate';
    import messages from 'assets/js/zh_CN';
    Validator.updateDictionary({
        zh_CN: {
            messages
        }
    });
    const config = {
        errorBagName: 'errors', // change if property conflicts.
        delay: 0,
        locale: 'zh_CN',
        messages: null,
        strict: true
    };
    Vue.use(VeeValidate,config);

    assets/js/zh_CN 代表你存放语言包的目录,从node_modules/vee-validate/dist/locale目录下面拷贝到你的项目
    Validator还有更多应用,下面再讲。
    config其它参数,delay代表输入多少ms之后进行校验,messages代表自定义校验信息,strict=true代表没有设置规则的表单不进行校验,errorBagName属于高级应用,自定义errors,待研究

    三、基础使用

    <div class="column is-12">
        <label class="label" for="email">Email</label>
        <p class="control">
            <input v-validate data-rules="required|email" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
            <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
        </p>
    </div>

    提醒:错误信息里面的名称通常就是表单的name属性,除非是通过Vue实例传递进来的。
    提醒:养成好习惯,给每个field添加name属性,如果没有name属性又没有对值进行绑定的话,validator可能不会对其进行正确的校验

    关于errors

    上面的代码我们看到有errors.has,errors.first,errors是组件内置的一个数据模型,用来存储和处理错误信息,可以调用以下方法:

    • errors.first('field') - 获取关于当前field的第一个错误信息
    • collect('field') - 获取关于当前field的所有错误信息(list)
    • has('field') - 当前filed是否有错误(true/false)
    • all() - 当前表单所有错误(list)
    • any() - 当前表单是否有任何错误(true/false)
    • add(String field, String msg) - 添加错误
    • clear() - 清除错误
    • count() - 错误数量
    • remove(String field) - 清除指定filed的所有错误

    关于Validator

    Validator是以$validator被组件自动注入到Vue实例的。同时也可以独立的进行调用,用来手动检查表单是否合法,以传入一个对象的方式,遍历其中指定的field。

    import { Validator } from 'vee-validate';
    const validator = new Validator({
        email: 'required|email',
        name: 'required|alpha|min:3',
    }); 
    // or Validator.create({ ... });

    你也可以在构造了validator之后设置对象参数

    import { Validator } from 'vee-validate';
    const validator = new Validator();
    
    validator.attach('email', 'required|email'); // attach field.
    validator.attach('name', 'required|alpha', 'Full Name'); // attach field with display name for error generation.
    
    validator.detach('email'); // you can also detach fields.

    最后你也可以直接传值给field,测试是否可以通过校验,像这样:

    validator.validate('email', 'foo@bar.com'); // true
    validator.validate('email', 'foo@bar'); // false
    //或者同时校验多个:
    validator.validateAll({
        email: 'foo@bar.com',
        name: 'John Snow'
    });
    //只要有一个校验失败了,就返回false

    四、内置的校验规则

    • after{target} - 比target要大的一个合法日期,格式(DD/MM/YYYY)
    • alpha - 只包含英文字符
    • alpha_dash - 可以包含英文、数字、下划线、破折号
    • alpha_num - 可以包含英文和数字
    • before:{target} - 和after相反
    • between:{min},{max} - 在min和max之间的数字
    • confirmed:{target} - 必须和target一样
    • date_between:{min,max} - 日期在min和max之间
    • date_format:{format} - 合法的format格式化日期
    • decimal:{decimals?} - 数字,而且是decimals进制
    • digits:{length} - 长度为length的数字
    • dimensions:{width},{height} - 符合宽高规定的图片
    • email - 不解释
    • ext:[extensions] - 后缀名
    • image - 图片
    • in:[list] - 包含在数组list内的值
    • ip - ipv4地址
    • max:{length} - 最大长度为length的字符
    • mimes:[list] - 文件类型
    • min - max相反
    • mot_in - in相反
    • numeric - 只允许数字
    • regex:{pattern} - 值必须符合正则pattern
    • required - 不解释
    • size:{kb} - 文件大小不超过
    • url:{domain?} - (指定域名的)url

    五、自定义校验规则

    1.直接定义

    const validator = (value, args) => {
        // Return a Boolean or a Promise.
    }
    //最基本的形式,只返回布尔值或者Promise,带默认的错误提示

    2.对象形式

    const validator = {
        getMessage(field, args) { // 添加到默认的英文错误消息里面
            // Returns a message.
        },
        validate(value, args) {
            // Returns a Boolean or a Promise.
        }
    };

    3.添加到指定语言的错误消息

    const validator = {
        messages: {
            en: (field, args) => {
                // 英文错误提示
            },
            cn: (field, args) => {
                // 中文错误提示
            }
        },
        validate(value, args) {
            // Returns a Boolean or a Promise.
        }
    };

    创建了规则之后,用extend方法添加到Validator里面

    import { Validator } from 'vee-validate';
    const isMobile = {
        messages: {
            en:(field, args) => field + '必须是11位手机号码',
        },
        validate: (value, args) => {
           return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
        }
    }
    Validator.extend('mobile', isMobile);
    
    //或者直接
    
    Validator.extend('mobile', {
        messages: {
          en:field => field + '必须是11位手机号码',
        },
        validate: value => {
          return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
        }
    });

    然后接可以直接把mobile当成内置规则使用了:

    <input v-validate data-rules="required|mobile" :class="{'input': true, 'is-danger': errors.has('mobile') }" name="mobile" type="text" placeholder="Mobile">
    <span v-show="errors.has('mobile')" class="help is-danger">{{ errors.first('mobile') }}</span>

    4.自定义内置规则的错误信息

    import { Validator } from 'vee-validate';
    
    const dictionary = {
        en: {
            messages: {
                alpha: () => 'Some English Message'
            }
        },
        cn: {
            messages: {
                alpha: () => '对alpha规则的错误定义中文描述'
            }
        }
    };
    
    Validator.updateDictionary(dictionary);

    暂时介绍到这里,应该已经上手了,有空再继续翻译。

    展开全文
  • vue表单验证组件 v-verify-plugin
  • 仿element实现表单提交校验组件 form组件 <template> <div> <form> <slot></slot> </form> </div> </template> <script> export default { provide...

    仿element实现表单提交校验组件
    form组件

    <template>
        <div>
            <form>
                <slot></slot>
            </form>
        </div>
    </template>
    
    <script>
        export default {
            provide(){
                return {
                    form: this
                }
            },
            props:{
                model: {
                    type: Object,
                    required: true
                },
                rules: {
                    type: Object
                }
            },
            methods:{
                validate(cb){
                    const tasks = this.$children.filter(item=>item.prop).map(item=>item.validate())
                    Promise.all(tasks).then(()=>cb(true)).catch(()=>cb(false))
                }
            }
        }
    </script>
    
    <style lang="scss" scoped>
    
    </style>
    

    form-item组件

    <template>
        <div>
            <label v-if="label">{{label}}</label>
            <slot></slot>
            <p v-if="error">{{error}}</p>
        </div>
    </template>
    
    <script>
        import Shema from 'async-validator';
        export default {
            inject:['form'],
            props:{
                label:{
                    type:String,
                    default:""
                },
                prop:{
                    type:String,
                    default:""
                }
            },
            data() {
                return {
                    error: ""//校验错误
                }
            },
            mounted () {
                this.$on('validate',()=>{
                    this.validate()
                });
            },
            methods: {
                validate() {
                    const rules = this.form.rules[this.prop]
                    const value = this.form.model[this.prop]
                    const descriptor = new Shema({[this.prop]:rules})
                    return descriptor.validate({[this.prop]:value},errors=>{
                        if(errors){
                            this.error = errors[0].message
                        }else{
                            this.error = ""
                        }
                    })
                }
            },
        }
    </script>
    
    <style lang="scss" scoped>
    
    </style>
    

    input组件

    
    ```coffeescript
    <template>
        <div>
            <input :value="value" @input="onInput">
        </div>
    </template>
    
    <script>
        export default {
            props:{
                value:{
                    type:String,
                    default:""
                }
            },
            methods: {
                onInput(e) {
                    this.$emit("input",e.target.value)
                    this.$parent.$emit('validate')
                }
            },
        }
    </script>
    
    <style lang="scss" scoped>
    
    </style>
    

    项目内使用

    <template>
        <div>
            <k-form :model="user" :rules="rules" ref="loginForm">
                <k-form-item label="用户名" prop="username">
                    <k-input type="text" v-model="user.username"></k-input>
                </k-form-item>
                <k-form-item label="密码" prop="password">
                    <k-input type="password" v-model="user.password"></k-input>
                </k-form-item>
                <k-form-item>
                    <button @click="submitForm">提交</button>
                </k-form-item>
            </k-form>
            
        </div>
    </template>
    
    <script>
        import KForm from '@/components/form/KForm.vue'
        import KFormItem from '@/components/form/KFormItem.vue'
        import KInput from '@/components/form/KInput.vue'
        export default {
            components: {
                KForm,
                KInput,
                KFormItem
            },
            data() {
                return {
                    user: {
                        username:"aaa",
                        password:""
                    },
                    rules: {
                        username: [{ required: true, message: "请输入用户名称" }],
                        password: [{ required: true, message: "请输入密码" }]
                    }
                }
            },
            methods: {
                submitForm() {
                    this.$refs.loginForm.validate(valid=>{
                        if(valid){
                            alert("请求登录")
                        }else{
                            alert("校验失败")
                        }
                    })   
                }
            },
        }
    </script>
    
    <style lang="scss" scoped>
    
    </style>
    

    效果展示
    在这里插入图片描述

    展开全文
  • vue 表单校验

    2018-12-23 16:09:00
    表单校验 一 最近使用elment-ui表单进行各种校验,心力交瘁,依旧不能很好地解决,先列出自己的归类,后期一个个攻破 表单校验表单校验准则 参考资源 1 2 3 4 5 第一种 显示明确的错误消息。 放宽输入...

    表单校验 一

    最近使用elment-ui表单进行各种校验,心力交瘁,依旧不能很好地解决,先列出自己的归类,后期一个个攻破

    • 表单校验

    表单校验准则

    • 参考资源
    • 第一种
      • 显示明确的错误消息。
      • 放宽输入格式。
      • 指出错误发生的位置(特别是在大型表单中)。
    • 第二种
      • short
      • friendly
      • easy

    正常录入数据进行校验

    校验时的几种类型

    • 输入时进行校验,主要用到input,也可以是键盘事件,但目前而已,input是最好的
      1363709-20181223160900946-457507084.gif

    • 输入完校验,主要利用 鼠标blur事件
    • 后端校验, 检验完后,在前端返显即可

    测试表单校验插件系列 (针对vue)

    表单校验流程

    表单校验默认流程

    • vue中 v-model.trim 去除两侧空格
    • 正则校验(基本可以解决一切)

    表单校验太多,我准备分批探讨。这算是开篇,后期会给予自己做的element-ui进行一系列说明。

    转载于:https://www.cnblogs.com/sinosaurus/p/10164615.html

    展开全文
  • vue表单校验(三)

    2019-07-01 10:09:00
    vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 通过表单提交时,触发校验,...
  • 在使用表单提交数据时,表单校验可对输入数据进行验证,保证输入数据的格式正确。 表单校验 <template> <div class="container"> <el-form :model="ruleForm" status-icon :rules="rules" ref=...
  • 这是自己随便写的小测试,包括字段名取得都乱七八糟,敬请谅解。...1.表单 (正常校验处理) <el-form :model="editForm" label-width="115px" :rules="editFormRules" :disabled="editForm...
  • vue 涉及到表单校验的工作的时候,可以使用这个组件,非常好用,下面给大家介绍使用方法。 1 使用yarn安装 yarn add vee-validate 2 安装完成后,在main中引入。引入下面的2个命令。 import VeeValidate from ...
  • 1、表单校验基础搭建: 校验器组件逻辑,首先校验必填项,required: true 是否必填,若无填写则直接return报错「必填」。 接着再校验其它内置规则,email、手机号等等。 export default function validate (data...
  • 主要介绍了Vue element-ui父组件控制子组件表单校验操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 需求 下图表单为子组件,点击右下角添加或右上角减号可以添加或删除对应表单 解决办法 校验方法在子组件写 父组件点击提交时获取子组件实例 子组件通过回调...2.父组件获取子组件实例,子组件方法进行校验 ----2.1子
  • 今天发现,如果设置select的trigger:'blur'就算选择之后还是边框是红色的,之后查了一下iview的文档,也没有找到准确的蚊子描述,只看到form那个组件其中有一个例子,大概是select会对应change,input对应blur还有其他...
  • vue 清除表单校验

    2021-07-16 16:53:27
    vue 清除表单校验清除表单校验 清除表单校验 this.$nextTick(() => { this.$refs["formName"].clearValidate(); });
  • VUE动态表单校验

    2019-10-14 17:57:07
    VUE动态表单校验 功能描述 用户可以添加一个员工,也可以同时添加多个员工,但是每个员工的对应表单都存在表单校验 效果图 代码如下 <!-- --> <template> <div class=''> <!-- ...
  • 关于Vant-ui校验,开发表单校验组件(一)自己开发一个表单校验组件开发准备阶段规划form表单组件的apiAttributes 属性rules 参数说明Method 事件Slot 插槽 自己开发一个表单校验组件 最近项目用到vant-ui 框架,挺...
  • vue前端表单校验data() {return {visible: false,dataForm: {brandId: 0,name: "",logo: "",descript: "",showStatus: 1,firstLetter: "",sort: 0},dataRule: {name: [{ required: true, message: "品牌名不能为空",...
  • 一般情况下(form中的组件都是element提供的组件)在使用elm的表单校验时我们是这么使用的:// 栗子.vue <template> <el-form :model="formData" :rule="rules" ref="formRef"> <el-form-item prop=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,271
精华内容 2,108
关键字:

vue表单校验组件

vue 订阅