在uniapp uview框架中,可以使用u-form组件来实现表单的校验。首先需要设置表单的校验规则,然后在提交表单时进行校验。

以下是一个示例代码:

<template>
  <view>
    <u-form :rules="rules" @submit="submitForm">
      <u-input v-model="name" label="姓名" name="name"></u-input>
      <u-input v-model="email" label="邮箱" name="email"></u-input>
      <u-input v-model="phone" label="电话" name="phone"></u-input>
      <u-button type="primary" form-type="submit">提交</u-button>
    </u-form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      phone: '',
      rules: {
        name: [{ required: true, message: '请输入姓名' }],
        email: [
          { required: true, message: '请输入邮箱' },
          { type: 'email', message: '邮箱格式不正确' }
        ],
        phone: [
          { required: true, message: '请输入电话号码' },
          { pattern: /^1[3-9]\d{9}$/, message: '电话号码格式不正确' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单校验成功,可以提交表单
          console.log('表单校验成功')
        } else {
          // 表单校验失败,提示错误信息
          console.log('表单校验失败')
        }
      })
    }
  }
}
</script>

在上面的代码中,规定了三个表单字段的校验规则,分别为姓名、邮箱和电话号码。其中,姓名和邮箱为必填项,而电话号码需要满足正则表达式的要求。在提交表单时,通过调用u-form组件的validate方法,可以进行表单的校验。如果校验成功,则可以提交表单,否则需要提示错误信息

写一个 uniapp uview框架 form多表单校验字段

原文地址: https://www.cveoy.top/t/topic/ffE0 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录