<!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. switch的穿透，是参数里包含case内容就执行。

    package rom; import java.lang.*; /* * switch的穿透,是参数里包含case内容就执行. */ public class Xamle_5 { public st ...

  2. FastDFS 配置 Nginx 模块，并实现分布式同步-Linux

    1.搭建虚拟机 a.复制虚拟机文件 首先复制我们之前安装好的fastdfs虚拟机,因为我们现在要设置它的IP为21,改名为CentOS-fastdfs - 21. b.设置网络 生成新的MAC地址 设 ...

  3. ClassNotFoundException: javax.validation.ValidatorFactory

    spring mvc 程序. 浏览器一访问controller 则出现: ClassNotFoundException: javax.validation.ValidatorFactory ... 很 ...

  4. WebForm多页面传值跳转

    一.URL传值 URL传值是利用跳转地址直接加变量定义内容 格式:跳转地址?任意变量=传的值--?=之间不能有空格 多条数据传值 在地址栏继续拼接&key=value void Button1 ...

  5. Flex的一些小实例

    1,以上是一个导航菜单 2一下是一个撑开的mx:Spacer

  6. HTML5 Canvas 小例子 旋转的时钟

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. leetcode153

    class Solution: def findMin(self, nums: 'List[int]') -> int: l = 0 h = len(nums)-1 while l < h ...

  8. 深度学习原理与框架-神经网络-cifar10分类(代码) 1.np.concatenate(进行数据串接) 2.np.hstack(将数据横着排列) 3.hasattr(判断.py文件的函数是否存在) 4.reshape(维度重构) 5.tanspose(维度位置变化) 6.pickle.load(f文件读入) 7.np.argmax(获得最大值索引) 8.np.maximum(阈值比较)

    横1. np.concatenate(list, axis=0) 将数据进行串接,这里主要是可以将列表进行x轴获得y轴的串接 参数说明:list表示需要串接的列表,axis=0,表示从上到下进行串接 ...

  9. 为什么java实体类需要重写toString方法

    如果没重写toString的情况: Object 类的 toString 方法 返回一个字符串,该字符串由类名(对象是该类的一个实例).at 标记符“@”和此对象哈希码的无符号十六进制表示组成.换句话 ...

  10. 减少mysql主从数据同步延迟

    网上给出的解决办法: 基于局域网的master/slave机制在通常情况下已经可以满足'实时'备份的要求了.如果延迟比较大,就先确认以下几个因素:1. 网络延迟2. master负载3. slave负 ...