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:'提交成功'
})
}
})