uniapp中如何實現表單驗證與資料校驗-uni-app-PHP中文網

uniapp中如何實現表單驗證與資料校驗

uniapp中如何實作表單驗證和資料校驗

摘要：在uniapp開發中，表單驗證和資料校驗是不可或缺的一部分。本文將詳細介紹如何在uniapp中實現表單驗證和資料校驗，提供具體的程式碼範例。

一、引入uni-validate插件

uni-validate是uniapp官方提供的表單驗證插件，可以方便地實現表單驗證和資料校驗。首先，在uniapp專案中的根目錄下的package.json檔案的dependencies中新增uni-validate外掛程式的引入程式碼：

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

然後在專案根目錄下執行npm install指令安裝外掛：

npm install uni-validate --save

二、在頁面中引入並使用uni-validate插件

在需要使用表單驗證和資料校驗的頁面中，首先引入uni-validate外掛程式：

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

然後在頁面的data中建立一個表單驗證規則對象，例如：

data() {
return {

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

登入後複製

}
},

接下來，在頁面的methods中新增一個表單驗證的方法：

methods: {
// 表單提交
formSubmit() {

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

登入後複製

}
}

最後，在頁面的template中，在需要進行表單驗證的input元件上新增對應的驗證規則，例如：

在表單提交的button元件上新增點擊事件：

#三、程式碼範例

以下是完整的範例程式碼，展示如何使用uni-validate插件在uniapp中實作表單驗證和資料校驗的功能：

// index.vue

熱門教學

更多>

相關教學