uniapp之表单校验

在 Uniapp 中可以使用 uni-validate 插件来进行表单校验。uni-validate 是一个基于 async-validator 的表单校验插件可以方便地对表单进行校验并提供了一些内置的校验规则。

uni-validate 进行表单校验的示例

以下是一个使用 uni-validate 进行表单校验的示例

1. 安装 uni-validate 插件

   npm install uni-validate --save
   

2. 在需要使用表单校验的页面中引入 uni-validate 插件

   import uniValidate from '@/uni_modules/uni-validate/uni-validate.js';
   

3. 创建一个校验规则对象

   const rules = {
     username: [
       { required: true, message: '请输入用户名' },
       { min: 4, max: 10, message: '用户名长度为4-10个字符' }
     ],
     password: [
       { required: true, message: '请输入密码' },
       { min: 6, max: 20, message: '密码长度为6-20个字符' }
     ]
   };
   

   在这个示例中我们定义了两个校验规则一个是对用户名的校验规则一个是对密码的校验规则。每个校验规则是一个数组数组中的每个对象表示一个校验规则包含了校验的条件和错误提示信息。

4. 在表单提交的事件处理函数中进行表单校验

   submitForm() {
     uniValidate(this.formData, rules).then(() => {
       // 表单校验通过可以进行提交操作
       console.log('表单校验通过');
     }).catch(errors => {
       // 表单校验不通过处理错误信息
       console.log('表单校验不通过', errors);
     });
   }
   

   在这个示例中我们调用 uniValidate 函数来对表单数据进行校验。如果校验通过会执行 then 方法中的回调函数如果校验不通过会执行 catch 方法中的回调函数并将错误信息传递给回调函数。

通过以上步骤我们就可以在 Uniapp 中使用 uni-validate 插件进行表单校验了。你可以根据自己的需求定义不同的校验规则并在表单提交时进行校验以确保表单数据的有效性。

校验规则说明

在 uni-validate 插件中校验规则是一个数组数组中的每个对象表示一个校验规则包含了校验的条件和错误提示信息。下面是一些常用的校验规则及其说明

• required: 必填项值不能为空。
• pattern: 正则表达式校验值必须符合指定的正则表达式。
• min: 最小值校验值必须大于或等于指定的最小值。
• max: 最大值校验值必须小于或等于指定的最大值。
• minLength: 最小长度校验值的长度必须大于或等于指定的最小长度。
• maxLength: 最大长度校验值的长度必须小于或等于指定的最大长度。
• type: 类型校验值必须是指定的类型例如 “email” 表示邮箱类型“url” 表示 URL 类型“number” 表示数字类型等。
• enum: 枚举校验值必须是指定的枚举值之一。
• validator: 自定义校验函数可以通过自定义函数来进行更复杂的校验逻辑。

校验规则示例

