当前位置：首页 > news >正文

Vue.js学习笔记（六）element表单校验规则

news 来源：原创 2024/9/20 11:42:32

文章目录

前言
一、表单验证的作用是什么？
二、如何使用？
- 1.普通字段
- 2.对象
- 3.对象数组
- 4.自定义校验规则
总结

前言

记录不同情况下的表单字段校验情况。

一、表单验证的作用是什么？

在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。

二、如何使用？

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>