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: '',
  ...
},

}
},

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'
    })
  }
})

}
}

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:

Submit

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

<input v-model="formData.username" :rules="formRules.username" placeholder="请输入用户名" />
<input v-model="formData.password" :rules="formRules.password" placeholder="请输入密码" />
<button form-type="submit" @click="formSubmit">提交</button>

<script><br>import uniValidate from '@/uni_modules/uni-validate/index.js'</script>

export default {
data() {

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

},
methods: {

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

}
}

Summary: Pass By introducing the uni-validate plug-in and combining it with the form validation rule object, the form validation and data verification functions can be easily implemented in uniapp. Through the above code examples, you can quickly apply and flexibly adjust the form validation and data validation functions in your uniapp project.

The above is the detailed content of How to implement form validation and data verification in uniapp. For more information, please follow other related articles on the PHP Chinese website!