elementui form表单.要执行定制化校验的 具体代码和方法
时间: 2024-02-21 19:56:56 浏览: 74
要执行定制化校验,你可以使用 Element UI Form 组件提供的 `rules` 属性。该属性接收一个数组,数组中每个元素代表一个表单项的校验规则。
下面是一个示例代码,展示了如何通过 `rules` 属性实现表单项的定制化校验:
```html
<template>
<el-form :model="form" :rules="rules">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ validator: this.checkUsername, trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度应为6-20位', trigger: 'blur' }
]
}
}
},
methods: {
checkUsername(rule, value, callback) {
if (!/^[a-z0-9]+$/.test(value)) {
callback(new Error('用户名只能包含小写字母和数字'))
} else if (value.length < 4 || value.length > 16) {
callback(new Error('用户名长度应为4-16位'))
} else {
callback()
}
}
}
}
</script>
```
在上面的代码中,我们在 `rules` 属性中定义了两个表单项的校验规则。其中,`username` 表单项的校验规则包括两个部分:第一个是必填校验,第二个是定制化校验,调用了 `checkUsername` 方法。`checkUsername` 方法接收三个参数:`rule` 表示当前校验规则对象,`value` 表示当前表单项的值,`callback` 是一个回调函数,用于返回校验结果。
在 `checkUsername` 方法中,我们对用户名的格式、长度进行了校验,并通过 `callback` 函数返回校验结果。
需要注意的是,定制化校验的方法需要定义在组件的 `methods` 对象中。
以上就是 Element UI Form 组件的定制化校验的具体代码和方法,希望能对你有所帮助。
阅读全文