<!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 表单验证的更多相关文章

  1. iview表单验证下拉框不通过问题

    iview表单验证的步骤: 第一步:给 Form 设置属性 rules :rules 第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步:注意 ...

  2. iview表单验证不生效问题注意点

    按照iview官网介绍写的form表单验证,但是无论填写与否都不进行校验,找了很久的原因,突然才发现一个关键的地方,一定要加props!!! https://blog.csdn.net/xuaner8 ...

  3. iview表单验证之正则验证、函数验证

    iview表单验证之正则 正则验证: 代码: loginRules: { stringLength: [ { required: true, message: '该字段不能为空', trigger: ...

  4. 有关使用 iview 表单验证的问题

    Vue的UI解决框架,element-UI, iview-UI 有关表单验证使用的是同一个插件,async-validator,有关这个插件的用法就不做赘述,但是在iview表单的使用中可能会用到验证 ...

  5. iview 表单验证不通过问题？

    项目需要,需要怂iview..使用一段时间感觉跟elementUI用起来差不多很方便.使用过程中遇到表单验证问题,如何避免在验证过程中偶尔出现验证不通过的异常情况? <1>:给 <F ...

  6. vue中使用iview表单验证时this指针问题

    需求 使用iview,在提交时对值b进行验证,使其不能大于值a 实现 <Form ref="config" :model="config" :rules= ...

  7. iview表单验证trigger:'change,blur'

    今天发现,如果设置select的trigger:'blur'就算选择之后还是边框是红色的,之后查了一下iview的文档,也没有找到准确的蚊子描述,只看到form那个组件其中有一个例子,大概是selec ...

  8. iview表单验证数字

    验证输入字符串必须为数字 html: <FormItem label="兑换积分:" prop="exchangeIntegral"> <In ...

  9. iview表单验证--数字必填+校验

    直接使用: { required: true, type:"integer", message:"请填写整数", trigger: "blur&quo ...

随机推荐

  1. 安全测试4_客户端的安全漏洞（XSS、CSRF、点击劫持、URL跳转）

    那个fanh前面学习的都是基础,现在开始正式学习下安全的知识,这一章主要讲解客户端常见的安全漏洞. 看到这个不错,给大家记一下: 1.常见的安全事件: 2.XSS(跨站脚本),英文全称:Cross S ...

  2. JDK源码阅读顺序

      很多java开发的小伙伴都会阅读jdk源码,然而确不知道应该从哪读起.以下为小编整理的通常所需阅读的源码范围. 标题为包名,后面序号为优先级1-4,优先级递减 1.java.lang 1) Obj ...

  3. [Unity插件]Lua行为树(十一)：组合节点Parallel

    Parallel节点类似Sequence节点,不同在于Parallel会每帧执行所有的节点.当所有节点返回成功时返回成功,当其中一个节点返回失败时,返回失败并且结束所有的子节点运行. 例如说,给Seq ...

  4. couchdb

    http://docs.couchdb.org/en/2.0.0/api/database/find.html#find-selectors

  5. 学习笔记：ES6

    http://es6.ruanyifeng.com/ ECMAScript 6 https://frankfang.github.io/es-6-tutorials/ ES 6 新特性列表 2017- ...

  6. tensorflow 入门

    1.  tensorflow 官方文档中文版(下载) 2.  tensorflow mac安装参考 http://www.tuicool.com/articles/Fni2Yr 3. 源码例子目录 l ...

  7. Ubuntu下无法使用Secure_CRT连接服务器

    虚拟机使用 1 .指令安装了SSH服务器 sudo apt-get install openssh-server 2. 输入命令 ps | grep ssh 查看SSH服务是否开启 显示服务已开启 3 ...

  8. Dubbo 暴露服务

    1. 引入dubbo依赖 dubbo 依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId&g ...

  9. ubuntu-14.04中/boot分区不足的解决办法

    环境:ubuntu-kylin 或者 ubuntu-14.04,/boot单独分区工具:ubuntu的liveCD. 问题: 由于当初安装的时候,看网上说/boot很小,100M足以,于是单独分区,分 ...

  10. python 阿狸的进阶之路(6)

    常用模块 json # 序列化 #将内存的数据存到硬盘中,中间的格式,可以被多种语言识别,跨平台交互数据 #json 可以将字典之类的数据类型存到字典中 import json dic = {&quo ...