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;                }            });        },    }