vue使用iview Form组件验证（适用于后台管理系统）

forgetPwd.vue页面

1. 在template中使用iview Form组件

<template>
    <Form ref="forgetPwdForm" :label-width="100" :model="forgetPwdForm" :rules="vailRules" @submit.native.prevent="submit">
        <FormItem prop="mobile">
            <Input v-model="forgetPwdForm.mobile" placeholder="请输入手机号"></Input>
        </FormItem>
        <FormItem prop="password">
            <Input v-model="forgetPwdForm.password" placeholder="请输入密码"></Input>
        </FormItem>
        <FormItem prop="confirmPwd">
            <Input v-model="forgetPwdForm.confirmPwd" placeholder="请确认密码"></Input>
        </FormItem>
        <Button type="primary" @click.native="submit">确认</Button>
    </Form>
</template>
复制代码

2. 定义变量

import iviewRules from './../libs/iviewRules.js'
export default {
    data () {
        /* 两个forgetPwdForm值对比的须要写在该位置 不然会报错 */
        const valiConfirmPwd = (rule, value, callback) => {
            if (value !== this.forgetPwdForm.password) {
                callback(new Error('两次输入的密码不一致'));
            } else {
                callback();
            }
        }
        return {
            forgetPwdForm: {
                mobile: '',
                password: '',
                confirmPwd: ''
            },
            vailRules: [
                mobile: [
                    {required: true, message: '请输入手机号码', trigger: 'blur'},
                    {validator: iviewRules.isPhone, message: '请输入正确的手机号码', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {type: 'string', min: 6, message: '密码至少为6位字符', trigger: 'blur'},
                    {type: 'string', min: 20, message: '密码至多为20位字符', trigger: 'blur'},
                ],
                confirmPwd: [
                    {required: true, message: '请确认密码', trigger: 'blur'},
                    {validator: valiConfirmPwd, message: '两次输入的密码不一致', trigger: 'blur'}
                ]
            ]
        }
    },
    methods: {
        submit () {
            this.$refs.forgetPwdForm.validate((valid) => {
                /* valid的值为true/false 若是所有验证了定义的规则 则valid为true 不然为false 使用此方法 无需二次验证 方便快捷*/
                if (valid) {
                    /* 验证以后须要作的事情 */
                }
            })
        }
    }
}
复制代码

3. vailFormate.js页面

function Rules () {}
Rules.prototype.isPhone = function (value) {
    let reg = /^1[3|4|5|7|8]\d{9}/
    return reg.test(value)
}
export default new Rules()
复制代码

4. iviewRules.js页面

import rules from './../libs/vailFormate.js'
let iviewRules = {}
iviewRules.isPhone = (rule, value, callback) => {
    if (rules.isPhone(value)) {
        callback()
    } else {
        callback(new Error('手机号格式不正确'));
    }
}
export default iviewRules
复制代码