uniapp表单验证方法详解(uni-app表单验证)

From表单组件具有数据收集、提交数据的功能,某种程度上说它就是一个容器,下面这篇文章主要给大家介绍了关于uniapp表单验证的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下 目录

推荐整理分享uniapp表单验证方法详解(uni-app表单验证)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:uniapp如何验证每个页面鉴权,uniapp如何验证每个页面鉴权,uniapp实现表单验证,uniapp如何验证每个页面鉴权,uniapp表单post提交,uniapp实现表单验证,uniapp表单验证veevalidate,uniapp表单验证veevalidate,内容如对您有帮助，希望把文章链接给更多的朋友！

表单验证不触发解决办法1：直接在input中加入@input="binddata('email',$event.detail.value)"方法2：validateFunction 自定义校验规则总结表单验证不触发解决办法第一个参数传入当前表单组件所在的 name，同当前父组件 uni-forms-item 绑定属性 name 的值第二个参数传入需要校验的值，内置组件可以通过 $event.detail.value 获取到组件的返回值，自定义组件传入需要校验的值即可第三个参数传入 uni-forms 组件绑定属性 ref 的值，通常在多表单的时候需要传入，用来区分表单，如页面中仅有一个 uni-forms 可忽略1：直接在input中加入@input="binddata('email',$event.detail.value)"方法<uni-forms-item label="邮箱" name="email"><input class="input"v-model="formData.email"type="text"placeholder="请输入用户名"@input="binddata('email',$event.detail.value)" /></uni-forms-item>2：validateFunction 自定义校验规则rule : 当前校验字段在 rules 中所对应的校验规则value : 当前校验字段的值data : 所有校验字段的字段和值的对象callback : 校验完成时的回调，一般无需执行callback，返回true(校验通过)或者false(校验失败)即可 ，如果需要显示不同的 errMessage，如果校验不通过需要执行 callback('提示错误信息')，如果校验通过，执行callback()即可

（1）在onReady中设置规则

onReady() {// 需要在onReady中设置规则this.$refs.form.setRules(this.rules)},

（2）html代码

<uni-forms ref="form" :modelValue="formData"><uni-forms-item label="兴趣爱好" required name="hobby"><uni-data-checkbox v-model="formData.hobby" multiple :localdata="hobbys" /></uni-forms-item></uni-forms><button class="button" @click="submit">校验表单</button>

（3）rules代码

rules: {hobby: {rules: [{required: true,errorMessage: '请选择兴趣',},{validateFunction:function(rule,value,data,callback){if (value.length < 2) {callback('请至少勾选两个兴趣爱好')}return true}}]}}

（4）submit函数

submit(form) {this.$refs.form.validate().then(res=>{console.log('成功：', res);}).catch(err =>{console.log('失败：', err);})}总结

到此这篇关于uniapp表单验证的文章就介绍到这了,更多相关uniapp表单验证内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！