微信小程序表单验证怎样做，代码是什么-群英

上一篇：如何用React tsx编写随机验证码，代码是什么下一篇：React antd表格渲染图片的操作是什么

在这篇文章中我们来了解一下“微信小程序表单验证怎样做，代码是什么”，一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！

微信小程序的表单验证，供大家参考，具体内容如下

需要用到一个插件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 ; },