一、进行element-ui引入
先下载element-ui
cnpm install element-ui -S
完整引入和按需引入在Element-UI官方文档都有详细操作步骤⇥element-ui官方文档
二、表单效验的方式
第一种:在el-form表单上加多个验证
这种方式适用于表单全部字段校验或需要校验字段类型比较简单的数据类型
做法:需要在el-form-item标签中加入 :rules=’'rules ‘’ ,然后在data()中写入rule{添加每个表单的验证}
在data中写入以下代码:
其中对于有些需要自定义的校验规则可以作为变量写在data中:
第二种:在el-form-item单个添加验证
这种方式适用于需要个别检验的字段,或者表单字段有变动的校验。
实际操作:需要在el-form-item标签中加入 :rules=’'验证的条件 ‘’
第三种:动态增减表单验证(element-ui官网方法)
除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则
这里的rule、prop直接写就对应不上表单mode绑定的对象上的属性,所以在此要用循环的方式找到要校验的字段所在数据中的索引,然后再以字符串拼接的方式连上校验字段名称
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
<el-form-item
prop="email"
label="邮箱"
:rules="[
{
required: true, message