element-ui中表单校验:用户账号长度为 4-30 个字符,并由 数字、字母 组成
时间: 2023-11-27 14:53:20 浏览: 38
可以使用 Element-UI 中的 el-form 组件和 el-form-item 组件来实现表单校验,其中 el-form-item 组件可以通过设置 prop 属性来关联需要进行校验的表单项。
下面是一个实现用户账号校验的示例代码:
```html
<template>
<el-form ref="form" :model="formData" :rules="rules">
<el-form-item label="用户账号" prop="username">
<el-input v-model="formData.username"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
formData: {
username: ''
},
rules: {
username: [
{ required: true, message: '请输入用户账号', trigger: 'blur' },
{ min: 4, max: 30, message: '用户账号长度为 4-30 个字符', trigger: 'blur' },
{ pattern: /^[a-zA-Z0-9]+$/, message: '用户账号只能由数字、字母组成', trigger: 'blur' }
]
}
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单校验通过,提交表单
} else {
console.log('表单校验未通过')
}
})
}
}
}
</script>
```
在上述代码中,我们通过设置 el-form-item 的 prop 属性为 "username",并在 rules 中关联了 "username" 属性的校验规则。其中,通过 required 属性来设置必填项,min 和 max 属性来限制长度,pattern 属性来限制输入内容的格式。
最后,在提交表单时,我们使用 this.$refs.form.validate 方法来进行表单校验,并在回调函数中判断校验结果。