elementui表单校验 trigger
时间: 2023-04-29 08:01:35 浏览: 74
elementui表单校验的trigger是指触发校验的事件,可以设置为blur(失去焦点时校验)、change(值改变时校验)或者submit(提交表单时校验)。通过设置不同的trigger,可以实现不同的校验方式。例如,设置为blur时,用户在输入框中输入完毕后,离开输入框时会自动触发校验;设置为submit时,用户点击提交按钮时会对整个表单进行校验。
相关问题
elementui 表单校验
elementui表单校验的trigger是指触发校验的事件,可以设置为blur(失去焦点时校验)、change(值改变时校验)或者submit(提交表单时校验)。通过设置不同的trigger,可以实现不同的校验方式。例如,设置为blur时,用户在输入框中输入完毕后,离开输入框时会自动触发校验;设置为submit时,用户点击提交按钮时会对整个表单进行校验。
elementui表单校验规则
ElementUI 表单校验规则包括以下几种:
1. required:必填项,不能为空。
2. pattern:正则表达式校验,用于检查输入的内容是否符合指定的模式。
3. min:最小值校验,用于检查输入的值是否大于或等于指定的最小值。
4. max:最大值校验,用于检查输入的值是否小于或等于指定的最大值。
5. minlength:最小长度校验,用于检查输入的字符串长度是否大于或等于指定的最小长度。
6. maxlength:最大长度校验,用于检查输入的字符串长度是否小于或等于指定的最大长度。
7. validator:自定义验证函数,用于检查输入的内容是否符合自定义的规则。
这些校验规则可以通过在表单元素上设置属性来实现。例如:
```html
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" :rules="[
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
]"></el-input>
</el-form-item>
```
这里的 `rules` 属性是一个数组,包含了两个校验规则:必填项和长度校验。其中,`required` 和 `min`、`max`、`minlength`、`maxlength` 可以直接设置为布尔值或数值,而 `validator` 则需要设置为一个函数。每个校验规则都包含了 `message` 属性,用于指定校验不通过时的提示信息。此外,还可以设置 `trigger` 属性,用于指定何时触发校验,例如 `blur` 表示失去焦点时校验。