WeChat applet development form validation WxValidate usage

I personally feel that the development framework of WeChat applet is generally similar to VUE, but its form component does not have its own validation function. Therefore, there are generally two methods when developing form validation for applet. One is to write the validation rules yourself, but it requires a solid foundation in regular expressions. The other is to use the WxValidate plug-in developed by the official community for form validation.

The WxValidate plug-in is encapsulated with reference to jQuery Validate. It provides a set of commonly used validation rules for mini-program forms, including mobile phone number, email verification, etc. It also provides a method for adding custom validation to make form validation easier.

First of all, the download address and official documentation of the plug-in are in WxValidate download address and document address

The specific location of the WxValidate.js file is wx-extend/src/assets/plugins/ wx-validate /WxValidate.js

The first method to introduce is to copy the plug-in file to the file directory you need

After that, you can use local reference to introduce the plug-in into the JS file of the page you need. The specific operations are as follows

//In the index.js page, import WxValidate from '../../utils/WxValidate.js'
const app = getApp()
Page({
  data: {
    form: {
      name: '',
      phone: ''
    }
  }
})

What needs to be noted here is the writing of the file path

/ is counted from the root directory./ is counted from the directory file of the imported file, in this case, it is counted from the directory where index.js is located../ is counted from the parent directory of the imported file, in this case, the index folder directory, and ../../ is counted from the directory where pages is located. If the file path here is written incorrectly, the compilation will report an error.

Then pay attention to the data binding of the form component in the wxml file, otherwise the rules cannot be verified no matter how the form component is filled in.

The binding method of the form component is as follows

//wxml page <form bindsubmit="formSubmit">
    <view class="weui-cells__title">Please fill in your personal information</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <view class="weui-cell__hd">
          <view class="weui-label">Name</view>
        </view>
        <view class="weui-cell__bd">
          <input class="weui-input" name='name' value='{{form.name}}' placeholder="Please enter your name" />
        </view>
      </view>
      <view class="weui-cell weui-cell_input weui-cell_vcode">
        <view class="weui-cell__hd">
          <view class="weui-label">Mobile phone number</view>
        </view>
        <view class="weui-cell__bd">
          <input class="weui-input" name='phone' type='number' value='{{form.phone}}' placeholder="Please enter your phone number" />
        </view>
        </view>
    </view>
</form>

The main method is to add the value binding to the input box that needs to be verified, and the same applies to other components.

Then add the form binding to the js file

//index.js
Page({
  data: {
    form: {
      name: '',
      phone: ''
    }
  }
})

Then comes the most important verification rule writing

First, you need to add the validation rule function to the onLoad function

// There are multiple functions in onLoad. Write the function name in the onLoad function and define the function outside onLoad onLoad() {
    this.getuser()
    this.initValidate()//Validation rule function}
 
//OnLoad has only one function in it onLoad:function(){
    rules:{}
    messages:{}
    }

It should be noted here that the onLoad validation rules must be in the js file, otherwise the compilation will report checkform is not a function

Then there is the code for validation rules and error rules

// Report an error showModal(error) {
    wx.showModal({
      content: error.msg,
      showCancel: false,
    })
  },
//Verification function initValidate() {
    const rules = {
      name: {
        required: true,
        minlength:2
      },
      phone:{
        required:true,
        tel:true
      }
    }
    const messages = {
      name: {
        required: 'Please fill in your name',
        minlength:'Please enter a correct name'
      },
      phone:{
        required:'Please fill in your mobile number',
        Tel:'Please fill in the correct mobile phone number'
      }
    }
    this.WxValidate = new WxValidate(rules, messages)
  },
//Call verification function formSubmit: function(e) {
    console.log('Submit event occurred in the form, the data carried is:', e.detail.value)
    const params = e.detail.value
    //Check form if (!this.WxValidate.checkForm(params)) {
      const error = this.WxValidate.errorList[0]
      this.showModal(error)
      return false
    }
    this.showModal({
      msg: 'Submission successful'
    })
  }

Here I only wrote a little bit of field validation. The official document also contains many field validation rules, so I won’t write them out one by one. What needs to be noted here is that the object must be instantiated in initValidate(), so far the form validation has been completed

Let's take a look at the demonstration effect

You can also run the example downloaded above, which has more form validation effects.

This is the end of this article about the use of WxValidate for form validation in WeChat mini-program development. For more relevant mini-program form validation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!