欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序开发—表单验证

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:510

HTML5自适应律师工作室类网

2020-04-04   浏览:504

HTML5影视传媒文化公司类网

2020-05-12   浏览:502

微信小程序开发—表单验证

发布时间:2021-01-03  

Wxml

<form bindsubmit="formSubmit" bindreset="formReset"> <input name="name" class="{{whoClass=='name'?'placeholderClass':'inputClass'}}" placeholder="请填写您的姓名" type="text" confirm-type="next" focus="{{whoFocus=='name'?true:false}}" bindblur="nameBlurFocus" /> <radio-group name="gender" bindchange="radioChange"> <radio value="0" checked />女士 <radio value="1" />先生 </radio-group> <input name="mobile" class="{{whoClass=='mobile'?'placeholderClass':'inputClass'}}" type="number" maxlength="11" placeholder="请填写您的手机号" bindblur="mobileBlurFocus" focus="{{whoFocus=='mobile'?true:false}}" /> <input name="company" class="{{whoClass=='company'?'placeholderClass':'inputClass'}}" placeholder="公司名称" type="text" confirm-type="next" focus="{{whoFocus=='company'?true:false}}" /> <input name="client" class="{{whoClass=='client'?'placeholderClass':'inputClass'}}" placeholder="绑定客户" type="text" confirm-type="done" focus="{{whoFocus=='client'?true:false}}" /> <button formType="submit">提交</button> </form> <loading hidden="{{submitHidden}}"> 正在提交... </loading>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

app.js

import wxValidate from 'utils/wxValidate' App({ wxValidate: (rules, messages) => new wxValidate(rules, messages) })

1

2

3

4

news.js

var appInstance = getApp() //表单验证初始化 onLoad: function () { this.WxValidate = appInstance.WxValidate( { name: { required: true, minlength: 2, maxlength: 10, }, mobile: { required: true, tel: true, }, company: { required: true, minlength: 2, maxlength: 100, }, client: { required: true, minlength: 2, maxlength: 100, } } , { name: { required: '请填写您的姓名姓名', }, mobile: { required: '请填写您的手机号', }, company: { required: '请输入公司名称', }, client: { required: '请输入绑定客户', } } ) }, //表单提交 formSubmit: function (e) { //提交错误描述 if (!this.WxValidate.checkForm(e)) { const error = this.WxValidate.errorList[0] // `${error.param} : ${error.msg} ` wx.showToast({ title: `${error.msg} `, image: '/pages/images/error.png', duration: 2000 }) return false } this.setData({ submitHidden: false }) var that = this //提交 wx.request({ url: '', data: { Realname: e.detail.value.name, Gender: e.detail.value.gender, Mobile: e.detail.value.mobile, Company: e.detail.value.company, client: e.detail.value.client, Identity: appInstance.userState.identity }, method: 'POST', success: function (requestRes) { that.setData({ submitHidden: true }) appInstance.userState.status = 0 wx.navigateBack({ delta: 1 }) }, fail: function () { }, complete: function () { } }) }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

WxValidate 链接: https://pan.baidu.com/s/1hsC9Xxq 密码: ttjg

本文标签

: