使用vue做表单验证
<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做表单验证的更多相关文章
- 使用jquery.validation+jquery.poshytip做表单验证--未完待续
jqueryValidate的具体使用方法很多,这里就不在赘述,这一次只谈一下怎样简单的实现表单验证. 整片文章目的,通过JQvalidation按表单属性配置规则验证,并将验证结果通过poshyti ...
- vue+element 表单验证
效果图 <template> <div class="formValidator"> <div v-for="(item,index) in ...
- element-ui做表单验证 v-for遍历表单 自动生成校验规则 pc移动双适配
整体思路: 1:利用element-ui的栅格实现小分辨率和大分辨率的适配 2:模拟一组数据,从中筛选出 绑定各个表单值的对象 以及生成验证规则对象 3:在script标签内 .data()外,自 ...
- vue element 表单验证不通过,滚动到固对应位置
我们在使用elementIUI实现表单验证,内容比较多的时候,提示内容会被遮挡,这时候用户不清楚什么情况,还会连续点击提交按钮.这个时候需求来啦:我们需要在表单验证不通过的时候,页面滚动到对应的位置. ...
- bootstrapValidator.js 做表单验证
有这样的一个场景,我们在提交form表单的时候 可能要做一些验证,比如判断是不是为空,电话的格式验证,邮箱的格式验证等等,手写起来也是可以得. 但是今天我介绍一个bootstrap插件简化开发.就是b ...
- [转]bootstrapValidator.js 做表单验证
本文转自:https://www.cnblogs.com/nele/p/5493414.html 作者:@nele本文为作者原创,转载请注明出处:https://www.cnblogs.com/nel ...
- vue:表单验证时,trigger的值什么时候选blur什么时候选change
对el-input输入框的验证,trigger的值选blur,即失去焦点时进行验证. 下拉框(el-select).日期选择器(el-date-picker).复选框(el-checkbox).单选框 ...
- vue form表单验证
<el-select v-model="ruleForm.region" placeholder="请选择活动区域"> <el-option ...
- vue view 表单验证正常逻辑
<template> <Form ref="formInline" :model="formInline" :rules="rule ...
随机推荐
- Axis2之wsdl2java工具
本章主要介绍axis2的wsdl2java工具的使用. Axis2提供了一个wsdl2java命令可以根据WSDL文件自动产生调用WebService的代码.wsdl2java命令可以在<Axi ...
- Fabric架构:抽象的逻辑架构与实际的运行时架构
Fabric从1.X开始,在扩展性及安全性上面有了大大的提升,且新增了诸多的新特性: 多通道:支持多通道,提高隔离安全性. 可拔插的组件:支持共识组件.权限管理组件等可拔插功能. 账本数据可被存储为多 ...
- webService入门理解
最近可能开始要搞关于远程接口调用的玩意儿,所以上网查了一些关于远程调用额东西,其中有很多写得很不错,我把其中的比较好的几个整理一下,整理到一块儿,变成个人的理解写出来. 关于所谓的webService ...
- python 爬虫基础知识一
网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动的抓取万维网信息的程序或者脚本. 网络爬虫必备知识点 1. Python基础知识2. P ...
- python PIL 图像处理操作
python PIL 图像处理 # 导入Image库 import Image # 读取图片 im = Image.open("1234.jpg") # 显示图片 im.show( ...
- Android4.0 主线程不能访问网络异常解决办法
从两个方面说下这个问题: 1. 不让访问网络的原因 2. 解决该问题的办法 不让访问网络的原因: 由于对于网络状况的不可预见性,很有可能在网络访问的时候造成阻塞,那么这样一来我们的主线程UI线程 就会 ...
- oracel中合并报表的sql
select decode(dt.LATN_ID ,290,'西安','910','咸阳',911,'延安',912,'榆林',913,'渭南',914,'商洛',915,'安康', 916,'汉中' ...
- mycat实现mysql数据库的垂直切分
在我们的工作中可能会遇到数据库的io瓶颈. 这个时候我们应该怎么办呢? 解决办法有很多,我们可以想到的为:数据库集群,主从复制,读写分离,数据库负载均衡,数据库的分库,分表.接下来我们写一下,数据库的 ...
- php 使用table方式导出excel文件
这些天在使用PHPExcel导出数据时,5000条数据竟然挂了.后来跟同事聊聊,有些明悟,PHPExcel做了很多处理,我在这里理解为渲染,就会暂用过多的空间,‘膨胀’的空间导致内存暂用过大,就挂了. ...
- Python 2、8、10、16进制间的转换
进制转换一直是初学者所头疼的,下面就简单的列出各进制之间都是以什么方式转换的. # print('2-->8: ', oct(int('0b1010', 2))) # 2-10-8 # prin ...