使用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 ...
随机推荐
- MySql 存储过程 光标只循环一次
[1]MqSql 存储过程 光标只循环一次 针对MySql存储过程,光标只循环一次就退出的场景,可能原因分析: (1)存储过程有问题(仔细检查语法.控制变量.条件等等) (2)保证存储过程正确.调用过 ...
- Mybatis+MySQL动态分页查询
https://blog.csdn.net/qq_34137397/article/details/63289621 mybatis有两种分页方法 1.内存分页,也就是假分页.本质是查出所有的数据然后 ...
- Android Auto开发初探
一.Android Auto 概述 二.Android Auto 使用方法 四.Android Auto应用开发 五.Android Auto开发总结 一.Android Auto 概述 最近物联网是 ...
- [转载]FileStream读写文件
FileStream读写文件 FileStream类:操作字节的,可以操作任何的文件 StreamReader类和StreamWriter类:操作字符的,只能操作文本文件. 1.FileStream类 ...
- Selenium+Java自动化测试的方法
1.设置等待时间Thread.sleep(2000); (1000代表1s)2.断言assertion:验证应用程序的状态是否同所期望的一致.常见的断言包括:验证页面内容,如标题是否为X或当前位置是否 ...
- Python爬虫_Selenium与PhantomJS
Selenium是一个Web的自动化测试工具,最初是为网站自动化测试而开发的,最初是为网站自动化测试而开发的,类型像我们玩游戏用的按键精灵,可以按指定的命令自动化操作,不同是Selenium可以直接运 ...
- String类型转json 转JSONObject 转 JSONArray 以及 遍历
public PageVo getByPage(int pageNum, int pageSize) { PageVo pageVo = new PageVo(); System.out.printl ...
- ZYNQ学习之路1. Linux最小系统构建
https://blog.csdn.net/u010580016/article/details/80430138?utm_source=blogxgwz1 开发环境:window10, vivado ...
- Android几种解析XML方式的比较
https://blog.csdn.net/isee361820238/article/details/52371342 一.使用SAX解析XML SAX(Simple API for XML) 使用 ...
- close yield
close的方法主要是关闭子生成器,需要注意的有4点: 1.如果生成器close后,还继续next,会报错StopIteration [图片] 2.如果我捕获了异常,将GeneratorE ...