<template>
<div>
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="100px"
>
<el-form-item
prop="userName"
label="用户名"
>
<el-input v-model="form.userName"></el-input>
</el-form-item>
<!--标签内的验证-->
<el-form-item label="用户名" :prop="userName" :rules="[{ required: true, message: '请输入用户名',trigger: 'blur'}]">
<el-input v-model="userName" :maxlength="16" placeholder clearable></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
import API from '@/api/rules'
export default {
components: {},
name: 'rules',
data() {
// 后台校验
let validateUserName = (rule, value, callback) => {
// 调用后台API校验用户名是否已存在
API.validateUserNameApi(value).then(res => {
if (res) {
callback(new Error('账号已存在!'))
} else {
callback()
}
}).catch(() => {
callback(new Error('账号验证重复api出错!'))
})
}
return {
form: {
userName: ''
},
rules: {
userName: [
// elementUI 常规校验
{ required: true, min: 3, max: 20, message: '账户为3~20位', trigger: ['blur', 'change'] },
// 正则表达式校验
{ pattern: /^[A-Za-z0-9_]+$/, message: '由字母、数字、下划线组成', trigger: ['blur', 'change'] },
// 后台校验
{ validator: validateUserName, trigger: 'blur' }
]
}
}
}
}
</script>
element ui 表单校验的多种姿势
最新推荐文章于 2023-01-28 10:09:22 发布