使用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 ...
随机推荐
- WEB应用程序:AJAX全套
概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作需要 ...
- [openjudge-动态规划]怪盗基德的滑翔翼
题目描述 描述 怪盗基德是一个充满传奇色彩的怪盗,专门以珠宝为目标的超级盗窃犯.而他最为突出的地方,就是他每次都能逃脱中村警部的重重围堵,而这也很大程度上是多亏了他随身携带的便于操作的滑翔翼. 有一天 ...
- Linux基础命令---管理组gpasswd
gpasswd gpasswd指令用来管理组文件“/etc/group”和“/etc/gshadow”,每个组可以设置管理员.组员.密码.系统管理员可以使用-A选项定义组管理员,使用-M选项定义成员. ...
- javascript判断对象是否为domElement
我们在写js代码时有时需要判断某个对象是不是DOM对象,然后再进行后续的操作,这里我给出一种兼容各大浏览器,同时又算是比较稳妥的一种方法. 要判断一个对象是否DOM对象,首先想到的无非就是它是否具有D ...
- Python基础二_操作字符串常用方法、字典、文件读取
一.字符串常用方法: name.captitalize() #字符串首字母大写 name.center(50,'*') ...
- eclipse 的版本及下载地址
eclipse 的各个版本号: 版本号 代号 代号名 发布日期 Eclipse 3.1 IO 木卫一,伊奥 2005 Eclipse 3.2 Callisto 木卫四,卡里斯托 2006 Eclips ...
- Tomcat启动报错:[Failed to start component]的解决方案
在MyEclipse中启动Tomcat,该Tomcat仅部署了一个报错项目,启动Tomcat Server的全部信息如下: usage: java org.apache.catalina.startu ...
- MySQL日志详细说明
这片博文我们会详细说明MySQL本身的日志,不包含重做日志和undo日志(这两个日志是innodb存储引擎的日志). MySQL本身的日志有以下几种(MySQL5.7版本): 错误日志 慢查询日志 通 ...
- 最简单的uwsgi+nginx配置多个django站点
1. nginx.conf http{ server { listen 80; server_name www.web1.com ....... location / { uwsgi_p ...
- 容器学习笔记之CentOS7安装Docker(安装指定版本的Docker,加速,卸载)
0x00 概述 Docker从1.13版本之后采用时间线的方式作为版本号,分为社区版CE和企业版EE. 社区版是免费提供给个人开发者和小型团体使用的,企业版会提供额外的收费服务,比如经过官方测试认证过 ...