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

forgetPwd.vue页面

在template中使用iview Form组件


    复制代码

定义变量

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) {                    /* 验证之后需要做的事情 */                }            })        }    }}复制代码

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()复制代码

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复制代码