uniapp表单验证

表单验证不触发解决办法

第一个参数传入当前表单组件所在的 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表单验证相关推荐

uni-app 表单验证
uni-app 表单验证 uni-app的内置组件已经有了组件,用于提交表单内容. 'uni-forms' 提供了 rules属性来描述校验规则.'uni-forms-item'子组件来包裹具体的表 ...
关于uni-app中uni-forms表单验证时“多级结构对象数据”如何做数据校验的解决方案
- 前言这几天在做uni-app表单验证时遇到了一个问题,按官方文档给出的方法,当需要数据校验时,只需要 1.为uni-forms中的"modelValue"数据设置" ...
uniapp的表单验证
回顾一下,平常我们在使用element-ui的时候是如何进行表单验证的 <template><div class=""><el-form ref=&q ...
uni-form动态配置以及表单验证坑
开发环境:uniapp小程序开发问题:动态配置uni-form表单时,uni-easyinput写入默认值不显示,且表单验证,在输入数据后不自动刷新验证的问题解决方案: 源代码修改后增加了属性 ...
[JAVA EE] Thymeleaf 高级用法：模板布局，带参数的引用片段，表单验证，常用校验注解
模板布局公共部分通常定义为模板布局:如页眉,页脚,公共导航栏.菜单等. 模板布局定义方法布局页中用 th:fragment 定义模板片段,其他页面用 th:insert 引用片段例如:foote ...
float js 正则验证_使用HTML和Vuejs进行表单验证
他们说大多数网络应用只是HTML表单.好吧,表单需要验证,谢天谢地,HTML5带有许多优秀的内置表单验证功能,可用于电子邮件,数字,最大值,分钟等.您甚至可以使用模式编写自己的验证规则.在本文中,我将 ...
JavaScript 表单与表单验证
JavaScript 表单 JavaScript 表单验证 HTML 表单验证可以通过 JavaScript 来完成. 以下实例代码用于判断表单字段(fname)值是否存在,如果存在,则弹出信息,否则 ...
jquery 实现表单验证功能代码(简洁)
html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表单验证页面</title&g ...
一款比较实用齐全的jQuery 表单验证插件
一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网 ...

uniapp表单验证

uniapp表单验证相关推荐

最新文章

热门文章