• 售前

  • 售后

热门帖子
入门百科

微信小程序实现表单验证

[复制链接]
晴空万里659 显示全部楼层 发表于 2021-10-26 13:48:12 |阅读模式 打印 上一主题 下一主题
微信小步调的表单验证,供大家参考,具体内容如下
须要用到一个插件WxValidat.js
传送门
在须要使用的page js文件下导入
  1. import WxValidate from '../../utils/WxValidate.js'
复制代码
紧张内容

WXML内容
  1. <form bindsubmit="formSubmit">
  2.   <view class="weui-cells__title">用户名</view>
  3. <view class="weui-cells weui-cells_after-title">
  4.   <view class="weui-cell weui-cell_input">
  5.    <input  class="weui-input" type="text" name="userName" placeholder="请输入用户名"/>
  6.   </view>
  7. </view>
  8.   <view class="weui-cells__title">密码</view>
  9. <view class="weui-cells weui-cells_after-title">
  10.   <view class="weui-cell weui-cell_input">
  11.    <input  class="weui-input" type="text" name="password" placeholder="请输入密码"/>
  12.   </view>
  13. </view>
  14.   <view class="weui-cells__title">手机号</view>
  15. <view class="weui-cells weui-cells_after-title">
  16.   <view class="weui-cell weui-cell_input">
  17.    <input  class="weui-input" type="text" name="phone" placeholder="请输入手机号"/>
  18.   </view>
  19. </view>
  20.   <view class="btn-area">
  21.     <button formType="submit">Submit</button>
  22.     <button formType="reset">Reset</button>
  23.   </view>
  24. </form>
复制代码
js内容
  1. /**
  2.    * 生命周期函数--监听页面加载
  3.    */
  4. onLoad: function (options) {
  5.      this.initValidate()//验证规则函数,初始化字段规则和字段提示信息
  6.    },
  7.       
  8.    initValidate() {
  9.      const rules = {
  10.        userName: { //用户名
  11.          required: true,  
  12.          minlength:2
  13.        },
  14.        password: { //密码
  15.          required: true
  16.        },
  17.        phone:{ //手机号
  18.          required:true,
  19.          tel:true
  20.        }
  21.      }
  22.      const messages = { //提示信息
  23.        userName: {
  24.          required: '请填写姓名',
  25.          minlength:'请输入正确的名称'
  26.        },
  27.        password: {
  28.          required: '请填写密码'
  29.        },
  30.        phone:{
  31.          required:'请填写手机号',
  32.          tel:'请填写正确的手机号'
  33.        }
  34.      }
  35.      this.WxValidate = new WxValidate(rules, messages)
  36.    },
  37.    //调用验证函数
  38.    formSubmit: function (e) {
  39.      console.log('form发生了submit事件,携带的数据为:', e.detail.value)
  40.      const params = e.detail.value
  41.      //校验表单
  42.      if (!this.WxValidate.checkForm(params)) {
  43.        const error = this.WxValidate.errorList[0]
  44.        console.log(error);
  45.        return false
  46.      }
  47.      console.log("yes");
  48.      return true;
  49. },  
复制代码
值得注意的是: WxValidate的errorList列表返回的是一个对象。

而且验证的字段名应该和表单组件对应的name逐一对应。
以上就是本文的全部内容,盼望对大家的学习有所资助,也盼望大家多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作