uniapp uview 表单校验与提示弹窗示例

<template>
  <view class='form'>
    <u-form-group label='用户名' required>
      <u-input v-model='username' placeholder='请输入用户名'></u-input>
    </u-form-group>
    <u-form-group label='密码' required>
      <u-input v-model='password' placeholder='请输入密码' type='password'></u-input>
    </u-form-group>
    <u-button type='primary' @click='submitForm'>提交</u-button>
  </view>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    submitForm() {
      if (!this.username) {
        this.$u.toast({
          title: '请输入用户名',
          position: 'bottom',
          duration: 2000,
        })
        return
      }
      if (!this.password) {
        this.$u.toast({
          title: '请输入密码',
          position: 'bottom',
          duration: 2000,
        })
        return
      }
      // TODO: 提交表单数据
    },
  },
}
</script>
<p>在上述代码中，我们使用了 uview 的 'u-form-group' 和 'u-input' 组件来构建表单，并在提交按钮的点击事件中进行表单校验。如果某个表单项的值为空，则使用 'this.$u.toast' 方法弹出提示框，提示用户输入必填项。如果所有表单项都有值，则可以提交表单数据。</p>