<template>
<Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
  <Row>
<Col span='8'>
公司名称:
</Col>
<Col span='16'>
<FormItem prop="name">
<Input type="text" v-model="formInline.name" placeholder="请输入公司名称">
</Input>
</FormItem>
</Col>
</Row>
</Form>
</template>
export default{
  name:'本vue文件名',
  date(){
    return {
      others:'',//其他变量
      formInline:{
        name:'',//绑定表单下的prop属性至信息框
        ...
      }
      ruleInline:{//定义规则
        name:[
          {request:ture, message:'不合规则提示的信息', trigger:'blur'}//是否规则,,绑定的触发事件
        ]
      }
    }
  }
  methods:{
    //提交表单方法
    submit(){
      //表单验证方法,调用父组件-from
      this.$refs['父组件的ref值'].validate((valid)=>{
      //自动检测,返回true/false给valid进行相应操作
       if(valid){
        //表单验证通过
       }else{
        //表单验证失败
       }
        
      })
    }   }
}

使用vue做表单验证的更多相关文章

  1. 使用jquery.validation+jquery.poshytip做表单验证--未完待续

    jqueryValidate的具体使用方法很多,这里就不在赘述,这一次只谈一下怎样简单的实现表单验证. 整片文章目的,通过JQvalidation按表单属性配置规则验证,并将验证结果通过poshyti ...

  2. vue+element 表单验证

    效果图 <template> <div class="formValidator"> <div v-for="(item,index) in ...

  3. element-ui做表单验证 v-for遍历表单 自动生成校验规则 pc移动双适配

    整体思路: 1:利用element-ui的栅格实现小分辨率和大分辨率的适配 2:模拟一组数据,从中筛选出 绑定各个表单值的对象   以及生成验证规则对象 3:在script标签内 .data()外,自 ...

  4. vue element 表单验证不通过,滚动到固对应位置

    我们在使用elementIUI实现表单验证,内容比较多的时候,提示内容会被遮挡,这时候用户不清楚什么情况,还会连续点击提交按钮.这个时候需求来啦:我们需要在表单验证不通过的时候,页面滚动到对应的位置. ...

  5. bootstrapValidator.js 做表单验证

    有这样的一个场景,我们在提交form表单的时候 可能要做一些验证,比如判断是不是为空,电话的格式验证,邮箱的格式验证等等,手写起来也是可以得. 但是今天我介绍一个bootstrap插件简化开发.就是b ...

  6. [转]bootstrapValidator.js 做表单验证

    本文转自:https://www.cnblogs.com/nele/p/5493414.html 作者:@nele本文为作者原创,转载请注明出处:https://www.cnblogs.com/nel ...

  7. vue:表单验证时,trigger的值什么时候选blur什么时候选change

    对el-input输入框的验证,trigger的值选blur,即失去焦点时进行验证. 下拉框(el-select).日期选择器(el-date-picker).复选框(el-checkbox).单选框 ...

  8. vue form表单验证

    <el-select v-model="ruleForm.region" placeholder="请选择活动区域"> <el-option ...

  9. vue view 表单验证正常逻辑

    <template> <Form ref="formInline" :model="formInline" :rules="rule ...

随机推荐

  1. Linux 内核引导选项简介

    Linux 内核引导选项简介 作者:金步国 连接地址:http://www.jinbuguo.com/kernel/boot_parameters.html 参考参数:https://www.cnbl ...

  2. python自定义方法处理日志文件

    从命令行界面拷贝的内容包含过个">>>",函数的作用是用正则把每两个">>>"之间的字符取出来,然后把包含“Tracebac ...

  3. Linux基础命令---vim文本编辑

    vim vim是unix系统最通用的文本编辑器,它的功能可以说是非常强大了,它是vi的升级版.vim有三种工作模式:编辑模式.命令模式.末行模式,默认打开的时候进入命令模式. 此命令的适用范围:Red ...

  4. Java国际化号码验证方法,国内手机号正则表达式

    Java国际化号码验证方法,国内手机号正则表达式 中国电信号段 133.149.153.173.177.180.181.189.199 中国联通号段 130.131.132.145.155.156.1 ...

  5. pycharm快捷键及常用设置

    Alt+Enter 自动添加包 shift+O 自动建议代码补全 Ctrl+t SVN更新 Ctrl+k SVN提交 Ctrl + / 注释(取消注释)选择的行 Ctrl+Shift+F 高级查找 C ...

  6. css链接link

    链接可以使用任何css属性,包括字体.颜色.背景等等. 链接有四个状态,可在四个状态时设置不同的属性 a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover ...

  7. 静态代码检查findbugs/阿里巴巴开发规范

    findbugs,基本上三类严重的bug检测出来都是比较准确的,如下: 阿里巴巴开发规范 前面两类都是比较重要的: 参考: https://blog.csdn.net/qq_27093465/arti ...

  8. Machine Learning - Andrew Ng - Coursera

    Machine Learning - Andrew Ng - Coursera Contents 1 Notes 1 Notes What is Machine Learning? Two defin ...

  9. NOIP 2017 游(划水)记

    Day 0 上午,大概做了一套(大)信(水)心题. 让我想想我题目都是些什么鬼.. T1:大水题.什么sort一下就过了.据说lemon上用map不会被卡常(lemon上评测,程序跑得蜜汁快). T2 ...

  10. markdown的流程图实现和代码语法着色

    用flowchart为markdown添加流程图 举个例子如下,根据这个例子大家就能看懂我到底是怎么实现的 <!DOCTYPE html> <html> <head> ...