使用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 ...
随机推荐
- Spark学习之路 (二十)SparkSQL的元数据
一.概述 SparkSQL 的元数据的状态有两种: 1.in_memory,用完了元数据也就丢了 2.hive , 通过hive去保存的,也就是说,hive的元数据存在哪儿,它的元数据也就存在哪儿. ...
- 【爬虫】biqukan抓取2.0版
#!python3.7 import requests,sys,time,logging,random from lxml import etree logging.basicConfig(level ...
- activiti 报 next dbid
记录一下吧. 今天将生产环境的几个服务节点改成集群模式,其中包含activiti审批服务节点,其中各个服务几点间数据通信采用MQ(与本文无关). 然后报出如题错误. 究其原因就是,在启动activit ...
- CentOS7 安装 mysql8
本文主要从以下几个方面对自己在centos7 下安装mysql8过程做如下总结: CentOS7 安装mysql8 步骤: window下的Navicat 连接MySql8: 涉及到的Linux命令 ...
- [Android相机]通过手机摄像头识别环境亮度(转)
源: [Android相机]通过手机摄像头识别环境亮度 iOS利用摄像头获取环境光感参数
- Eloquent JavaScript #04# Objects and Arrays
要点索引: JSON More ... 练习 1.补:js字符串的表达方式有三种: "" 和 '' 没什么区别,唯一区别在于 "" 中写 "要转义字符 ...
- 汇编语言教材assembly language
https://en.wikipedia.org/wiki/Assembly_language https://baike.baidu.com/item/%E6%B1%87%E7%BC%96%E8%A ...
- C#.Net环境下的缓存技术
转载:https://www.cnblogs.com/lvjy-net/p/8297679.html 一.缓存技术本节将介绍以下技术: 使用Asp.Net缓存: 使用Remoting Singleto ...
- Python 自学基础(一)——元组 字典 文件操作
格式化输出 name = input("请输入你的名字:") age = input("请输入你的年龄:") msg = ''' -------------in ...
- php 操作 mysql 数据库常用方法集合
参考: https://www.runoob.com/php/php-pdo.html https://www.cnblogs.com/feng18/p/6523646.html https://bl ...