小程序 表单验证

使用 WxValidate.js 插件来校验表单数据

常用实例方法

名称 返回类型 描述
checkForm(e) boolean 验证所有字段的规则,返回验证是否通过。
valid() boolean 返回验证是否通过。
size() number 返回错误信息的个数。
validationErrors() array 返回所有错误信息。
addMethod(name, method, message) boolean 添加自定义验证方法。

内置校验规则

序号 规则 描述
1 required: true 这是必填字段。
2 email: true 请输入有效的电子邮件地址。
3 tel: true 请输入11位的手机号码。
4 url: true 请输入有效的网址。
5 date: true 请输入有效的日期。
6 dateISO: true 请输入有效的日期(ISO),例如:2009-06-23,1998/01/22。
7 number: true 请输入有效的数字。
8 digits: true 只能输入数字。
9 idcard: true 请输入18位的有效身份证。
10 equalTo: 'field' 输入值必须和 field 相同。
11 contains: 'ABC' 输入值必须包含 ABC。
12 minlength: 5 最少要输入 5 个字符。
13 maxlength: 10 最多可以输入 10 个字符。
14 rangelength: [5, 10] 请输入长度在 5 到 10 之间的字符。
15 min: 5 请输入不小于 5 的数值。
16 max: 10 请输入不大于 10 的数值。
17 range: [5, 10] 请输入范围在 5 到 10 之间的数值。

根据 WxValidate.js 插件,定义 验证函数 initValidate 的规则及返回的信息,在 onLoad 生命周期中调用

使用 bindinput 、 bindblur 绑定事件和data-name传入对应的表单字段名 来实现单个输入框失焦的验证

javascript 复制代码
initValidate() {
    //验证规则和提示信息
    let rulesAndMsg = {
      Name: {
        rules: {
          required: true
        },
        message: {
          required: '请输入姓名'
        }
      },
      IDCard: {
        rules: {
          required: true,
          idcard: true,
        },
        message: {
          required: '请输入身份证号',
          idcard: '请输入正确的身份证号码',
        }
      },
      Age: {
        rules: {
          required: true,
          rangeRom: [1, 120],
        },
        message: {
          required: '请输入年龄'
        }
      },
    }
    //实例化当前的验证规则和提示消息
    this.WxValidate = new WxValidate(rulesAndMsg);
    /**
             * 自定义验证规则传3个参数
             * name 是添加的方法的名字
             * method 是一个函数,value:元素的值,param是参数
             * message 是自定义的错误提示
             */
    this.WxValidate.addMethod('rangeRom', (value, param) => {
      return this.WxValidate.optional(value) || (value >= param[0] && value <= param[1])
    }, '年龄范围是: 1-120');
  },

提交时校验

javascript 复制代码
if (!this.WxValidate.checkForm(this.data.form)) {
      //表单元素验证不通过,此处给出相应提示
      this.setData({
        errorList: this.WxValidate.errorList,
      })
      return false;
    }

更改了方法具体文件点此处详见

相关推荐
前端康师傅3 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
Mintopia17 分钟前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙18 分钟前
JS设计模式指南
前端·javascript
Mintopia25 分钟前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
断竿散人31 分钟前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
uhakadotcom33 分钟前
在python中,使用conda,使用poetry,使用uv,使用pip,四种从效果和好处的角度看,有哪些区别?
前端·javascript·面试
鹏多多37 分钟前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js
吃饺子不吃馅1 小时前
为什么SnapDOM 比 html2canvas截图要快?
前端·javascript·面试
mCell9 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip9 小时前
Node.js 子进程:child_process
前端·javascript