简单用户管理系统（P-10）

element-ui 的应用

常规的地址 饿了么文档
接下来创建一个register.vue页面
模板直接拷贝了,需要一个div，然后可以去查看element的form表单文档，
:rules是验证表单的规则，label-wdith是表单的显示label的宽度， :model是绑定的数据源，都是el的属性，具体内容详看el文档

<div class="register">
        <section class="form-container">
            <div class="manage-tip">
                <span class="title">后台管理系统</span>
            </div>
            <el-form ref="registerForm" :model="registerUser" :rules="rules" class="registerForm" label-width="80px">
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="registerUser.name" placeholder="请输入用户名" clearable></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="registerUser.email" placeholder="请输入邮箱" clearable></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="registerUser.password" placeholder="请输入密码" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="password2">
                    <el-input v-model="registerUser.password2" placeholder="请确认密码" type="password"></el-input>
                </el-form-item>
                <el-form-item label="选择身份">
                    <el-select v-model="registerUser.identity" placeholder="请选择身份">
                        <el-option label="管理员" value="manager"></el-option>
                        <el-option label="员工" value="employee"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="success"  class="submit_btn" @click="submitForm('registerForm')">注 册</el-button>
                </el-form-item>
            </el-form>
        </section>
    </div>

• 接下来你需要去定义他的验证规则
  验证两个密码是否一致

    var validatePass2 = (rule, value, callback) => {
            if (value !== this.registerUser.password){
                callback(new Error('两次输入密码不一致'))
            } else {
                callback();
            }
        };

在数据返回的时候定义好表单的对象属性，将验证规则返回

data() {
        // 自定义验证两个密码匹配规则
        var validatePass2 = (rule, value, callback) => {
            if (value !== this.registerUser.password){
                callback(new Error('两次输入密码不一致'))
            } else {
                callback();
            }
        };
        return {
            registerUser: {
                name: "",
                email: "",
                password: "",
                password2: "",
                identity: ""
            },
            rules: {
                name: [
                    { required: true, message: "用户名不能为空", trigger: "change" },
                    { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" }
                ],
                email: [
                    { type: "email",required: true,message: "邮箱格式不正确",trigger: "blue" }
                ],
                password: [
                    { required: true, message: "密码不能为空", trigger: "blur" },
                    { min: 6, max: 30, message: "长度在 6 到 30 个字符", trigger: "blur" }
                ],
                password2: [
                    { required: true, message: "密码不能为空", trigger: "blur" },
                    { min: 6, max: 30, message: "长度在 6 到 30 个字符", trigger: "blur" },
                    { validator: validatePass2, trigger: "blur" } 
                ]
            }
        };
    },

trigger是在什么时候触发，验证规则具体分清楚，validator验证规则

methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    alert("submit!");
                    // 执行请求axios
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
    }

具体的方法看验证成功