Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

First, we need to download an extension called WxValidate and click download

The introduction of WxValidate. Js

Download the wxvalidate.js file and place it in the utils directory of our project:

Import the wxvalidate.js file in the js file of the page where you need to validate the action form:

The WXML file sets the component parameter binding, or data validation cannot be performed

Js code design

Define the name value, after the definition we proceed to js verification rule code design

First we initialize the checksum in onLoad:

  onLoad: function (options) {

// Initialize the validation parameters
this.initValidate()
Copy the code

So I’ve wrapped a method called initValidate()

// Form parameter validation
initValidate(){
  const rules = {
    industry: {
      required: true,},compony: {required: true,},base: {
      required: true,},job: {
      required: true.// minlength:10
    },
    depart: {
      required: true.maxlength: 20,},gotime: {
      required: true,},downworkTime: {
      required: true,},aftertime: {
      required: true,},weekday: {required: true
    },
    specialday: {required: true.maxlength: 20,},note: {required: true.maxlength: 20,},sexpercent: {required: false.maxlength: 10,},workpercent: {required: false.maxlength: 10,},overtime: {required: false.maxlength: 100,},comment: {required: false.maxlength: 200,},// phone:{
    // required:true,
    // tel:true
    // }
  }
  const messages = {
    industry: {
      required: 'Please select industry'
    },
    compony: {
      required: 'Please select company'
    },
    base: {
      required: 'Please select base'
    },
    job: {
      required: 'Please fill in your post'
    },
    depart: {
      required: 'Please select department'.maxlength: 'Department input up to 20 bits'
    },
    gotime: {
      required: 'Please select your working hours'
    },
    downworkTime: {
      required: 'Please select closing time'
    },
    aftertime: {
      required: 'Please choose lunch time'
    },
    weekday: {required: 'Please select working days'
    },
    specialday: {required: 'Is Friday a special day?'.maxlength: 'Is Friday special for up to 20 digits?'
    },
    note: {required: 'Please fill in the daily and weekly reports'.maxlength: 'Daily newspaper weekly newspaper enter a maximum of 20 digits'
    },
    sexpercent: {maxlength: 'The ratio of boys to girls is 10 at most'
    },
    workpercent: {maxlength: 'Base scale input up to 10 bits'
    },
    overtime: {maxlength: 'Overtime input up to 100'
    },
    comment: {maxlength: 'Input up to 200 digits for evaluation'}},this.WxValidate = new WxValidate(rules, messages)
},
Copy the code

You can set the field verification rules according to the actual situation, such as whether the field is required or not, field length, etc. Wxvalidate. js provides a variety of setting rules

Once set, you can invoke the validation parameter in the form submission method to verify interception

// Form submission
  formSubmit(e) {
    console.log(A Submit event occurred on the form with data:, e.detail.value)
// Verify the form
if (!this.WxValidate.checkForm(e.detail.value)) {
  const error = this.WxValidate.errorList[0]
  console.log("error_+_+_+_+"+JSON.stringify(error))
  wx.showToast({
    title: error.msg,
    icon: "none".duration: 800
  })
  return false
}
Copy the code

​

The function of the whole form verification is done, I only posted the core code here, if the reader for my local debugging of these codes have problems, can contact me to help you solve.