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

微信小程序——仿jqueryValidate表单验证插件WxValidate的二次封装(一) ...

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

在做web开发时,表单验证插件我们前端用的是jqueryValidate,由于个人主要精力是在后台JAVA开发上,为了让插件与后台更好的结合和使用,通过JAVA的自定义组件将表单全部重新写了一边,同时把jqueryValidate做了再次封装,新增了一些新的常用判断,也修改了一些关键字。

小程序同样也存在验证的问题,在网上搜索了一下,目前用的比较多的是WxValidate,下载地址和用法如下

github: https://github.com/skyvow/wx-extend

但是这个插件用起来比较麻烦,js要写很多的预设代码,所以本人又在此插件的基础上做了再次封装。

接下来直接说用法,以不为空(notEmpty)和长度(size)为例。

一、wxml文件

  1.  
    <form bindsubmit="formSubmit">
  2.  
    <view class="wide-info">
  3.  
    <view class="wide-info-list">
  4.  
    <!--姓名-->
  5.  
    <view class="info-list">
  6.  
    <view class="info-list-1eft">
  7.  
    <text class="notEmptyClass">姓名</text>
  8.  
    </view>
  9.  
    <view class="info-list-right">
  10.  
    <input id="name" name=\'name\' placeholder=\'请输入\' value=\'{{form.name}}\' class="wxValidate inputName"
  11.  
    data-validate="notEmpty|size[4,10]" data-fieldname="姓名"/>
  12.  
    </view>
  13.  
    </view>
  14.  
     
  15.  
    <!--密码-->
  16.  
    <view class="info-list">
  17.  
    <view class="info-list-1eft dark">
  18.  
    <text class="notEmptyClass">密码</text>
  19.  
    </view>
  20.  
    <view class="info-list-right">
  21.  
    <input type="text" id="password" name="password" placeholder=\'请输入\' value=\'{{form.age}}\' class="wxValidate inputName"
  22.  
    data-fieldname="密码" data-validate="notEmpty"/>
  23.  
    </view>
  24.  
    </view>
  25.  
    <view class="info-list">
  26.  
    <view class="info-list-1eft dark">
  27.  
    <text class="notEmptyClass">重复密码</text>
  28.  
    </view>
  29.  
    <view class="info-list-right">
  30.  
    <input type="text" id="cfpassword" name="cfpassword" placeholder=\'请输入\' value=\'{{form.age}}\' class="wxValidate inputName"
  31.  
    data-fieldname="重复密码" data-validate="notEmpty|equals[password]"/>
  32.  
    </view>
  33.  
    </view>
  34.  
     
  35.  
    <!--年龄-->
  36.  
    <view class="info-list">
  37.  
    <view class="info-list-1eft dark">
  38.  
    <text class="notEmptyClass">年龄</text>
  39.  
    </view>
  40.  
    <view class="info-list-right">
  41.  
    <input type="text" id="age" name="age" placeholder=\'请输入\' value=\'{{form.age}}\' class="wxValidate inputName"
  42.  
    data-fieldname="年龄" data-validate="notEmpty|int|range[18,60]"/>
  43.  
    </view>
  44.  
    </view>
  45.  
     
  46.  
    </view>
  47.  
     
  48.  
    </view>
  49.  
    <!--按钮--->
  50.  
    <view class="buttons-kind">
  51.  
    <button class="fabu" form-type="submit">发布</button>
  52.  
    </view>
  53.  
    </form>

  重点:每一个表单控件必须有3个属性和一个特定的样式关键字。

属性 说明
id 表单控件的ID
data-validate

需要做相关验证的关键字,多种验证用‘|’隔开,例如上面的姓名要验证不为空同时长度在4-10个字符:

data-validate="notEmpty|size[4,10]"

data-fieldname 当出现错误时,显示在错误提示中的表单名称。

 

样式 说明

wxValidate

代表此表单控件要做相关验证,必须写。

 

二.js文件

  1.  
    import WxValidate from \'../../utils/WxValidate.js\'
  2.  
    const util = require(\'../../utils/util.js\')
  3.  
    Page({
  4.  
    /**
  5.  
    * 页面的初始数据
  6.  
    */
  7.  
    data: {
  8.  
    date:""
  9.  
    },
  10.  
     
  11.  
    /**
  12.  
    * 生命周期函数--监听页面加载
  13.  
    */
  14.  
    onLoad: function (options) {
  15.  
     
  16.  
    },
  17.  
    /**
  18.  
    * 生命周期函数--监听页面初次渲染完成
  19.  
    */
  20.  
    onReady: function () {
  21.  
    //验证方法
  22.  
    this.WxValidate = new WxValidate();
  23.  
    },
  24.  
    bindDateChange : function(e){
  25.  
    this.setData({date:e.detail.value})
  26.  
    },
  27.  
    /***调用验证函数***/
  28.  
    formSubmit: function (e) {
  29.  
    console.log(\'form发生了submit事件,携带的数据为:\', e.detail.value)
  30.  
    const params = e.detail.value
  31.  
    e.detail.value.osscation_address = this.data.osscation_address
  32.  
    e.detail.value.date = this.data.date
  33.  
    console.log(e.detail.value)
  34.  
    console.log(this.WxValidate.rules)
  35.  
    console.log(this.WxValidate.messages)
  36.  
    //校验表单
  37.  
    if (!this.WxValidate.checkForm(params)) {
  38.  
    const error = this.WxValidate.errorList[0]
  39.  
    util.alert("错误提示",error.msg)
  40.  
    return false
  41.  
    }
  42.  
    //向后台发送时数据 wx.request...
  43.  
    util.alert("成功提示", \'提交成功 :\' + e.detail.value.date)
  44.  
    }
  45.  
     
  46.  
    })

  重点: 此页面只要在渲染完的方法里new WxValidate();然后在提交的操作里加上判断即可。例如下图的效果。

 

三、验证关键字

关键字 说明 用法
notEmpty 不能为空  

size[4,10]

输入字符的长度

可以只写一个数字,注意根据判断的不同,判断要不要写“,”。例如

长度最小为4则可写成:size[4];

长度最大为10则可写成:size[,10],注意逗号不能少;

int

整数  

number

数字  

range[18,60]

数值的范围

类似与size,但此关键字还多一种判断,例如是不包含首尾的数值,例如

薪酬必须大于5000 小于等于20000: range(5000,20000];

或者年龄必须18-60之间,但不包含18岁和60岁:range(18,60)

equals[id]

等于另一个表单的值

id:表示另一个控件的id,此处也可以写成:

equals[id,另一个控件的名称]格式,例如:equals[id,手机号]

输入值必须和【手机号】相同!”;若后面的名称不填写,则验证出错时默认提示的是“请输入与上面相同的密码

tel

电话格式(中国大陆)  
phone 手机格式(中国大陆)  

idcard

身份证(中国大陆)  

date

日期  

dateISO

日期(ISO),例如:2009-06-23,1998/01/22  
email 邮箱地址  
url 网站地址  

 PS:这个控件最终应该还是要和wx.request 封装到一起使用,具体等我把wx.request封装好了再写了。    

插件下载:https://github.com/zhuiyue82/wx     

                      

 本人在CSDN的本文链接:https://blog.csdn.net/zhuiyue82/article/details/100012973

    

 


鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
实体类自动生成小程序发布时间:2022-07-18
下一篇:
微信小程序——表单验证插件WxValidate的二次封装(二)发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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