iview 验证一个表单问题:
在上一篇文章中总结了 iview 表单验证的问题. 其实有两种写法: 在点击验证时, 这样写时, 注意在前面的方法中将要验证的 form 表单加进去.
- <Form ref="addAreaForm" :model="addAreaForm" :rules="ruleValidate" :label-width="120"></Form>
- // 点击确认按钮
- <Button type='primary' @click='addAreaOK("addAreaForm")'> 确定 </Button>
- addAreaOK(name){
- this.$refs[name].validate((valid)=>{
- if (valid){
- alert('验证成功')
- }
- })
- }
还有一种写法: 保存按钮不传 form 表单, 在验证时直接 this.$refs.addpurchaseForm.validate
- <Button type="primary" @click="handleSubmit"> 保存 </Button>
- this.$refs.addpurchaseForm.validate((valid) => {
- // console.log(valid)
- if (valid) {
- alert('验证成功')
- }
- })
iview 验证多个表单问题: 在多表单验证时, 让页面中的两个 form 都通过校验才能保存. 解决方法就是: 先验证第一个, 在第一个验证通过得里面, 验证第二个.
- this.$refs.addpurchaseForm.validate((valid) => {
- // console.log(valid) // 第一层验证第一个表单
- if (valid) {
- this.$refs.gasDataForm.validate((valid) => {
- // console.log(valid)// 第二层验证第二个表单
- if(valid){
- alert('验证成功')
- }
- })
- }
- })
补充: iview 表单 number 验证
将原来的 number 转为 string 来处理, 并且在验证中判断是否是整数.
来源: http://www.jb51.net/article/148238.htm