element-ui 表单校验

1 html

        <!-- 写样式：1 placeholder, 2 label, 3 label-width -->
        <!-- 校验：1 v-model, 2 model, 3 prop, 4 rules -->
        <!-- 提交数据：1 事件, 2 ref, 3 validate -->
        <el-form label-width="100px" :model="data" :rules="rules" ref="login">
            <el-form-item label="用户名" prop="username">
                <el-input placeholder="请输入用户名" v-model="data.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input placeholder="请输入密码" type="password" v-model="data.password"></el-input>
            </el-form-item>
            <el-button class="login-btn" type="success" @click="submitData">登录</el-button>
        </el-form>

2 校验文件validator.js

export function username(field, value, callback) {
    // 判断value是否合法
    if (!/^\w{4,8}$/.test(value)) {
        return callback(new Error('用户名是4-8位字母数字下划线'))
    }
    // 没有错误
    callback()
}
export function password(field, value, callback) {
    // 判断value是否合法
    if (!/[a-zA-Z].*\d|\d.*[a-zA-Z]/.test(value)) {
        return callback(new Error('密码要包含字母和数字'))
    }
    // 没有错误
    callback()
}
// 重复性校验
export function repeat(data, name, field, value, callback) {
    // 不能为空
    if (!value) {
        return callback(new Error(`请输入${name}`))
    }
    // 重复性校验
    if (value != data) {
        return callback(new Error(`${name}与重复${name}不一致`))
    }
    // 没有问题
    callback()
}

3 js

// 引入校验方法
import { username, password } from '@t/validator';
export default {
    // 数据
    data() {
        return {
            data: {},
            // 校验规则
            rules: {
                username: [{ trigger: 'blur', validator: username }],
                password: [{ trigger: 'blur', validator: password }]
            }
        }
    },
    // 方法
    methods: {
        // 提交数据
        submitData() {
            // 校验
            this.$refs.login.validate(valid => {
                // 判断是否合法
                if (valid) {
                    this.$store.dispatch('login', this.data)  
                }
            })
        }
    }
}

重复性校验，接收参数

            rules: {
                username: [{ trigger: 'blur', validator: username }],
                password: [{ trigger: 'blur', validator: password }],
                repeat: [{ trigger: 'blur', validator: (...args) => {
                    repeat(this.data.password, '密码', ...args)
                } }]
            }