微信小程序的发生,使我们可以在手机中便利地下载网页、采用应用领域以及展开交易。但是,在采用微信小程序的过程中,你与否曾经碰到了表单检验不健全的问题?
表单检验就是任何一个门户网站、电子商务网站以及应用程序都必须同时实现的功能。这个功能难被忽视,但却是非常关键的,因为它可以避免蓄意访问者递交不实、有损的信息。在本文中,我们将深入探讨如何在微信小程序中同时实现表单检验。
表单检验的重要性
表单检验可以保证输出表单内的信息就是合乎规则和完备的。如果没表单检验,那么就很难发生以下情况:
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等反击。因此,在微信小程序的研发过程中,我们须要综合考量所有安全问题,不断完善用户体验和安全性。