const rules = {
  username: [
    { required: true, message: '请输入用户名' },
    { min: 4, max: 10, message: '用户名长度为4-10个字符' },
    { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线' }
  ],
  password: [
    { required: true, message: '请输入密码' },
    { min: 6, max: 20, message: '密码长度为6-20个字符' }
  ],
  email: [
    { required: true, message: '请输入邮箱' },
    { type: 'email', message: '邮箱格式不正确' }
  ],
  age: [
    { required: true, message: '请输入年龄' },
    { type: 'number', message: '年龄必须是数字' },
    { min: 18, message: '年龄必须大于等于18岁' }
  ],
  gender: [
    { required: true, message: '请选择性别' },
    { enum: ['male', 'female'], message: '性别只能为男或女' }
  ],
  customField: [
    { validator: (rule, value, callback) => {
        if (value !== 'custom') {
          callback(new Error('自定义字段必须为 "custom"'));
        } else {
          callback();
        }
      }, message: '自定义字段必须为 "custom"'
    }
  ]
};

在这个示例中我们定义了一些常见的校验规则例如对用户名、密码、邮箱、年龄、性别等进行校验。每个校验规则都是一个对象包含了校验的条件和错误提示信息。

你可以根据自己的需求定义不同的校验规则并在表单提交时进行校验以确保表单数据的有效性。

rules 属性说明

在 uni-validate 插件中rules 属性是一个对象用于定义表单字段的校验规则。该对象的每个属性都是一个字段名对应的值是一个校验规则数组用于指定该字段的校验规则。

示例

const rules = {
  username: [
    { required: true, message: '请输入用户名' },
    { min: 4, max: 10, message: '用户名长度为4-10个字符' },
    { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线' }
  ],
  password: [
    { required: true, message: '请输入密码' },
    { min: 6, max: 20, message: '密码长度为6-20个字符' }
  ],
  email: [
    { required: true, message: '请输入邮箱' },
    { type: 'email', message: '邮箱格式不正确' }
  ]
};

在这个示例中我们定义了一个 rules 对象包含了三个字段的校验规则username、password 和 email。每个字段的校验规则都是一个数组数组中的每个对象表示一个校验规则。

你可以根据自己的需求定义不同的校验规则并将其赋值给 rules 属性以指定表单字段的校验规则。

format属性值说明

在 uni-validate 插件中format 属性是一个对象用于指定表单字段的格式化规则。该对象的每个属性都是一个字段名对应的值是一个格式化函数用于对表单字段的值进行格式化。

格式化函数接收一个参数即要格式化的字段的值然后返回格式化后的值。你可以在格式化函数中对字段的值进行任意的处理和转换例如去除空格、转换大小写等。

示例

const format = {
  username: (value) => value.trim(),
  email: (value) => value.toLowerCase()
};

在这个示例中我们定义了一个 format 对象包含了两个字段的格式化规则username 和 email。username 的格式化函数将字段的值去除首尾空格email 的格式化函数将字段的值转换为小写。

你可以根据自己的需求定义不同的格式化规则并将其赋值给 format 属性以指定表单字段的格式化规则。在表单提交之前会自动应用这些格式化规则对字段的值进行格式化。

validateFunction 自定义校验规则使用说明

在 uni-validate 插件中你可以使用 validateFunction 属性来定义自定义的校验规则。validateFunction 是一个函数接收三个参数rule、value 和 callback。

• rule 是当前校验规则的对象包含了校验的条件和错误提示信息。
• value 是要校验的字段的值。
• callback 是一个回调函数用于通知校验结果。如果校验通过可以调用 callback()如果校验不通过可以调用 callback(new Error('错误信息'))。

示例

const rules = {
  customField: [
    { validator: (rule, value, callback) => {
        if (value !== 'custom') {
          callback(new Error('自定义字段必须为 "custom"'));
        } else {
          callback();
        }
      }, message: '自定义字段必须为 "custom"'
    }
  ]
};

在这个示例中我们定义了一个自定义的校验规则校验字段 customField 的值是否为 "custom"。校验函数接收 rule、value 和 callback 三个参数通过比较 value 的值如果不等于 "custom"则调用 callback 并传递一个错误对象如果等于 "custom"则调用 callback。

你可以根据自己的需求定义不同的校验规则并在校验函数中进行自定义的校验逻辑。

validateFunction 异步校验

如果你需要进行异步校验可以在 validateFunction 中使用异步操作例如发送网络请求或者进行数据库查询。在异步操作完成后通过调用 callback() 或者 callback(new Error('错误信息')) 来通知校验结果。

示例

const rules = {
  asyncField: [
    { validator: (rule, value, callback) => {
        // 模拟异步校验
        setTimeout(() => {
          if (value !== 'async') {
            callback(new Error('异步字段必须为 "async"'));
          } else {
            callback();
          }
        }, 1000);
      }, message: '异步字段必须为 "async"'
    }
  ]
};

在这个示例中我们定义了一个异步校验规则校验字段 asyncField 的值是否为 "async"。在校验函数中我们使用 setTimeout 模拟了一个异步操作1秒后校验完成。如果值不等于 "async"则调用 callback 并传递一个错误对象如果值等于 "async"则调用 callback。

你可以根据自己的需求在 validateFunction 中进行异步校验并在异步操作完成后调用 callback 来通知校验结果。

动态表单校验

如果你需要根据不同的条件动态地进行表单校验可以使用 validateFunction 属性中的函数来实现。在校验函数中你可以根据不同的条件来决定是否要进行校验并通过调用 callback() 或者 callback(new Error('错误信息')) 来通知校验结果。

示例

const rules = {
  dynamicField: [
    { validator: (rule, value, callback) => {
        if (value === 'dynamic') {
          // 根据条件进行校验
          if (/* 校验条件 */) {
            callback(new Error('动态字段校验不通过'));
          } else {
            callback();
          }
        } else {
          callback();
        }
      }, message: '动态字段校验不通过'
    }
  ]
};

在这个示例中我们定义了一个动态校验规则校验字段 dynamicField 的值是否为 "dynamic"。如果值等于 "dynamic"则根据条件进行校验。如果校验条件不满足调用 callback 并传递一个错误对象如果校验条件满足调用 callback。如果值不等于 "dynamic"则直接调用 callback。

你可以根据自己的需求在 validateFunction 中根据不同的条件动态地进行表单校验并在校验函数中调用 callback 来通知校验结果。

表单校验时机说明

表单校验的时机通常有以下几种情况

1. 实时校验在用户输入表单字段时实时对字段进行校验。这样可以及时给用户反馈帮助用户发现并纠正错误。例如在用户输入密码时实时检查密码的强度。

2. 提交前校验在用户提交表单之前对所有字段进行校验。这样可以确保用户输入的数据符合要求避免提交无效或错误的数据。例如在用户点击提交按钮时对表单中的所有字段进行校验。

3. 离焦校验在用户离开失去焦点表单字段时对该字段进行校验。这样可以在用户输入完毕后给出及时的校验结果。例如在用户输入邮箱地址后离开邮箱输入框时对邮箱地址进行校验。

根据实际需求你可以选择适合的校验时机来进行表单校验。通常情况下建议在实时校验的基础上再进行提交前的校验以确保数据的准确性和完整性。另外离焦校验可以提供更好的用户体验但需要注意不要过于频繁地触发校验操作以避免影响性能。