在使用Element-ui的时候,我们使用最多的是封装好漂亮的组件,其实element-ui还提供给了我们很方便的表单验证功能。element-ui提供的表单验证功能如下:
使用表单验证功能步骤:
第一步:使用element-ui的表单。
- el-form容器,通过model绑定数据
- el-form-item容器,通过label绑定标签
- 表单组件通过v-model半丁model中的数据
<template>
<div id="app">
<el-form inline :model="data">
<el-form-item label="用户名">
<el-input v-model="data.user" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
data: {
user: 'sam'
}
}
}
}
</script>
第二步:绑定验证规则
1.el-form容器,通过rules绑定所有的验证规则
2.el-form-item容器,通过prop绑定rules下的验证规则。
<template>
<div id="app">
<el-form inline :model="data">
<el-form-item label="用户名" prop="user">
<el-input v-model="data.user" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'app',
data () {
const userValidator = (rule, value, callback) => {
if (value.length > 3) {
callback()
} else {
callback(new Error('用户名长度必须大于3'))
}
}
return {
data: {
user: 'sam'
},
rules: {
user: [
{ required: true, trigger: 'change', message: '用户名必须录入' },
{ validator: userValidator, trigger: 'change' }
]
}
}
}
}
</script>
解析规则:
- required:是否必须填写。值为布尔值
- trigger:触发校验的条件。值为输入框的事件,类似change和blur。
- message:错误提示信息
- validator:校验器,是一个函数,默认参数是rule、value(输入框的值),callback(回调函数)。如果符合你的规则,就调用callback,不符合就传一个error对象,值是错误提示信息
官网文档没有提及的功能:validate-status
1.el-form容器,添加status-icon属性。让input中显示状态图标。
2.el-form容器,绑定validate-status属性。validate-status的值有:
- success:验证成功
- error:验证失败
- validating:验证中
- 空:未验证
综合应用代码:
<template>
<div>
<el-form
:model="data"
style="width:500px"
label-position="right"
label-width="80px"
label-suffix=":"
:rules="rules"
status-icon
hide-required-asterisk
>
<el-form-item label="用户名" prop="name" :validate-status="status">
<el-input clearable v-model="data.name" @blur="validateName"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input clearable v-model="data.password" type="password"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="re_password">
<el-input clearable v-model="data.re_password" type="password"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input clearable v-model="data.phone" type="text"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data () {
// 封装一下相似功能的校验器
const validatorMethod = function (length, message) {
return (rule, value, callback) => {
if (value.length < length) {
callback(new Error(message))
} else {
callback()
}
}
}
// 确认密码校验器
const comfirmPassword = (rule, value, callback) => {
if (value !== this.data.password) {
return callback(new Error('两次输入密码不一致'))
}
callback()
}
// 手机号校验器
const phoneValidator = (rule, value, callback) => {
if (/^1[3456789]\d{9}$/.test(value)) { // 利用正则表达式校验手机号
callback()
} else {
callback(new Error('请输入正确手机号'))
}
}
return {
status: '',
data: {
name: '',
password: '',
re_password: '',
phone: null
},
// 所有校验规则
rules: {
name: [ // 用户名验证
{ required: true, trigger: 'change', message: '用户名必须填写' },
{ validator: validatorMethod(3, '用户名长度不能小于3'), trigger: 'change' }
],
password: [ // 密码验证
{ required: true, trigger: 'change', message: '密码不能为空' },
{ validator: validatorMethod(8, '密码长度不能小于8'), trigger: 'change' }
],
re_password: [ // 重复密码验证
{ required: true, trigger: 'change', message: '请再一次输入密码' },
{ validator: comfirmPassword, trigger: 'blur' }
],
phone: [ // 手机号验证
{ required: true, trigger: 'change', message: '手机号不能为空' },
{ min: 11, max: 11, trigger: 'change', message: '请输入11位手机号码' },
{ validator: phoneValidator, trigger: 'blur' }
]
}
}
},
components: {
},
methods: {
validateName (e) {
if (e.target.value.trim() !== '') { // 输入框为空不校验
// status的四个值:error(失败),success(成功),validating(验证中),null
this.status = 'validating'
setTimeout(() => { // 模拟发送ajax请求,检查用户名是否重复
if (e.target.value === 'wjg') {
this.status = 'success'
} else {
this.status = 'error'
}
}, 2000)
}
}
}
}
</script>
<style scoped>
</style>
图: