表单验证：

主要用于验证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>

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

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

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

formValidate-----数据验证的表单验证名；
checkName"-----htmlprop对应的参数名；
message，当验证不通过弹出的信息；
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为真，可以添加一些逻辑（例如登录啦，发请求啦等等）

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

前端学习之表单验证（超详细）相关推荐

html input validator,BootstrapValidator 表单验证超详要怎么做？表单验证超详细教程！...
我们在接触Bootstrap的时候总会遇到不同的问题和困难,今天我们就来说说有关于"BootstrapValidator 表单验证超详要怎么做?"这个问题.下面是小编整理的有关于这 ...
【PHP学习】表单验证实现注册功能
上次学了一下最基本的语法,这次笔记中记录的是用上次学到的语法以及第一次的前端页面做表单验证,实现注册功能. 网页界面博客链接:PHP 学习之路(1)-- Simple Message 系统基础语法博 ...
JavaWeb前端开发注册表单验证
注册表单验证最近在尝试学习开发一个网站,现将登录页面的表单验证总结如下表单校验分析 1.用户名:单词字符,8到20位 2.密码:单词字符,8到20位 3.email:邮箱格式 4.姓名:汉字非空 ...
Spring Boot 学习之表单验证
比如电话号码够不够长,邮箱格式是否正确~我们来看看springboot为我们提供了什么样的便利首先我们看看我们之间的实体类ManInfo,我现在在里面添加了 @NotEmpty.@Min等注解, m ...
前端学习 -- HtmlCss -- 表单
表单的作用就是用来将用户信息提交给服务器的,比如:百度的搜索框注册登录这些操作都需要填写表单. 使用form标签创建一个表单,form标签中必须指定一个action属性,该属性指向的是一个服务器的 ...
吴裕雄--天生自然 JAVASCRIPT开发学习：表单验证
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
表单验证模块（获得焦点、失去焦点等验证）
需求文档: 字典类型表单验证.(以下描述你们将在"详细设计文档"中看到.) 1.编码不能为空(前端验证) 2.编码只能由数字和字母组成(前端验证) 3.编码在数据库表当中是主键,要 ...
Django(part46)--form表单验证
学习笔记,仅供参考文章目录 form表单验证举个例子 form表单验证 form提供表单和字段验证,我们可以使用form.is_valid() 方法进行表单验证,若该方法返回值为True,则表示当 ...
前端学习（2684）：重读vue电商网站5之登录页面总结如何进行表单验证
Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可. 通过 rules 属性传入约定的验证规则将 ...

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

表单验证：

iView表单验证：

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

前端学习之表单验证（超详细）相关推荐

最新文章

热门文章