u-form表单校验的校验方法

下面是一个简单的u-form表单校验的示例：

<template>
  <div>
    <u-form ref="form" :model="form" :rules="rules" label-position="top">
      <u-form-item label="用户名" prop="username">
        <u-input v-model="form.username"></u-input>
      </u-form-item>
      <u-form-item label="密码" prop="password">
        <u-input type="password" v-model="form.password"></u-input>
      </u-form-item>
      <u-form-item>
        <u-button type="primary" @click="submitForm">提交</u-button>
      </u-form-item>
    </u-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('提交成功')
        } else {
          alert('提交失败')
          return false
        }
      })
    }
  }
}
</script>

在上面的代码中，我们定义了一个包含用户名和密码两个输入框的表单，并使用了u-form组件来包装表单内容。我们定义了form对象来保存用户输入的数据，定义了rules对象来定义表单校验规则。

在submitForm方法中，我们使用了validate方法来进行表单校验，如果校验通过，就弹出"提交成功"的提示，否则弹出"提交失败"的提示。其中，validate方法的回调函数中的valid参数表示校验结果是否通过。

在规则定义中，我们对每个输入项定义了一个或多个校验规则。例如，对于用户名，我们定义了两个规则：required表示该项为必填项，message表示在校验失败时提示用户输入用户名，trigger表示该规则的触发条件，blur表示在输入框失去焦点时触发校验。在实际使用中，可以根据需要定义更多的校验规则，例如正则表达式、自定义校验函数等。

总之，u-form表单校验是一种方便、快捷的前端表单校验方式，可以帮助我们提高数据的准确性和完整性，避免用户输入不