el-form表单验证的一些实用方法总结

　　前言

　　Form 组件提供了表单验证的功能，只需要通过 属性传入约定的验证规则，并将 Form-Item 的 属性设置为需校验的字段名即可。

　　前置知识点

　　表单校验相关属性

　　方式一（无表单嵌套）

　　以一般的form表单为例：

　　

　　class="demo-ruleForm">

　　

　　

　　

　　

　　一般在vue中这样来写,就可以对表单进行验证。

　　data(){

　　return {

　　ruleForm: { name: '' },

　　rules: {

　　name: [

　　{ required: true, message: '请输入活动名称', trigger: 'blur' },

　　{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }

　　]

　　}

　　}

　　},

　　如果有一些复杂的验证规则，也可以选择自定义验证,

　　data() {

　　const userValidator = (rule, value, callback) => {

　　if (value.length > 3) {

　　callback()

　　} else {

　　callback(new Error('用户名长度必须大于3'))

　　}

　　}

　　return {}

　　}

　　rules: {

　　user: [

　　{ validator: userValidator, trigger: 'change' }

　　]

　　}

　　方式二（表单嵌套）

　　嵌套的表单,一般业务场景是，有一些表单项需要按照条件显示或者隐藏，data里面的model数据可能会是对象里面套对象的，el-form也同样支持嵌套的验证，写法一般如下：

　　

　　class="demo-ruleForm">

　　

　　

　　

　　

　　

　　

　　

　　data(){

　　return {

　　ruleForm: {

　　info: {

　　name: ''

　　}

　　},

　　}

　　}

　　rules里面同样也可以这样写

　　rules: {

　　info: {

　　name: [{ required: true, message: '请选择', trigger: 'change' }],

　　}

　　}

　　方式三（动态表单验证）

　　除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则.

　　动态添加form-item的时候，可以使用

　　

　　方式四（动态添加校验规则）

　　根据条件判断是否需要某种验证规则时，一个简单的使用场景就是，通过不同的type去显示不同的错误信息。

　　const message =

　　this.type === 'addFirst'

　　? '请输入一级名称'

　　: this.type === 'addChild'

　　? '请输入二级名称'

　　: this.type === 'addThree' && this.editChannelItem

　　? '请选择三级名称'

　　: '请输入三级名称';

　　const validatorHandle = (rule, value, callback) => {

　　if (value) {

　　callback();

　　} else {

　　callback(new Error(message));

　　}

　　};

　　const newRule = [...this.formInfoRules.name, { validator: validatorHandle, trigger: 'blur' }];

　　this.formInfoRules = Object.assign({}, this.formInfoRules, { name: newRule });

　　方式五（手动控制校验状态）

　　错误信息

　　验证状态。 success 验证成功， error验证失败， validating验证中，''未验证

　　这样使用：

　　

　　:error="validateFormState.error"

　　:validate-status="validateFormState.state"

　　>

　　

　　validateFormState = {

　　periodSendDateError: '',

　　periodSendDateStatus: 'success',

　　};

　　在验证成功或者失败的时候去手动控制error和validate-status的值即可。

　　总结

　　到此这篇关于el-form表单验证的一些实用方法总结的文章就介绍到这了,更多相关el-form表单验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

　　您可能感兴趣的文章: