小程序表单验证 利用WxValidate.js实现表单验证
发布日期:2021-05-13 21:13:43 浏览次数:13 分类:精选文章

本文共 3693 字,大约阅读时间需要 12 分钟。

���������������������������������������������

���������������������������������������������������������������������������������������������������������������������������WxValidate������������������������������������������������������������������������������������������


������������������

���������������������������������WxValidate���������

������WxValidate.js���������������������������������������`utils`������������

������������������������������

������������������������������������������������������������WxValidate���������

// pages/[������������]/[���������].js
import WxValidate from '../utils/WxValidate.js'
Page({
data: {
form: {
name: '', // ������
idcard: '', // ������������
schoolName: '', // ������������
className: '', // ������
number: '' // ������
}
},
onLoad: function() {
this.initValidate();
},
showModal(error) {
wx.showModal({
content: error.msg,
showCancel: false
});
},
initValidate() {
const rules = {
name: {
required: true,
minlength: 2
},
idcard: {
required: true,
idcard: true
},
schoolName: {
required: true
},
className: {
required: true
},
number: {
digits: true
}
};
const messages = {
name: {
required: '���������������',
minlength: '������������������������'
},
idcard: {
required: '���������������������',
idcard: '������������������������������'
},
schoolName: {
required: '���������������������'
},
className: {
required: '���������������'
},
number: {
digits: '������������������������'
}
};
this.WxValidate = new WxValidate(rules, messages);
},
formSubmit(e) {
const formData = e.detail.value;
// ������������������
if (!this.WxValidate.checkForm(formData)) {
const error = this.WxValidate.errorList[0];
this.showModal(error);
return false;
}
// ���������������������
this.showModal({
msg: '���������������������'
});
return true;
}
});

������������������������

WxValidate������������������������������������������������������������������������������������

  • ������������

    • rules: ���������������������������������������������������������������������������������
    • messages: ������������������������������������������������������
  • ������������������

    • checkForm(data)���������������������������������data������������������������rules���������������
    • errorList������������������������������������C���������� ������ijkhain������������������
  • ������������������

    • ������������������������true���
    • ������������������������false���������������������������������������

  • ���������������������������������

  • ���������������������

    • ������WxValidate.js���������������������������������������������������������������������
    • ������������������������������_cache(_=__).
  • ���������������������

    • ���������fldrm����pe���form-id���submit-type���������������������������
    • ������form������������bindsubmit���������������������������
  • ���������������������������

    • ������WxValidate.errorList���������������������������������������undefined���������
    • ������������������console.log���������������������

  • ���������������������������������������������������������������������������������������������������WxValidate���������������������������������������������������������������������������������������������������������������������������������������������������������������

    ������������������������������������������������������WxValidate���������������������������������������������

    上一篇:小程序下拉框自定义样式picker修改样式picker-view修改样式
    下一篇:hbuilderX将tab制表符换成两个空格

    发表评论

    最新留言

    表示我来过!
    [***.240.166.169]2025年04月07日 19时16分50秒