前言
记录不同情况下的表单字段校验情况。
一、表单验证的作用是什么?
在防止用户犯错的前提下,尽可能让用户更早地发现并纠正错误。
二、如何使用?
Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
一个字段可以有多个校验规则,required 设置必填,type 设置数据类型, min 设置最小长度, max 设置最大长度,trigger 设置校验触发时机(多个用数组形式),message 设置提示内容,validator 设置自定义校验内容。
1.普通字段
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
/** 表单内容 */
ruleForm: {
name:'',
},
/** 表单校验规则 */
rules: {
name: [
{ type:'string', required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
}
}
}
}
</script>
2.对象
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
<el-form-item label="活动名称" prop="obj.name">
<el-input v-model="ruleForm.obj.name"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
/** 表单内容 */
ruleForm: {
obj:{
name:'',
},
},
/** 表单校验规则 */
rules: {
obj: {
name: [{ type:'string', required: true, message: '请输入活动名称', trigger: 'blur' }],
},
}
}
}
}
</script>
3.对象数组
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
<el-row :gutter="20">
<el-col :span="24" v-for="(item, index) in ruleForm.versions" :key="index">
<div" v-for="(pItem, pIndex) in item.params" :key="pIndex">
<el-form-item :prop="`versions[${index}][params][${pIndex}][key]`"
:rules="rules.versions_params_key">
<el-input v-model="pItem.key" placeholder="请输入参数名称"></el-input>
</el-form-item>
</div>
</el-col>
<el-row>
</el-form>
</template>
<script>
export default {
data() {
return {
/** 表单内容 */
ruleForm: {
versions: [
{
name: '版本1',
params: [{
key: '',
}],
},
]
},
/** 表单校验规则 */
rules: {
versions_params_key: [{ required: true, message: '请输入参数名称', trigger: 'blur' }],
}
}
}
}
</script>
4.自定义校验规则
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
<el-form-item label="年龄" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'));
}
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
};
return {
/** 表单内容 */
ruleForm: {
name:'',
},
/** 表单校验规则 */
rules: {
age: [{ validator: checkAge, trigger: 'blur' }]
}
}
}
}
</script>
总结
以上就是今天要记录的内容,本文仅仅简单介绍了element 表单开发中比较常见的情况,更复杂的一些校验需要按照实际业务进行编写。