如何在微信小程序中实现表单验证？

微信小程序的发生，使我们可以在手机中便利地下载网页、采用应用领域以及展开交易。但是，在采用微信小程序的过程中，你与否曾经碰到了表单检验不健全的问题？

表单检验就是任何一个门户网站、电子商务网站以及应用程序都必须同时实现的功能。这个功能难被忽视，但却是非常关键的，因为它可以避免蓄意访问者递交不实、有损的信息。在本文中，我们将深入探讨如何在微信小程序中同时实现表单检验。

表单检验的重要性

表单检验可以保证输出表单内的信息就是合乎规则和完备的。如果没表单检验，那么就很难发生以下情况：

1. 输出的信息不完备：输出表单的信息可能将就是不完备的，例如缺乏m6项。

2. 输出的信息不合乎规则：输出表单的信息可能将不合乎规则，例如使手机号码字段就可以输出数字却输出了字母。

3. 输出的信息有毒：输出表单的信息可能将就是有毒的，如SQL转化成、XSS等反击。

4. 重复递交：输出表单的信息可能将被蓄意访问者重复递交，减少服务器的经济负担。

以上种种情况都会给网站或小程序增添非常大的风险。而表单检验则可以有效地化解这些问题，保证输出的信息就是有效率且恰当的。

如何在微信小程序中同时实现表单检验？

在微信小程序中同时实现表单检验并不繁杂，以下就是同时实现过程：

1. 递交事件

首先，我们须要为表单存取一个递交事件。

```

```

2. 表单检验

接下来，我们须要在递交事件中对表单输出的内容展开检验。这里我们采用了微信小程序官方提供更多的表单检验函数，如下右图：

```

submitForm: function (e) {

console.log('form出现了submit事件，随身携带数据为：', e.detail.value)

// 表单检验

if (!e.detail.value.name.trim()) {

wx.showToast({

title: '恳请输出姓名',

icon: 'none'

})

return false

} else if (!e.detail.value.phone.trim()) {

wx.showToast({

title: '恳请输出手机号码',

icon: 'none'

})

return false

} else if (!/^1[0-9]{10}$/.test(e.detail.value.phone.trim())) {

wx.showToast({

title: '手机号码格式错误',

icon: 'none'

})

return false

} else if (!e.detail.value.address.trim()) {

wx.showToast({

title: '恳请输出地址',

icon: 'none'

})

return false

}

}

```

在这个函数里，我们对姓名、手机号码和地址展开了m6检验，手机号码展开了正则相匹配检验。

3. 递交表单

当所有表单内容都通过检验后，就可以递交表单了。在这个例子里，我们用了微信小程序的网络命令功能，将表单内容发送到后台服务端。

```

submitForm: function (e) {

console.log('form出现了submit事件，随身携带数据为：', e.detail.value)

// 表单检验

if (!e.detail.value.name.trim()) {

wx.showToast({

title: '恳请输出姓名',

icon: 'none'

})

return false

} else if (!e.detail.value.phone.trim()) {

wx.showToast({

title: '恳请输出手机号码',

icon: 'none'

})

return false

} else if (!/^1[0-9]{10}$/.test(e.detail.value.phone.trim())) {

wx.showToast({

title: '手机号码格式错误',

icon: 'none'

})

return false

} else if (!e.detail.value.address.trim()) {

wx.showToast({

title: '恳请输出地址',

icon: 'none'

})

return false

} else {

wx.request({

url: 'http://localhost:8080/submitForm',

data: {

name: e.detail.value.name,

phone: e.detail.value.phone,

address: e.detail.value.address

},

method: 'POST',

header: {

'Content-Type': 'application/x-www-form-urlencoded'

},

success: function (res) {

console.log(res.data)

wx.showToast({

title: res.data.msg,

icon: 'none'

})

},

fail: function () {

wx.showToast({

title: '递交失利，恳请稍后再试',

icon: 'none'

})

}

})

}

}

```

在递交表单之前，我们推论表单中的输出内容与否符合要求，只有符合要求的表单就可以递交至后台服务端，否则就插入提示框知会用户输出不符合要求。

结论

微信小程序中同时实现表单检验只须要在递交事件中展开检验，具体内容的同时实现方式根据实际情况而的定。但有一点须要特别注意的就是，表单检验只是输出信息安全的一个方面，还须要展开其他的安全措施，例如避免XSS、CSRF等反击。因此，在微信小程序的研发过程中，我们须要综合考量所有安全问题，不断完善用户体验和安全性。