vue中使用elementui中表单验证规则,async和await异步函数处理
在el-form-item中 加上prop,然后在输入框内的输入的值和它要双向绑定)在el-form表单中添加规则:rules=“rules”,登录要用到异步函数处理的话,要写在表单校验函数里面。给所需要表单规则验证的属性添加prop属性。在data数据层中定义rules规则。对于每个表单规则验证的提交表单方法。...
·
在el-form表单中添加规则:rules=“rules”,
给所需要表单规则验证的属性添加prop属性
(在el-form-item中 加上prop,然后在输入框内的输入的值和它要双向绑定)
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
<el-form-item label="用 户" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密 码" prop="password">
<el-input type="password" v-model="ruleForm.password" show-password></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loginconfirm()" :loading="loading">登录</el-button>
</el-form-item>
</el-form>
在data数据层中定义rules规则
ruleForm: {
name:'',
password:''
},
rules: {
name: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
}
对于每个表单规则验证的提交表单方法
登录要用到异步函数处理的话,要写在表单校验函数里面
async userLogin(){
const valid = await this.$refs.ruleForm.validate().catch(err => err);
if (valid===true) {
this.loading=true;
//调用后台接口
let response = await GetLogin(config.action_userLogin.action,config.action_userLogin.method,{
SubBusID: config.action_userLogin.SubBusID,
Param: content,
user_id: config.user_id,
sign: getMD5(content),
TID:"",
CTag:""
});
if(response){
this.loading=false;
if(response.status=='200'){
if(response.data.ReslutCode=='1'){
this.$message({
showClose: true,
message: '登录成功',
type: 'success'
});
this.$router.push('/gh');
}else{
this.$message({
showClose: true,
message: response.data.ResultMessage,
type: 'error'
});
}
}
}
} else {
console.log('error submit!!');
return false;
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)