微信小程序WxValidate插件的密码验证

wxml

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

<input name="password" id="password" placeholder="请输入密码" value='{{form.password}}'/>

<view class="section__title">确认密码</view>

<input name="checkPassword" id="checkPassword" placeholder="请再次输入密码" value="{{form.checkPassword}}"/>

 

js

import WxValidate from "../../utils/WxValidate.js";

// pages/verify/verify.js

Page({

/**

* 页面的初始数据

*/

data: {

form:{

password:"",

checkPassword:"",

}

},

 

/**

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

*/

onLoad: function (options){

this.initValidate()//验证规则函数

},

//提交表单

formSubmit(e){

console.log(e.detail.value)

},

//报错

showModal(error) {

wx.showModal({

content:error.msg,

showModal:false,

})

},

//验证函数

initValidate(){

//规则

const rules = {

password:{

required: true,

minlength:6,

maxlength:16,

},

checkPassword:{

required:true,

equalTo: 'password',

}

}

//返回信息

const messages = {

password:{

required:'请填写密码',

minlength:'密码长度不能少于6位',

maxlength:'密码长度不能超过16位'

},

checkPassword:{

required:'请填写确认密码',

equalTo:'两次输入的密码不一致'

}

}

this.WxValidate = new WxValidate(rules,messages)

},

//调用验证函数

formSubmit(e){

// this.data.form.password = 13456

// this.setData({

// form:this.data.form

// })

console.log(e.detail.value)

console.log(this.data)

const params = e.detail.value

//校验表单

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

const error = this.WxValidate.errorList[0]

this.showModal(error)

return false

}

this.showModal({

msg:'提交成功'

})

}

})

 

转载于:https://www.cnblogs.com/wugai/p/10918487.html