Vue2.0+ElementUI简单form表单验证

首先：template

先创建一个form表单，：model绑定表单索要提交的对象，：rules2是此表单绑定的校验规则，ref用来绑定这个dom元素，之后在$refs调用。

<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" >
    <h3 class="title">后台管理登录</h3>
    <el-form-item prop="account">
        <el-input type="text" v-model="ruleForm2.account" :maxlength='20' auto-complete="off" placeholder="请输入用户名" @keyup.enter.native='handleSubmit2'></el-input>
    </el-form-item>
    <el-form-item prop="checkPass">
        <el-input type="password" v-model="ruleForm2.checkPass" :maxlength='16' auto-complete="off" placeholder="请输入密码"  @keyup.enter.native='handleSubmit2'></el-input>
    </el-form-item>
    <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
    </el-form-item>
    <p class="forgetP" @click="goToforget">忘记密码？</p>
</el-form>

• 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括
  Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker等。
• 通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left，当设为 top
  时标签会置于表单域的顶部。
• Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并 Form-Item 的 prop
  属性设置为需校验的字段名即可。

然后是：data

data() {
        //用户名自定义校验规则
        var validateAccount = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入用户名'));
            } else {
                var targ = /^[A-Za-z0-9]+$/;
                if( !targ.test(value)){
                    callback(new Error('用户名只支持英文、数字'));
                }
                callback();
            }
        };
        return {
            logining: false,//加载动画
            ruleForm2: {
                account: '',//用户名
                checkPass: ''//密码
            },
            rules2: {
                account: [
                    { validator: validateAccount, trigger: 'blur' }
                ],
                checkPass: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 8, max: 16, required: true, message: '密码至少为8位', trigger: 'blur' },
                ]
            },
        };
    },

rules2是我们表单校验的规则，是一个对象，因为有用户名和密码，所有我们要设置两个校验规则，分别为两个数组。
先看用户名的校验规则：
{ validator: validateAccount, trigger: ‘blur’ }
async-validator 是一个异步验证的库，需要传入要验证的数据和验证规则
官方链接 https://github.com/yiminghe/async-validator

最后：methods

methods: {
        //点击登录
        handleSubmit2(ev) {
            var _this = this;
            this.$refs.ruleForm2.validate((valid) => {
                if (valid) {
                    this.logining = true;
                    //用户信息
                    var loginParams = {
                        userName: this.ruleForm2.account,
                        userPassword: this.ruleForm2.checkPass,
                        loginInfo:""
                    };
                    requestLogin(loginParams).then(data => {
                       console.log(data)
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

    }