vue 表单 验证 async-validator
1、使用插件async-validator
async-validator 地址:https://github.com/yiminghe/async-validator
2、示例(vue+element-ui)
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm"><el-form-itemlabel="年龄"prop="age":rules="[{ required: true, message: '年龄不能为空'},{ type: 'number', message: '年龄必须为数字值'}]"><el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button><el-button @click="resetForm('numberValidateForm')">重置</el-button></el-form-item> </el-form> <script>export default {data() {return {numberValidateForm: {age: ''}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}} </script>
注意校验书写格式:
{ required: true, message: '年龄不能为空'}, { type: 'number', message: '年龄必须为数字值'}像校验邮箱、数值类型类型时,多行配置校验规则。
转载于:https://www.cnblogs.com/mengfangui/p/9907783.html
vue 表单 验证 async-validator相关推荐
- 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
- 前端框架Vue(11)——Vue+表单验证 VeeValidate 实践
这次来讲一下表单验证插件 VeeValidate,那为什么要结合 Vue 来讲呢?来看一下 github 上的图片就明白了! 为 Vue 而来的!不清楚是不是 Vue 的官方表单验证插件. 废话不多说 ...
- vue表单验证,多种校验规则
前言 vue 表单验证,具体的大家根据自身项目和框架来,本文以antd举例. 实现 这里以antd 举例 <template><a-form-model ref="rule ...
- vue表单验证(用户名、密码、身份证号、中文姓名、手机号、邮箱)
vue表单验证(用户名.密码.身份证号.中文姓名.手机号.邮箱) new Vue({el: '#register',data: function() {// 验证邮箱let checkEmail = ...
- vue 表单验证并提交
vue 表单验证并提交 一.常用验证方式 1.data 中验证 data 数据: 2.行内验证 3.引入外部定义的规则 二.表单提交时验证 1.表单的提交按钮 2.ethods 方法 一.常用验证方式 ...
- vue 表单验证按钮事件交由父组件触发
vue 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法 子组件: //内容部分 <Form ref="formCustom" :model="formC ...
- vue表单验证插件 vuerify
表单验证是一个网站或者系统不可或缺的,也是非常重要的一环.使用人工匹配验证的话会非常的复杂,尤其对于大量表单验证更是如此. 当然有一些jQuery 表单验证的插件,或许用着还不错.但是,如果你不想在v ...
- Vue 表单验证插件的写作过程
前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue.这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js. ...
- vue表单验证,不能通过验证
vue表单验证一直不能通过 1.model里的值一定要和 js里面data的名称(formValidate)对应 2.rules里面的值要和js里面设定的表单规则(ruleValidate)对应 3. ...
- Vue 表单验证、数据验证
graceUI js 模块 graceUI 官网 http://grace.hcoder.net 首页视频教程第一节可观看组件演示 (: 使用说明 1 将 graceChecker.js 部署到您的项 ...
最新文章
- typescript索引类型_TypeScript类型声明书写详解
- 搜索引擎:你选谷歌还是百度?
- 如何提高工作效率,拥有自由支配时间?
- r语言 断轴 画图_R语言作图——Density plot
- 【译】在 Linux 上不安装 Mono 构建 .NET Framework 类库
- java实现生产者消费者问题
- 使用永洪BI工具开发扫雷游戏
- 【2018滴滴】寻找丑数
- 百度网页快照删除服务恢复运营
- 将越狱进行到底 Pod2g邀约众大神组建evad3rs
- python爬虫小说爬取
- 小程序后台持续定位功能
- D-LINK DIR823PRO 路由器更新固件为openwrt-18.06.1 支持802.11s组建mesh
- MySQL的缓存机制
- 西邮Linux小组免试题揭秘
- 订单23系统服务器,《死亡搁浅》订单23怎么完成?系统服务器订单任务攻略
- Java实现判断叶子节点_寻找二叉树最远的叶子结点(实例讲解)
- 【智能制造】见识一下某航空企业的智能制造技术架构!
- C++中的Aggregate
- 【华为诺亚方舟实验室】招聘:决策推理(强化学习)研究方向(实习、应届、社招、博后)均可以
热门文章
- latex图片标题居中
- 实验7-3-5 输出大写英文字母 (15分)
- 钉钉开发者接口文档_无需开发,IT事件接入钉钉的方法详解
- P1458 顺序的分数 Ordered Fractions(有技巧的枚举)+C++类封装=精简代码
- HBase集群安装部署(完全分布式)
- 【Ubuntu-apt-换源】ubuntu系统换源后使用apt-get update时一直0%[执行中]
- JS异步模式与Promise模式
- pycharm的console输入如何换行
- 基于决策树的多分类_R中基于决策树的糖尿病分类—一个零博客
- 编写分段函数子函数_编写自己的函数