How to implement form validation and data verification in uniapp-uni-app-php.cn

How to implement form validation and data verification in uniapp

WBOY

Release： 2023-10-20 17:02:08

Original

1499 people have browsed it

How to implement form validation and data verification in uniapp

How to implement form verification and data verification in uniapp

Abstract: In uniapp development, form verification and data verification are an essential part. This article will introduce in detail how to implement form validation and data verification in uniapp, and provide specific code examples.

1. Introducing the uni-validate plug-in

Uni-validate is a form validation plug-in officially provided by uniapp, which can easily implement form verification and data verification. First, add the introduction code of the uni-validate plug-in in the dependencies of the package.json file in the root directory of the uniapp project:

"dependencies": {
...
"uni- validate": "^1.0.0"
}

Then execute the npm install command in the project root directory to install the plug-in:

npm install uni-validate --save

2. Introduce and use the uni-validate plug-in in the page

In pages that need to use form validation and data verification, first introduce the uni-validate plug-in:

import uniValidate from ' @/uni_modules/uni-validate/index.js'

Then create a form validation rule object in the data of the page, for example:

data() {
return {

formRules: {
  username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    ...
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    ...
  ],
  ...
},
formData: {
  username: '',
  password: '',
  ...
},

Copy after login

}
},

Next, add a form verification method in the methods of the page:

methods: {
// Form submission
formSubmit() {

this.$refs['form'].validate(valid => {
  if (valid) {
    // 表单验证通过，执行表单提交操作
    ...
  } else {
    // 表单验证不通过，弹出提示
    uni.showToast({
      title: '请填写必填项',
      icon: 'none'
    })
  }
})

Copy after login

}
}

Finally, in the template of the page, add the corresponding validation rules on the input component that requires form validation, for example:

Add a click event on the button component of the form submission:

3. Code example

The following is a complete example code that shows how to use the uni-validate plug-in Implement form validation and data verification functions in uniapp:

// index.vue