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

}