怎么新建MySQL数据库
发布时间：2022-10-20
作者：admin
阅读：342
阅读：342
在这篇文章中我们来了解一下“微信小程序表单验证怎样做，代码是什么”，一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！
微信小程序的表单验证，供大家参考，具体内容如下
需要用到一个插件WxValidat.js
传送门
在需要使用的page js文件下导入
import WxValidate from '../../utils/WxValidate.js' |
主要内容
WXML内容
< form bindsubmit = "formSubmit" > < view class = "weui-cells__title" >用户名</ view > < view class = "weui-cells weui-cells_after-title" > < view class = "weui-cell weui-cell_input" > < input class = "weui-input" type = "text" name = "userName" placeholder = "请输入用户名" /> </ view > </ view > < view class = "weui-cells__title" >密码</ view > < view class = "weui-cells weui-cells_after-title" > < view class = "weui-cell weui-cell_input" > < input class = "weui-input" type = "text" name = "password" placeholder = "请输入密码" /> </ view > </ view > < view class = "weui-cells__title" >手机号</ view > < view class = "weui-cells weui-cells_after-title" > < view class = "weui-cell weui-cell_input" > < input class = "weui-input" type = "text" name = "phone" placeholder = "请输入手机号" /> </ view > </ view > < view class = "btn-area" > < button formType = "submit" >Submit</ button > < button formType = "reset" >Reset</ button > </ view > </ form > |
js内容
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this .initValidate() //验证规则函数,初始化字段规则和字段提示信息 }, initValidate() { const rules = { userName: { //用户名 required: true , minlength:2 }, password: { //密码 required: true }, phone:{ //手机号 required: true , tel: true } } const messages = { //提示信息 userName: { required: '请填写姓名' , minlength: '请输入正确的名称' }, password: { required: '请填写密码' }, phone:{ required: '请填写手机号' , tel: '请填写正确的手机号' } } this .WxValidate = new WxValidate(rules, messages) }, //调用验证函数 formSubmit: function (e) { console.log( 'form发生了submit事件，携带的数据为：' , e.detail.value) const params = e.detail.value //校验表单 if (! this .WxValidate.checkForm(params)) { const error = this .WxValidate.errorList[0] console.log(error); return false } console.log( "yes" ); return true ; }, |
值得注意的是： WxValidate的errorList列表返回的是一个对象。
而且验证的字段名应该和表单组件对应的name一一对应。
到此，关于“微信小程序表单验证怎样做，代码是什么”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。如果想要学习更多的相关知识，欢迎关注群英网络，小编每天都会给大家分享实用的文章!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理