微信小程序表单验证开发全面解析与实践操作

why 132 2024-09-29

上一篇我们和大家分享了微信小程序之表单组件分享一，本文我们主要和大家分享微信小程序)表单验证开发二，希望能帮助到大家。

一.知识点

1.是否为空

1

2

3

4

5

if(e.detail.value.userName.length==0||e.detail.value.psw.length==0||e.detail.value.tel.length==0){

              this.setData({

                tip:'提示：不能为空！',

              })

        }

2.正则表达式：

手机号码：var regtel=new RegExp('(^1[3|4|5|7|8][0-9]{9}$)','g');

1

<input>

1

2

3

4

5

if(!regtel.exec(e.detail.value.tel)){

           this.setData({

               tip:&#39;手机号码格式不正确！&#39;,

           })

       }

二.看列子

image.png

1.index.wxml

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

<form bindsubmit="formSubmit" bindreset="formReset">

    <view class="section">

        <view class="section__title">姓名：</view>

        <input name="userName" placeholder="请输入姓名"  maxlength="12" type="text" focus="false" class="section__iput"/>

    </view>

    <view class="section">

        <view class="section__title">手机号码：</view>

        <input  name="tel" placeholder="请输入手机号码"  type="text" focus="false" class="section__iput"/>

    </view>

    <view class="section">

        <view class="section__title">密码：</view>

        <input name="psw" placeholder="请输入您的密码" password="true" maxlength="12" type="text" focus="false" class="section__iput"/>

    </view>

    <view class="section section_gap">

        <view class="section__title">性别：</view>

        <radio-group name="radio-group">

            <label><radio value="radio1" checked="ture"/>男</label>

            <label><radio value="radio2"/>女</label>

        </radio-group>

    </view>

    <view class="section">

        <view class="section__title">日期:</view>

        <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange" class="section__iput">

            <view class="picker">

            {{date}}

            </view>

        </picker>

    </view>

    <view class="section">

        <view class="section__title">留言：</view>

        <textarea auto-height placeholder="请输入内容" />

    </view>

    <view>{{tip}}</view>

    <view class="btn-area">

        <button formType="submit" type="primary">Submit</button>

        <button formType="reset"  type="default">Reset</button>

    </view>

</form>


2.index.wxss

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

.section{

    margin:10px 20px;

    display:flex;

    border-bottom:1px solid #ccc;

    padding:15px 0;

}

.section__title{

    width:30%;

}

.section__iput{

    width:70%;

    line-height:25px;

    border:1px solid #ccc;

}

.btn-area{

    display:flex;

    justify-content:center;

    margin:20px;

}

.btn-area button{

    width:40%;

}

3.index.js

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

var app = getApp()

Page({

    data: {

        date: '2016-09-01',

        tip:'',

    },

    //日期

    bindDateChange: function(e) {

        this.setData({

          date: e.detail.value

        })

    },

    //提交

    formSubmit: function(e) {

        var regtel=new RegExp('(^1[3|4|5|7|8][0-9]{9}$)','g');

        if(e.detail.value.userName.length==0||e.detail.value.psw.length==0||e.detail.value.tel.length==0){

            this.setData({

                tip:'提示：不能为空！',

            })

        }else if(!regtel.exec(e.detail.value.tel)){

            this.setData({

                tip:&#39;手机号码格式不正确！&#39;,

            })

        }else{

            this.setData({

                tip:'',

            })

        }

    },

    //重置

    formReset: function() {

        console.log('form发生了reset事件')

    }

})

有更好的方式，欢迎大家来补充。


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：解析 程序 微信小程序 小程序 js
上一篇:微信小程序 drawImage 功能深入理解与实际运用
下一篇:微信小程序表单组件分享及实际应用详细解读
相关文章

 发表评论

暂时没有评论，来抢沙发吧~