uniapp表单验证方法详解

什么是表单验证？

表单验证是指在用户输入数据后，对数据进行检查和验证以确保其正确性和合法性的过程。表单验证可以避免用户在提交表单时输入不正确或不合法的数据，从而提高应用程序的安全性和完整性。

在uniapp中，可以使用内置的validate控件对表单进行验证。

validate控件的使用方法

validate控件常用的属性及其含义如下：

• v-model： 绑定的数据对象；
• rules：定义验证规则；
• required：验证字段是否必填；可选值为 true 或 false，默认值为 false；
• max：验证字段的最大值，可用于数字和字数验证；
• min：验证字段的最小值，可用于数字和字数验证；
• maxlength：验证字段的最大长度；
• minlength：验证字段的最小长度；
• pattern：正则表达式验证。
• auto-focus：是否自动聚焦。

在定义验证规则时，可以使用以下方法。

自定义验证规则

使用自定义验证规则时，需要定义一个验证方法并将其作为参数传递给rules属性。

<validate v-model="name" :rules="[{validator: validateName, trigger:'blur'}]">
  <input name="name" placeholder="请输入姓名">
</validate>

validateName(rule, value, callback) {
  if (value === '') {
    callback(new Error('请输入用户名'))
  } else if (value.length < 3 || value.length > 12) {
    callback(new Error('用户名长度应在3到12个字符之间'))
  } else {
    callback()
  }
}

上面的代码中，我们在模板中定义了输入框和validate控件，并在rules属性中传递了一个验证规则参数。我们定义了一个validateName方法，这个方法返回一个错误信息或者一个空值。当用户输入数据时，validate控件会自动调用这个方法，以确保数据的准确性。

预定义规则

预定义规则是在使用过程中不需要自己定义规则的一种方式，常用的预定义规则有以下几种。

电话号码验证

<validate v-model="telephone" :rules="[{pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '请输入正确的手机号码', trigger: 'blur'}]">
  <input type="tel" name="telephone" placeholder="请输入电话号码">
</validate>

邮箱验证

<validate v-model="email" :rules="[{type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}]">
  <input type="email" name="email" placeholder="请输入邮箱">
</validate>

上面的代码中，我们使用了type属性去设置预定义规则。validate控件会自动根据type属性的值，为我们提供相应的验证规则。

示例

以下是一个包含表单验证的示例。在这个示例中，我们定义了一个表单，用户需要填写姓名和年龄。我们使用自定义规则和预定义规则组合的方法对表单进行了验证。

<template>
  <form>
    <div>
      <validate v-model="name" :rules="[{validator: validateName, trigger:'blur'}]">
        <input name="name" placeholder="请输入姓名">
      </validate>
    </div>
    <div>
      <validate v-model="age" :rules="[{type: 'number', message:'请输入数字', trigger:'blur'}, {required:true, message:'不能为空', trigger:'blur'}, {max: '120', message:'请输入正确的年龄', trigger:'blur'}]">
        <input name="age" placeholder="请输入年龄">
      </validate>
    </div>
    <div>
      <button @click="submitForm">提交</button>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: ''
    }
  },
  methods: {
    validateName(rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入姓名'))
      } else if (value.length < 3 || value.length > 12) {
        callback(new Error('姓名长度应在3到12个字符之间'))
      } else {
        callback()
      }
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('提交成功')
        } else {
          alert('验证失败')
          return false
        }
      })
    }
  }
}
</script>

在上面的代码中，我们定义了一个表单，在页面初始化时，我们使用validate控件对输入框进行了验证，其中姓名输入框使用了自定义验证规则，年龄输入框使用了一系列预定义规则。我们在表单的提交函数中调用了validate方法，并检查验证结果是否正确。如果验证成功，我们提示提交成功。否则，我们提示验证失败。