新的需求,需要使用原生表单提交并待参跳转到对应的页面。
在网上查了一些,有些是在form表单添加 @submit.prevent="submit"
但是没有成功,在点击注册的时候是函数都没有进去,同时还有一个问题,因为采用的是element ui 框架,select
选择器选取内容无法进行获取,获取到的都是label
。实际上要提交的是key
,但是key
是vue的方法,所以后面就采用了其他的方式。
整体的思路就是:先阻止form
表单提交,阻止之后在把key
的值直接赋值到input
上,这样就能够获取到key
并发送给后台。
如果要使用element UI上面的form
提交没有找到方法,elementUI 在select
表单的属性里面有一个属性是value-key
,使用后发现也没有用,提交的内容一直都是input里面值。
具体实现就是,使用原生submit
方法进行手动提交,点击后使用document.getElementById
进行赋值,如果要做验证的话,就需要阻止提交方法,JavaScript有两种提交方式,1、return false
;2、preventDefault
,考虑到兼容问题的可以使用returnValue
来进行组织;
第一种方式试过,不起作用,第二种方式可以解决。
<form :model="value" name="app" @submit="doSubmit" action="提交的地址"
method="post" label-position="left" label-width="0px" class="demo-ruleForm login-container">
<h3 class="title">系统注册</h3>
<div class="user">
<el-input type="text" class="margin_form" id="users" auto-complete="off" name="user_name" v-model="value.user" placeholder="用户名"></el-input>
<span v-if="userNull" class="annotation">* 请输入用户名</span>
</div>
<div class="dept">
<el-select class="margin_form" v-model="value.option" id="dept" name="user_dept" :value="value.option" placeholder="请选择部门"
style="width:100%;">
<el-option v-for="(item, index) in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<span v-if="deptNull" class="annotation">* 请选择部门</span>
</div>
<el-input id="margin_form_btn" type="submit" value="注册"></el-input>
</form>
使用第二种方式解决
doSubmit() {
var users= document.getElementById('users')
var dept = document.getElementById('dept')
if (users.value =="" && dept.value =="") {
this.userNull = true
this.deptNull = true
window.event.returnValue = false
} else if (dept.value =="") {
this.userNull = false
this.deptNull = true
window.event.returnValue = false
} else if (users.value =="") {
this.userNull = true
this.deptNull = false
window.event.returnValue = false
}else{
this.userNull = false
this.deptNull = false
dept.value = this.value.option
}
}
网友评论