uniapp的post请求（uniapp表单验证方法详解）
导读：表单验证不触发解决办法 第一个参数传入当前表单组件所在的 name，同当前父组件 uni-forms-item 绑定属性 name 的值 第二个参数传入需要校验的值，内置组件可以通过 $event.detail.value 获取到组件的返回值，自定义组件传入需要校验的值即可 第三...
表单验证不触发解决办法
第一个参数传入当前表单组件所在的 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表单验证内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！