iview 表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/iview.css" />
<script src="js/vue.min.js"></script>
<script type="text/javascript" src="js/iview.min.js"></script>
</head>
<body>
<div id="example">
<row>
<i-col span="6" offset="9">
<i-form :label-width="100" ref='formItemP' :model="formItemP" :rules='ruleValidateP'>
<form-item label="请输入旧密码" prop="oldPwd">
<i-input placeholder="请输入旧密码" v-model="formItemP.oldPwd" name=""></i-input>
</form-item>
<form-item label="请输入新密码" prop="newPwd">
<i-input placeholder="请输入新密码" v-model="formItemP.newPwd"></i-input>
</form-item>
<form-item label="重新输入密码" prop="repeatPwd">
<i-input placeholder="重新输入密码" v-model="formItemP.repeatPwd"></i-input>
</form-item>
<form-item>
<i-button type="primary" @click="handleSubmit('formItemP')">提 交</i-button>
<i-button type="ghost" @click="handleReset('formItemP')" style="margin-left: 8px">重 置</i-button>
</form-item>
</i-form>
</i-col>
</row>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#example",
data: {
formItemP: {
oldPwd: "",
newPwd: "",
repeatPwd: ""
},
ruleValidateP: {
oldPwd: [{
required: true,
message: '请输入旧密码',
trigger: 'blur'
}],
newPwd: [{
required: true,
message: '请输入新密码',
trigger: 'blur'
}],
repeatPwd: [{
required: true,
trigger: 'blur',
validator: function(rule, value, callback) {
if(value == '') {
return callback(new Error('请再次输入密码'));
} else if(value != app.formItemP.newPwd) {
return callback(new Error('两次密码不一致'));
} else {
callback();
}
}
}]
}
},
methods: {
handleSubmit(name) {
this.$refs[name].validate((valid) => {
if(valid) {
this.$Message.success('成功!');
} else {
this.$Message.error('失败!');
}
})
},
handleReset(name) {
this.$refs[name].resetFields();
}
}
})
</script>
</body>
</html>
iview 表单验证的更多相关文章
- iview表单验证下拉框不通过问题
iview表单验证的步骤: 第一步:给 Form 设置属性 rules :rules 第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步:注意 ...
- iview表单验证不生效问题注意点
按照iview官网介绍写的form表单验证,但是无论填写与否都不进行校验,找了很久的原因,突然才发现一个关键的地方,一定要加props!!! https://blog.csdn.net/xuaner8 ...
- iview表单验证之正则验证、函数验证
iview表单验证之正则 正则验证: 代码: loginRules: { stringLength: [ { required: true, message: '该字段不能为空', trigger: ...
- 有关使用 iview 表单验证的问题
Vue的UI解决框架,element-UI, iview-UI 有关表单验证使用的是同一个插件,async-validator,有关这个插件的用法就不做赘述,但是在iview表单的使用中可能会用到验证 ...
- iview 表单验证不通过问题？
项目需要,需要怂iview..使用一段时间感觉跟elementUI用起来差不多很方便.使用过程中遇到表单验证问题,如何避免在验证过程中偶尔出现验证不通过的异常情况? <1>:给 <F ...
- vue中使用iview表单验证时this指针问题
需求 使用iview,在提交时对值b进行验证,使其不能大于值a 实现 <Form ref="config" :model="config" :rules= ...
- iview表单验证trigger:'change,blur'
今天发现,如果设置select的trigger:'blur'就算选择之后还是边框是红色的,之后查了一下iview的文档,也没有找到准确的蚊子描述,只看到form那个组件其中有一个例子,大概是selec ...
- iview表单验证数字
验证输入字符串必须为数字 html: <FormItem label="兑换积分:" prop="exchangeIntegral"> <In ...
- iview表单验证--数字必填+校验
直接使用: { required: true, type:"integer", message:"请填写整数", trigger: "blur&quo ...
随机推荐
- 安全测试6_Web安全工具第二节（代理抓包分析工具）
上节课讲了浏览器及扩展,这节课继续来学习下抓包分析. 首先看下下图,了解下代理工具的原理:代理就相当于收费站一样,任何要通过的车辆必须经过它. 浏览器的代理我们可以通过设置进行手动设置代理,或者通过P ...
- Maven依赖下载速度慢，不用怕，这么搞快了飞起
一.背景 众所周知,Maven对于依赖的管理让我们程序员感觉爽的不要不要的,但是由于这货是国外出的,所以在我们从中央仓库下载依赖的时候,速度如蜗牛一般,让人不能忍,并且这也是大多数程序员都会遇到的问题 ...
- idea 控制台行数限制
在本地进行测试时,会出现报错太多idea控制台被限制打印出来的日志被清楚的现象: idea改变控制台打印log限制的方法: 1. 点击 File ->Settings ->editor - ...
- jquery轮播图片（无插件简单版）
轮播图(第三版)[2016-2-26] 工作中用的,改写了半透明蒙版,可以兼容ie7 <script type="text/javascript" src="htt ...
- sparksql进阶
scala> val df=spark.read.json("/tmp/pdf1json")df: org.apache.spark.sql.DataFrame = [age ...
- 利用strstr和sscanf解析GPS信息
比如说我们要做一个GPS导航的项目,需要读取GPS模块以ASCII码的形式发送过来的数据,然后对这些数据进行处理,提取我们需要的信息.这就涉及到很多操作字符串的问题.下面就以此为例,利用strstr函 ...
- golang判断文件/文件夹是否存在
使用os包,os.stat返回err==nil,说明存在: os.IsNotExist(err)为true,说明不存在:否则不确定是否存在 func DelJar(fileName string) e ...
- day41-解决粘包问题
一.socket缓冲区 研究粘包之前先看看socket缓冲区的问题: 二.socket缓存区的详细解释 每个socket被创建后,都会分配两个缓冲区,输入缓冲区和输出缓冲区. write()/send ...
- 自动调整linux系统时间和时区与Internet时间同步
调整linux系统时间和时区与Internet时间同步 一.修改时区:# cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime修改为中国的东八区# v ...
- 用URL传递参数
用URL传递参数,在园子里找到一篇文章解决了自己的问题,地址如下:http://www.cnblogs.com/lolicon/archive/2009/01/19/1378408.html