• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序表单验证插件WxValidate

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一.下载地址:WxValidate插件地址

通过该地址文档wx-extend/src/assets/plugins/wx-validate/WxValidate.js拷贝WxValidate.js到小程序的utils文件中,如图;

二.使用:

1.引入该插件;

import WxValidate from '../../utils/WxValidate.js';

 2.在onLoad钩子函数中初始化校验规则

    const rules = {
      insured: {
        required: true
      },
      idCard: {
        required: true,
        idcard: true
      },
      date: {
        required: true,
        date: true
      }
    }
//解释一下,idCard是我定义的属性,而idcard是这个插件自带的校验规则
//只有一项required:true表示就是未输入,上面的rules要和下面的messages对应
    const messages = {
      insured: {
        required: '请填写被保险人姓名'
      },
      idCard: {
        required: "请填写身份证",
        idcard: "身份证号不正确",
      },
      date: {
        required: '请选择日期',
        date: '请选择日期'
      }
    }

//实例化一个校验对象;
    this.WxValidate = new WxValidate(rules, messages)

3.校验前,将所有需要校验的属性都通过一个form对象传递给提交按钮中,然后从事件函数e中获取!

4.在事件中开启校验

  goNext(e){
    //校验
    const params = e.target.dataset.form;
    if (!this.WxValidate.checkForm(params)) {
      const error = this.WxValidate.errorList[0];
      wx.showModal({
          title: '',
          content: error.msg,
          showCancel:false;
          success(res) {
          if (res.confirm) {
            console.log("点击确定")
          }
      })
      return false
    }
}

 三.添加自己的校验规则,插件提供了addMethod方法,但是我并没有这样来使用;

可以直接在WxValidate.js中添加自己的校验规则,如图:

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap