Vant-UI 表单组件（Field组件）：验证表单元素&&表单提交 - 踩坑篇

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组件）：验证表单元素&&表单提交 - 踩坑篇 ” 的全部内容。