vant-vue页面 常用的表单代码全

密码修改表单

<template>
  <div>
    <van-form @submit="onSubmit">
      <van-field
        name="originalPassword"
        v-model="originalPassword"
        type="password"
        label="原密码"
        placeholder="请输入原密码"
        required
        :rules="[{ required: true, message: '请填写原密码'}]"/>
      <van-field
        name="newPassword"
        v-model="newPassword"
        type="password"
        label="新密码"
        placeholder="请输入新密码"
        required
        :rules="[
          { required: true, message: '请填写新密码'},
          { pattern:/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/, message: '密码必须是由6-12位字母和数字组成!'}
        ]"/>
      <van-field
        name="confirmNewPassword"
        v-model="confirmNewPassword"
        type="password"
        label="确认新密码"
        placeholder="请输入确认密码"
        required
        :rules="[{ required: true, message: '请填写确认密码'}]"/>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" :loading="loading">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import {Toast, Notify} from 'vant';
import {changePassword} from "@/views/agent/admin/login/api";
export default {
  data() {
    return {
      originalPassword: '',
      newPassword: '',
      confirmNewPassword: '',
      loading: false,
    }
  },

  methods: {
    async onSubmit(values) {
      this.loading = true;
      try{
        await changePassword({ ...values})
        Notify({type: 'success', message: '修改成功，请重新登录！'});
        this.$router.replace('/agent/admin/login');
      }catch ({message}) {
        this.loading = false;
        Toast({message});
      }
    }
  }
}
</script>

特全表单

官网：（点我）