zoukankan      html  css  js  c++  java
  • 微信小程序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:'提交成功'
    })
    }
    })
     
  • 相关阅读:
    尽可能的降低重复劳动——模板策略
    一个CSS上中下三行三列结构的Div布局
    程序员那些悲催的事儿
    给NSString增加Java风格的方法
    DIV和table页面布局的区别和联系
    cocos2d播放雪花
    时间复杂度和空间复杂度2 数据结构和算法04
    OD使用教程4 调试篇04|解密系列
    OD使用教程5 调试篇05|解密系列
    PE结构简图
  • 原文地址:https://www.cnblogs.com/wugai/p/10918487.html
Copyright © 2011-2022 走看看