⼩程序实现表单验证⼩程序的表单验证，供⼤家参考，具体内容如下
需要⽤到⼀个插件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 = List[0]
console.log(error);
return false
}
console.log("yes");
return true;
},
值得注意的是： WxValidate的errorList列表返回的是⼀个对象。
⽽且验证的字段名应该和表单组件对应的name⼀⼀对应。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。