前端学习之表单验证（超详细）

表单验证：

主要用于验证input框的非空或者类型是否正确。

iView表单验证：

参数详解（html部分）：

<Form ref="form" :model="form" :label-width="100" :rules="formValidate" label-position="left" >
	<FormItem label="表单名称" prop="checkName"  >
		<Input v-model="form.checkName" clearable style="width:570px"/>
    </FormItem>
</Form>

1. :model=“form”-----数据绑定的是form；
2. :rules=“formValidate”-----绑定表单验证规则；
3. 在FormItem里，使用prop来绑定对应表单验证的规则；
4. 在Input里的v-model双向绑定数据，用于展示；

---

参数详解（script部分）：
在data(){}里定义验证规则

formValidate: {
      checkName: [{ required: true, message: '表单名称不能为空', trigger: 'blur' }]
    }

1. formValidate-----数据验证的表单验证名；
2. checkName"-----htmlprop对应的参数名；
3. message，当验证不通过弹出的信息；
4. trigger触发验证的方式;blur(失去焦点触发)；

有提交按钮和重置按钮的情况：

点击提交按钮可验证；点击重置按钮可将数据清空
html部分：

<Button
   @click="handleSubmit"
   type="primary">
   提交
</Button>
<Button @click="handleReset">重置</Button>

script中添加的方法methods:

methodes:{
handleReset() {//重置按钮触发的事件
      this.$refs.form.resetFields();
    },
handleSubmit() {//点击提交按钮进行的表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
        //此处可添加相应完成表单验证的逻辑 例如登录，发请求等等
            }
      });
    },
}

参数详解：

• this.＄refs.form（vue里的ref标记知识，可以快速获取dom）$refs里面是我们在dom里有打上ref标记的集合–.form就是拿到名字为form的dom啦
• resetFields与validate则是iView组件本身自己拥有的方法
• resetFields----清空所要验证的表单的值
• validate----若验证通过判断valid为真，可以添加一些逻辑（例如登录啦，发请求啦等等）

---

至此，简单表单验证思路学习完毕。