Shulou(Shulou.com)06/03 Report--

This article introduces the "WeChat Mini Programs development of how to use the form to verify WxValidate" related knowledge, in the actual case of the operation process, many people will encounter such a dilemma, then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

The WxValidate plug-in is encapsulated with reference to jQuery Validate and provides a set of common validation rules for Mini Program forms, including mobile phone number, e-mail verification, etc., as well as adding custom verification methods to make form validation easier.

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

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

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

After that, you can introduce the plug-in into the JS file of the page you need by partial reference, as follows

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

What needs to be noticed here is the way to write the file path.

/ it starts from the root directory. / it starts from the directory file of the imported file. / in this example, the directory where the index.js is located starts from the parent directory of the imported file. / in this example, the index folder directory starts from the directory where the pages is located, and if the file path in this place is written incorrectly, the compiler will report an error.

The next step is to pay attention to the data binding to the form component in the wxml file, otherwise the rule cannot be validated no matter how the form component fills in.

The binding method of the form component is as follows

/ / Please fill in your personal information, name, mobile number under the wxml page.

The main method is to bind the value value in the input box that needs to be verified, and other components do the same.

Then bind the form form to the js file

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

Then there is the writing of the most important verification rules.

The first step is to add the validation rule function to the onLoad function.

/ / there are several functions written in onLoad, the function name is written in the onLoad function, and the function defines onLoad () {this.getuser () this.initValidate () / verification rule function} / / onLoad outside the onLoad. There is only one function written in onLoad:function () {rules: {} messages: {}}.

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

Then there is the code for validation rules and error reporting rules.

/ / 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 enter name', minlength:' Please enter correct name'}, phone: {required:' Please enter Mobile number', tel:' Please fill in correct Mobile number'} this.WxValidate = new WxValidate (rules, messages)} / / call the verification function formSubmit: function (e) {console.log ('form has a submit event The data carried is:', e.detail.value) const params = e.detail.value / / Verification form if (! this.WxValidate.checkForm (params)) {const error = this.WxValidate.errorList [0] this.showModal (error) return false} this.showModal ({msg: 'submitted successfully'})}

I only wrote a little field verification here, and the official document also contains a lot of field verification rules, so I won't write them all. What I need to note here is that the object is instantiated in initValidate (), and the form verification is complete.

Let's take a look at the demonstration.

This is the end of the content of "how to use forms to verify WxValidate" developed by WeChat Mini Programs. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.