vue + element ui开发得管理系统对于前端开发来说是比较常见得，当然，今天说的并不是vue + element ui的这种模式。而是说一下element ui中的表单验证规则。
表单在日常开发中是一个经常遇到的开发场景，element封装了一套表单的组件，其中还带有验证的一套规则。https://element.eleme.cn/#/zh-CN/component/form
这极大的方便了我们的开发。
下面开始介绍表单验证的基本用法
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
简单的表单验证
界面
布局代码
<h2>简单的表单验证</h2>
<el-form ref="simpleForm" :model="simpleForm" label-width="100px" :rules="simpleRules">
<el-form-item label="姓名" prop="name">
<el-input v-model="simpleForm.name" placeholder="请输入您的姓名" />
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-radio-group v-model="simpleForm.sex">
<el-radio label="男" />
<el-radio label="女" />
</el-radio-group>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="simpleForm.age" placeholder="请输入您的年龄" />
</el-form-item>
<el-form-item label="所在年级" prop="class">
<el-select v-model="simpleForm.class" placeholder="请选择您的年级">
<el-option label="一年级" value="一年级" />
<el-option label="二年级" value="二年级" />
<el-option label="三年级" value="三年级" />
<el-option label="四年级" value="四年级" />
<el-option label="五年级" value="五年级" />
<el-option label="六年级" value="六年级" />
</el-select>
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input v-model="simpleForm.phone" placeholder="请输入您的手机号码" />
</el-form-item>
<el-form-item label="爱好" prop="hobby">
<el-checkbox-group v-model="simpleForm.hobby">
<el-checkbox label="唱歌" name="hobby" />
<el-checkbox label="跳舞" name="hobby" />
<el-checkbox label="跑步" name="hobby" />
<el-checkbox label="健身" name="hobby" />
<el-checkbox label="做饭" name="hobby" />
<el-checkbox label="吃货" name="hobby" />
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="clickSimpleForm('simpleForm')">立即创建</el-button>
</el-form-item>
</el-form>
可以看到，form表单绑定的:model为simpleForm，表单组件名字为simpleForm，绑定的表单验证规则为simpleRules，它和form-item中的prop相对应才会生效
data中的模型和rules规则
data() {
return {
/**
* 简单的表单
*/
// 表单模型
simpleForm: {
name: '',
sex: '',
age: '',
class: '',
phone: '',
hobby: []
},
// 表单规则
simpleRules: {
name: [
{ required: true, message: '请输入您的姓名', trigger: 'blur' },
{
min: 3,
max: 10,
message: '长度在 3 到 10 个字符',
trigger: 'blur'
}
],
sex: [{ required: true, message: '请选择您的性别', trigger: 'change' }],
age: [
{ required: true, message: '请选择您的年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须为数值类型', trigger: 'blur' }
],
class: [{ required: true, message: '请选择您所在的年级', trigger: 'change' }],
phone: [
{ required: true, message: '请输入您的手机号码', trigger: 'blur' },
{ min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' }
],
hobby: [{
required: true,
message: '至少选择一个爱好',
trigger: 'blur'
}]
}
}
},
说明：
-
simpleForm是表单的模型 -
simpleRules是表单的验证规则
验证规则一些常用字段
-
required：是否为必须，用于验证字段内容是否为空 -
type：数据类型。默认是string。常见的类型有number，boolean，integer，float，array，date，email等 -
pattern：正则表达式 -
min和max：对于string和数组来说，min和max表示最小和最大的长度；对于数字number来说，表示限制值大小 -
trigger：触发验证的条件 -
validator：自定义校验
如果需要主动触发验证条件，怎么做？
this.refs[formName].validateField(‘验证字段名’)
自定义校验规则
自定义
界面布局
<h2>自定义规则验证表单</h2>
<el-form ref="customForm" :model="customForm" label-width="100px" :rules="customRules">
<el-form-item label="姓名" prop="name">
<el-input v-model="customForm.name" placeholder="请输入您的姓名" />
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-radio-group v-model="customForm.sex">
<el-radio label="男" />
<el-radio label="女" />
</el-radio-group>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="customForm.age" placeholder="请输入您的年龄" />
</el-form-item>
<el-form-item label="所在年级" prop="class">
<el-select v-model="customForm.class" placeholder="请选择您的年级">
<el-option label="一年级" value="一年级" />
<el-option label="二年级" value="二年级" />
<el-option label="三年级" value="三年级" />
<el-option label="四年级" value="四年级" />
<el-option label="五年级" value="五年级" />
<el-option label="六年级" value="六年级" />
</el-select>
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input v-model="customForm.phone" placeholder="请输入您的手机号码" />
</el-form-item>
<el-form-item label="爱好" prop="hobby">
<el-checkbox-group v-model="customForm.hobby">
<el-checkbox label="唱歌" name="hobby" />
<el-checkbox label="跳舞" name="hobby" />
<el-checkbox label="跑步" name="hobby" />
<el-checkbox label="健身" name="hobby" />
<el-checkbox label="做饭" name="hobby" />
<el-checkbox label="吃货" name="hobby" />
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="clickCustomForm('customForm')">立即创建</el-button>
</el-form-item>
</el-form>
data中的form模型和rules
data() {
return {
/**
* 自定义规则表单
*/
// 表单模型
customForm: {
name: '',
sex: '',
age: '',
class: '',
phone: '',
hobby: []
},
// 表单规则
customRules: {
name: [
{ required: true, message: '请输入您的姓名', trigger: 'blur' },
{
min: 3,
max: 10,
message: '长度在 3 到 10 个字符',
trigger: 'blur'
},
{
validator: (rule, value, callback) => {
if (value.indexOf('王五') !== -1) {
callback(new Error('您的名字不能包含王五'))
} else {
callback()
}
},
trigger: 'blur'
}
],
sex: [{ required: true, message: '请选择您的性别', trigger: 'change' }],
age: [
{ required: true, message: '请选择您的年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须为数值类型', trigger: 'blur' }
],
class: [
{ required: true, message: '请选择您所在的年级', trigger: 'change' }
],
phone: [
{ required: true, message: '请输入您的手机号码', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value.length !== 11) {
callback(new Error('请输入11位手机号码呀'))
} else {
callback()
}
},
trigger: 'blur'
}
],
hobby: [
{
required: true,
message: '至少选择一个爱好',
trigger: 'blur'
}
]
}
}
}
可以看到，rules中多了一个字段validator。这个字段可以定义一个方法，参数为(rule, value, callback)。
其中value就是触发验证事件时当前输入的value，通过对value的监听，可以自己验证value是否符合要求。如果符合要求，直接callback()，即表示验证通过，可以继续进行下一步了；否则，验证不通过，调用callback(new Error('填写错误原因'))，这样验证错误后，错误的原因显示和之前一样。
