Vant-UI 表单组件(Field组件):验证表单元素&&表单提交:
示例截图 · 如下:
示例 · 详细代码 · 如下:
<template>
<div class="hello">
<!-- 导航栏 代码省略-->
<!-- 登录页 用户表单 -->
<van-cell-group>
<van-field
v-model="username"
clearable
label="用户名"
right-icon="question-o"
placeholder="请输入用户名"
left-icon="contact"
@click-right-icon="$toast('用户名必须是手机号')"
/>
<van-field
v-model="password"
clearable
type="password"
label="密码"
right-icon="question-o"
placeholder="请输入密码"
left-icon="closed-eye"
@click-right-icon="$toast('密码必须是数字、字母、下划线')"
/>
<!--登录按钮-->
<div class="pd15"><van-button type="primary" size="large" @click="onClickButtonSubmit">登录</van-button></div>
</van-cell-group>
</div>
</template>
<script>
import axios from 'axios'
const token = '123456';
export default {
name: 'login',
data () {
return {
errors: [],
username: "",
password: ""
}
},
methods: {
onClickRight() {
this.$toast('请填写注册信息');
this.$router.push({ path:'/register'});
},
// 表单提交
onClickButtonSubmit: function (e,username,password) {
if(this.username == ''){
this.$toast("用户名不能为空");
return false;
}
if(this.password == ''){
this.$toast("密码不能为空");
return false;
}
else{
// this.$toast('token='+token);
var that=this // 放置指针,便于then操作的获取
axios.get('接口地址', {
params: {
userName: this.username
}
}).then(function (response) {
console.log(response);
var reslutData=response;
console.log(reslutData.data.status )
if(reslutData.data.status == 1002){
this.$toast(reslutData.data.desc);
}
if(reslutData.data.status == 1000){
this.$toast(reslutData.data.desc);
this.$router.push({
path: '/receData',
query: {
reslutData
}
});
}
}.bind(this))
.catch(function (error) {
console.log("请求失败"+error);
});
e.preventDefault();
}
},
validEmail: function (password) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(password);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>
vant
为什么本人不使用<form>
标签提交表单?
- 因为使用了
<form> </form>
之后,<form> </form>
内的<vant-button>
都会有提交表单的功能。 - 当然,这不是我们所需要的。
vant-ui表单不需要使用form标签,也可以获取表单元素的值
获取表单值方法?
- data (){}内部return 定义了数据之后,
- 再次在自定义的函数内作为定义的参数引入,
- 然后调用
this.定义对象
,就可以获取你需要的值。
具体查看上述代码。
表单如何自定义验证?
在自定义的函数内,获取了你需要的值之后,你就可以自定义if (验证条件){}
校验验证规则进行数据筛选与验证了。
if 的(验证条件)
就是指:正则表达式或者 其他自定义验证规则。
.
这里不再赘述详细规则,可自定义或引用第三方验证插件。
.
具体查看上述代码。
表单如何提交?
获取到了表单的值,可以拼接成string字符串,直接使用:
<vant-button @click="onClickButtonSubmit"> 提交表单 </vant-button>
进行表单提交。
具体查看上述代码。
具体提交方式,以及提交的数据格式、类型,可以根据项目需求,自定义方式和格式。
这里不再赘述。
以上就是关于“ Vant-UI 表单组件(Field组件):验证表单元素&&表单提交 - 踩坑篇 ” 的全部内容。