微信小程序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