微信小程序实现表单验证
作者：Harris-H
这篇文章主要为大家详细介绍了微信小程序实现表单验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序的表单验证，供大家参考，具体内容如下
需要用到一个插件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一一对应。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。