1

import WxValidate from '../../utils/WxValidate.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

<form bindsubmit="formSubmit">

<view class="weui-cells__title">用户名</view>

<view class="weui-cells weui-cells_after-title">

<view class="weui-cell weui-cell_input">

<input class="weui-input" type="text" name="userName" placeholder="请输入用户名"/>

</view>

</view>

<view class="weui-cells__title">密码</view>

<view class="weui-cells weui-cells_after-title">

<view class="weui-cell weui-cell_input">

<input class="weui-input" type="text" name="password" placeholder="请输入密码"/>

</view>

</view>

<view class="weui-cells__title">手机号</view>

<view class="weui-cells weui-cells_after-title">

<view class="weui-cell weui-cell_input">

<input class="weui-input" type="text" name="phone" placeholder="请输入手机号"/>

</view>

</view>

<view class="btn-area">

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

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

</view>

</form>

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

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

this.initValidate()//验证规则函数,初始化字段规则和字段提示信息

},

initValidate() {

const rules = {

userName: { //用户名

required: true,

minlength:2

},

password: { //密码

required: true

},

phone:{ //手机号

required:true,

tel:true

}

}

const messages = { //提示信息

userName: {

required: '请填写姓名',

minlength:'请输入正确的名称'

},

password: {

required: '请填写密码'

},

phone:{

required:'请填写手机号',

tel:'请填写正确的手机号'

}

}

this.WxValidate = new WxValidate(rules, messages)

},

//调用验证函数

formSubmit: function (e) {

console.log('form发生了submit事件，携带的数据为：', e.detail.value)

const params = e.detail.value

//校验表单

if (!this.WxValidate.checkForm(params)) {

const error = this.WxValidate.errorList[0]

console.log(error);

return false

}

console.log("yes");

return true;

},