位置: IT常识 - 正文

uniapp之表单校验(前端uniapp写表格)

编辑:rootadmin
uniapp之表单校验 uni-forms表单校验

推荐整理分享uniapp之表单校验(前端uniapp写表格),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uniapp表单验证veevalidate,uniapp表单post提交,uni表单验证,uniapp表单校验不能为空,uniapp表单校验不能为空,uni-app表单验证,uniapp表单校验不能为空,uniapp表单校验给了初始值,内容如对您有帮助,希望把文章链接给更多的朋友!

1、uni-forms 需要通过rules属性传入约定的校验规则。

2、uni-forms 需要绑定model属性,值为表单的key/value组成的对象

3、uni-forms-item 需要设置name 属性为当前字段名,字段为String|Array类型

4、只要使用的组件不管内置组件还是三方组件,只需绑定v-model,无需其他操作

5、如果使用原生checkbox或三方组件不支持v-model等,只需要给罪案绑定binddata方法即可出发表单校验,无需绑定事件到methods中

6、binddata('name',$event.detail.value,'form')方法接受三个值,

第一个参数传入当前表单组件所在的name,同当前父组件uni-forms-item 绑定属性name的值

第二个参数传入需要校验的值,内置 组件可以通过$event.detail.value 获取到组件的返回值,自定义组件传入需要校验的值即可

第三个参数传入uni-forms组件绑定属性ref的值,通常在多表单的时候需要传入,用来区分表单,如页面中仅有一个uni-forms可忽略

7、如果内置binddata方法无法满足需求,在当前页面的methods中复写此方法即可,复写此方法需要调用uni-forms的setValue来触发表单校验

<template> <view> <uni-forms ref="form" :modelValue="formData" :rules="rules"> <uni-forms-item label="姓名" name="name"> <uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" /> </uni-forms-item> <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> </uni-forms> <button @click="submit">Submit</button> </view></template><script>export default { data() { return { // 表单数据 formData: { name: 'LiMing', email: 'dcloud@email.com' }, rules: { // 对name字段进行必填验证 name: { rules: [{ required: true, errorMessage: '请输入姓名', }, { minLength: 3, maxLength: 5, errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符', } ] }, // 对email字段进行必填验证 email: { rules: [{ format: 'email', errorMessage: '请输入正确的邮箱地址', }] } } } }, methods: { /** * 复写 binddata 方法,如果只是为了校验,无复杂自定义操作,可忽略此方法 * @param {String} name 字段名称 * @param {String} value 表单域的值 */ // binddata(name,value){ // 通过 input 事件设置表单指定 name 的值 // this.$refs.form.setValue(name, value) // }, // 触发提交表单 submit() { this.$refs.form.validate().then(res=>{ console.log('表单数据信息:', res); }).catch(err =>{ console.log('表单错误信息:', err); }) } }}</script>校验规则说明

校验规则接受一个Object类型的值,通过传入不同的规则来表示每个表单域的值该如何校验

对象的key表示当前表单域的字段名,value为具体的校验规则

以下为value所包含的内容

属性名

类型

说明

rules

Array

校验规则,下方rules属性说明

validateTrigger

String

表单校验时机【1.4.0】已废弃

label

String

当前表单域的字段中文名,多用于errMessage的显示,可以不填

rules: { // 对name字段进行必填验证 name: { // name 字段的校验规则 rules:[ // 校验 name 不能为空 { required: true, errorMessage: '请填写姓名', }, // 对name字段进行长度验证 { minLength: 3, maxLength: 5, errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符', } ], // 当前表单域的字段中文名,可不填写 label:'姓名', validateTrigger:'submit' }}rules 属性说明

每一个验证规则中,可以配置多个属性,下面是一些常见规则属性

属性名

类型

默认值

可选值

说明

required

Boolean

-

-

是否必填,配置此参数不会显示输入框左边的必填星号,如需要,请配置uni-forms-item组件的的required为true

range

Array

-

-

数组至少要有一个元素,且数组内的每一个元素都是唯一的。

format

String

-

-

内置校验规则,如这些规则无法满足需求,可以使用正则匹配或者自定义规则

pattern

RegExp

-

-

正则表达式,注意事项见下方说明

maximum

Number

-

-

校验最大值(大于)

minimum

Number

-

-

校验最小值(小于)

maxLength

Number

-

-

校验数据最大长度

errorMessage

String

-

-

校验失败提示信息语,可添加属性占位符,当前表格内属性都可用作占位符

validateFunction

Function

-

-

自定义校验规则

format属性值说明

属性名

说明

string

必须是 string 类型,默认类型

number

必须是 number 类型

boolean

必须是 boolean 类型

array

必须是 array 类型

object

必须是 object 类型

url

必须是 url 类型

email

必须是 email 类型

validateFunction 自定义校验规则使用说明

validateFunction 方法返回四个参数 validateFunction:function(rule,value,data,callback){} ,当然返回参数名开发者可以自定义:

rule : 当前校验字段在 rules 中所对应的校验规则

value : 当前校验字段的值

data : 所有校验字段的字段和值的对象

callback : 校验完成时的回调,一般无需执行callback,返回true(校验通过)或者false(校验失败)即可 ,如果需要显示不同的 errMessage,如果校验不通过需要执行 callback('提示错误信息'),如果校验通过,执行callback()即可

<template> <view> <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> </view></template><script>export default { data() { return { formData:{ }, rules: { hobby: { rules: [{ required: true, errorMessage: '请选择兴趣', },{ validateFunction:function(rule,value,data,callback){ if (value.length < 2) { callback('请至少勾选两个兴趣爱好') } return true } }] } } } }, onReady() { // 需要在onReady中设置规则 this.$refs.form.setRules(this.rules) }, methods: { submit(form) { this.$refs.form.validate().then(res=>{ console.log('表单数据信息:', res); }).catch(err =>{ console.log('表单错误信息:', err); }) } }}</script>validateFunction 异步校验

上面的自定义校验方式为同步校验 ,如果需要异步校验,validateFunction 需要返回一个 Promise ,校验不通过 执行 reject(new Error('错误信息')) 返回对应的错误信息,如果校验通过则直接执行 resolve() 即可,在异步校验方法中,不需要使用 callback 。

<template> <view> <uni-forms :modelValue="formData" ref="form"> <uni-forms-item name="age" label="年龄"> <uni-easyinput v-model="formData.age" type="text" placeholder="请输入年龄" /> </uni-forms-item> </uni-forms> <button class="button" @click="submit">校验表单</button> </view></template><script>export default { data() { return { formData:{ age:'' }, rules: { age: { rules: [{ required: true, errorMessage: '请输入年龄', },{ validateFunction: (rule, value, data, callback) => { // 异步需要返回 Promise 对象 return new Promise((resolve, reject) => { setTimeout(() => { if (value > 10 ) { // 通过返回 resolve resolve() } else { // 不通过返回 reject(new Error('错误信息')) reject(new Error('年龄必须大于十岁')) } }, 2000) }) } }] } } } }, onReady() { // 需要在onReady中设置规则 this.$refs.form.setRules(this.rules) }, methods: { /** * 表单提交 * @param {Object} event */ submit() { uni.showLoading() this.$refs.form.validate().then(res => { uni.hideLoading() console.log('表单数据信息:', res); }).catch(err => { uni.hideLoading() console.log('表单错误信息:', err); }) } }}</script>动态表单校验

多用于同一个字段需要添加多次的场景,如需要动态创建多个域名参与检验。

在 formData 中定义个变量用来接受同一个字段的多个结果。dynamicFormData: { email: '', // domains 字段下会有多个结果 domains: []}使用 uni-forms-item 的 rules 属性定义单个表单域的校验规则。<uni-forms-item :label="item.label+' '+index" required :rules="[{'required': true,errorMessage: '域名项必填'}]" :key="item.id"> ...</uni-forms-item>name 需要动态指定,动态表单推荐使用 Array 类型,内容从左到右为绑定值的调用链。['domains',index,'value'] 等同于 dynamicFormData.domains[index].value<uni-forms-item required :label="item.label+' '+index" :name="['domains',index,'value']" :rules="[{'required': true,errorMessage: '域名项必填'}]" :key="item.id" > ...</uni-forms-item>需要绑定值的组件的 v-model 也需要动态指定 dynamicFormData.domains[index].value<uni-forms-item required :label="item.label+' '+index" :name="['domains',index,'value']" :rules="[{'required': true,errorMessage: '域名项必填'}]" :key="item.id" > <uni-easyinput v-model="dynamicFormData.domains[index].value" placeholder="请输入域名" /></uni-forms-item>

完整实例

<uni-forms ref="dynamicForm" :rules="dynamicRules" :model="dynamicFormData"><uni-forms-item label="邮箱" required name="email"><uni-easyinput v-model="dynamicFormData.email" placeholder="请输入姓名" /></uni-forms-item><template v-for="(item,index) in dynamicFormData.domains"><uni-forms-item :label="item.label+' '+index" required:rules="[{'required': true,errorMessage: '域名项必填'}]" :key="item.id":name="['domains',index,'value']"><view class="form-item"><uni-easyinput v-model="dynamicFormData.domains[index].value" placeholder="请输入域名" /><button class="button" size="mini" type="default" @click="del(item.id)">删除</button></view></uni-forms-item></template></uni-forms><view class="button-group"><button type="primary" size="mini" @click="add">新增域名</button><button type="primary" size="mini" @click="submit('dynamicForm')">提交</button></view><script>export default {data() {return {// 数据源dynamicFormData: {email: '',domains: []},// 规则dynamicRules: {email: {rules: [{required: true,errorMessage: '域名不能为空'}, {format: 'email',errorMessage: '域名格式错误'}]}}}},methods: {// 新增表单域add() {this.dynamicFormData.domains.push({label: '域名',value:'',id: Date.now()})},// 删除表单域del(id) {let index = this.dynamicLists.findIndex(v => v.id === id)this.dynamicLists.splice(index, 1)},// 提交submit(ref) {this.$refs[ref].validate((err,value)=>{console.log(err,value);})},}}</script>表单校验时机说明

如果需要子表单需要单独的校验时机,可以使用 uni-forms-item 的 rules 属性和 onFieldChange 配合

<template><view><uni-forms ref="form" :modelValue="formData" validate-trigger="bind"><uni-forms-item name="age" label="年龄"><!-- uni-easyinput 的校验时机是数据发生变化, 即触发 input 时 --><uni-easyinput v-model="formData.age" type="text" placeholder="请输入年龄" /></uni-forms-item><uni-forms-item ref="input" name="email" label="邮箱"><!-- input 的校验时机 --><input v-model="formData.email" @blur="(e)=>$refs.input.onFieldChange($event.detail.value)" /></uni-forms-item><button class="button" @click="submit">校验表单</button></uni-forms></view></template>

【1.4.0后此规则已不生效】对于表单校验时机,同时只会有一个 validateTrigger 发生作用,它的作用权重为

规则 > uni-forms-item > uni-forms

如果规则里配置 validateTrigger ,则优先使用规则里的 validateTrigger 属性来决定表单校验时机

如果规则里没有配置 validateTrigger ,则优先使用 uni-forms-item 的 validateTrigger 属性来决定表单校验时机

如果 uni-forms-item 组件里没有配置 validateTrigger ,则优先使用 uni-forms 的 validateTrigger 属性来决定表单校验时机

以此类推,如果都没有使用 validateTrigger 属性,则会使用 uni-forms 的 validateTrigger 属性默认值来决定表单校验时机

APIForms Props

属性名

类型

默认值

可选值

说明

兼容说明

model

Object

-

-

表单数据

1.4.0 新增

rules

Object

-

-

表单校验规则

validateTrigger

String

submit

bind/submit/blur

表单校验时机,blur仅在 uni-easyinput 中生效

1.4.0 新增 blur 值

label-position

String

left

top/left

label 位置

label-width

String/Number

75

-

label 宽度,单位 px

label-align

String

left

left/center/right

uniapp之表单校验(前端uniapp写表格)

label 居中方式

err-show-type

String

undertext

undertext/toast/modal

表单错误信息提示方式

border

Boolean

false

-

是否显示分格线

value

Object

-

-

表单数据,兼容vue2

即将弃用,请使用 model 代替

modelValue

Object

-

-

表单数据,兼容vue3

即将弃用,请使用 model 代替

Forms Events

事件称名

说明

@validate

任意表单项被校验后触发,返回表单校验信息

Forms Methods

方法称名

说明

兼容说明

setRules

动态设置表单规则

validate

对整个表单进行校验的方法,会返回一个 promise

validateField

部分表单进行校验

clearValidate

移除表单的校验结果

submit

对整个表单进行校验的方法,会返回一个 promise

即将弃用,请使用validate代替

setValue

设置表单某一项 name 的对应值,通常在 uni-forms-item 和自定表单组件中使用

即将弃用,请使用 onFieldChange 兼容相关功能

resetFields

重置表单, 需要把uni-forms的modelValue属性改为v-model,且对内置组件可能不生效

1.4.0 已弃用

validate(keepItem:Array,callback:Function) 方法说明

validate 方法是对整个表单进行校验,方法接受两个参数

参数称名

类型

说明

keepItem

Array

保留不参与校验的字段

callback

Function

校验完成返回函数

校验成功后,校验对象只保留指定了name的字段(只要 uni-forms-item 绑定了 name,哪怕不校验,也会返回),如果需要保留其他字段,则需要 keepItem 属性

<template> <view> <uni-forms ref="form" :modelValue="formData"> <uni-forms-item name="age" label="年龄"> <uni-easyinput v-model="formData.age" type="text" placeholder="请输入年龄" /> </uni-forms-item> <button class="button" @click="submit">校验表单</button> </uni-forms> </view></template><script>export default { data() { return { formData:{ age:'' }, rules: { // ... } } }, onLoad(){ this.formData.id = 'testId' }, methods: { submit() { // 在 onLoad 生命周期中,formData添加了一个 id 字段 ,此时这个字段是不参数校验的,所以结果中不返回 // 在 validate(['id']) 方法中,指定第一个参数 ,即可返回id字段 this.$refs.form.validate(['id'],(err,formData)=>{ if(!err){ console.log('success',formData) } }) } }}</script>

validate 方法还可以返回一个 Promise 对象,如果使用了 callback 则Promise 返回 null,validate 方法会优先使用 callback。

callback 方法会返回两个返回值 :

第一个返回值为检验结果,如果校验失败,则返回失败信息,如果成功,返回 null

第二个返回值校验数据

// 使用 callback// 如果不需要 keepItem 参数 ,则可以省略this.$refs.form.validate((err,formData)=>{// 如果校验成功 ,err 返回 nullif(!err){console.log('success',formData)return}console.log('error',err)}).then(res=>{// res 返回 null})// 使用 Promise// 对整个表单进行校验,返回一个 Promisethis.$refs.form.validate().then((res)=>{// 成功返回,res 为表单数据// 其他逻辑处理// ...}).catch((err)=>{// 表单校验验失败,err 为具体错误信息// 其他逻辑处理// ...})

setValue(name:String,value:any) 方法说明

setValue 方法通常用于内置组件或三方组件返回值的校验,因为uni-esayinput 等 uni 开头的组件内置了对 uni-forms的支持,所以这些组件返回的值可以直接使用,但是比如像input 这些内置组件值的变化,无法及时通知 uni-forms ,从而无法正常的校验,这时就需要我们手动将这些值加入到uni-forms的校验。

setValue 方法接受两个参数:

name: 表单域对应的name

value: 表单域对应的值

<template><view><uni-forms ref="form" :modelValue="formData"><uni-forms-item name="age" label="年龄"><input v-model="formData.age" @input="setValue('age',formData.age)"></uni-forms-item><button class="button" @click="submit">校验表单</button></uni-forms></view></template><script>export default {data() {return {formData:{age:''},rules: {// ...}}},methods: {setValue(name,value){// 设置表单某项对应得值来触发表单校验// 接受两个参数,第一个参数为表单域的 name ,第二个参数为表单域的值this.$refs.form.setValue(name,value)},submit() {this.$refs.form.validate(['id'],(err,formData)=>{if(!err){console.log('success',formData)}})}}}</script>其他方法说明// 设置规则this.$refs.form.setRules({//...})// 部分表单进行校验,接受一个参数,类型为 String 或 Array ,只校验传入 name 表单域的值this.$refs.form.validateField(['name', 'email']).then((res)=>{// 成功返回,res 为对应表单数据// 其他逻辑处理// ...}).catch((err)=>{// 表单校验验失败,err 为具体错误信息// 其他逻辑处理// ...})// 移除表单校验,接受一个参数,类型为 String 或 Array ,只移除传入 name 表单域的值,如果不传入参数,则移除所有this.$refs.form.clearValidate(['name', 'email'])FormsItem Props

属性名

类型

默认值

可选值

说明

兼容说明

name

String/Array

-

-

表单域的属性名,在使用校验规则时必填

rules

Object

-

-

表单校验规则

required

Boolean

false

-

label 右边显示红色"*"号,样式显示不会对校验规则产生效果

label

String

-

-

输入框左边的文字提示

label-width

Number

70

-

label的宽度,单位px

error-message

String

-

-

显示的错误提示内容,如果为空字符串或者false,则不显示错误信息

label-align

String

left

left/center/right

label的文字对齐方式

label-position

String

left

top/left

label的文字的位置

1.4.0已弃用 ,统一使用 uni-forms 的对齐方式

validateTrigger

String

submit

bind/submit

表单校验时机

1.4.0已弃用,统一使用 uni-forms 的校验时机

left-icon

String

-

-

label左边的图标,限uni-ui的图标名称

1.4.0已弃用 ,请使用 #label 插槽实现相关功能

icon-color

String

#606266

-

左边通过icon配置的图标的颜色

1.4.0已弃用 ,请使用 #label 插槽实现相关功

FormsItem Methods

方法称名

说明

兼容说明

setRules

动态设置表单规则

onFieldChange

校验子表单

1.4.0新增

FormsItem Slots

插槽名

说明

default

默认插槽

label

label插槽,自定义label显示内容

示例

<template> <view class="container"> <uni-card :is-shadow="false" is-full> <text class="uni-h6">uni-forms 组件一般由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。</text> </uni-card> <uni-section title="基本用法" type="line"> <view class="example"> <!-- 基础用法,不包含校验规则 --> <uni-forms ref="baseForm" :modelValue="baseFormData"> <uni-forms-item label="姓名" required> <uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" /> </uni-forms-item> <uni-forms-item label="年龄" required> <uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" /> </uni-forms-item> <uni-forms-item label="性别" required> <uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" /> </uni-forms-item> <uni-forms-item label="兴趣爱好" required> <uni-data-checkbox v-model="baseFormData.hobby" multiple :localdata="hobbys" /> </uni-forms-item> <uni-forms-item label="自我介绍"> <uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入自我介绍" /> </uni-forms-item> <uni-forms-item label="日期时间"> <uni-datetime-picker type="datetime" return-type="timestamp" v-model="baseFormData.datetimesingle"/> </uni-forms-item> </uni-forms> </view> </uni-section> <uni-section title="对齐方式" type="line"> <view class="example"> <view class="segmented-control"> <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"> </uni-segmented-control> </view> <!-- 展示不同的排列方式 --> <uni-forms ref="baseForm" :modelValue="alignmentFormData" :label-position="alignment"> <uni-forms-item label="姓名" required> <uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" /> </uni-forms-item> <uni-forms-item label="年龄" required> <uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" /> </uni-forms-item> </uni-forms> </view> </uni-section> <uni-section title="表单校验" type="line"> <view class="example"> <!-- 基础表单校验 --> <uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData"> <uni-forms-item label="姓名" required name="name"> <uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" /> </uni-forms-item> <uni-forms-item label="年龄" required name="age"> <uni-easyinput v-model="valiFormData.age" placeholder="请输入年龄" /> </uni-forms-item> <uni-forms-item label="自我介绍" name="introduction"> <uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入自我介绍" /> </uni-forms-item> </uni-forms> <button type="primary" @click="submit('valiForm')">提交</button> </view> </uni-section> <uni-section title="自定义校验规则" type="line"> <view class="example"> <!-- 自定义表单校验 --> <uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData"> <uni-forms-item label="姓名" required name="name"> <uni-easyinput v-model="customFormData.name" placeholder="请输入姓名" /> </uni-forms-item> <uni-forms-item label="年龄" required name="age"> <uni-easyinput v-model="customFormData.age" placeholder="请输入年龄" /> </uni-forms-item> <uni-forms-item label="兴趣爱好" required name="hobby"> <uni-data-checkbox v-model="customFormData.hobby" multiple :localdata="hobbys" /> </uni-forms-item> </uni-forms> <button type="primary" @click="submit('customForm')">提交</button> </view> </uni-section> <uni-section title="动态表单" type="line"> <view class="example"> <!-- 动态表单校验 --> <uni-forms ref="dynamicForm" :rules="dynamicRules" :modelValue="dynamicFormData"> <uni-forms-item label="邮箱" required name="email"> <uni-easyinput v-model="dynamicFormData.email" placeholder="请输入姓名" /> </uni-forms-item> <uni-forms-item v-for="(item,index) in dynamicLists" :key="item.id" :label="item.label+' '+index" required :rules="item.rules" :name="'domains[' + item.id + ']'"> <view class="form-item"> <uni-easyinput v-model="dynamicFormData.domains[item.id]" placeholder="请输入域名" /> <button class="button" size="mini" type="default" @click="del(item.id)">删除</button> </view> </uni-forms-item> </uni-forms> <view class="button-group"> <button type="primary" size="mini" @click="add">新增域名</button> <button type="primary" size="mini" @click="submit('dynamicForm')">提交</button> </view> </view> </uni-section> </view></template><script> export default { data() { return { // 基础表单数据 baseFormData: { name: '', age: '', introduction: '', sex: 2, hobby: [5], datetimesingle: 1627529992399 }, // 表单数据 alignmentFormData: { name: '', age: '', }, // 单选数据源 sexs: [{ text: '男', value: 0 }, { text: '女', value: 1 }, { text: '保密', value: 2 }], // 多选数据源 hobbys: [{ text: '跑步', value: 0 }, { text: '游泳', value: 1 }, { text: '绘画', value: 2 }, { text: '足球', value: 3 }, { text: '篮球', value: 4 }, { text: '其他', value: 5 }], // 分段器数据 current: 0, items: ['左对齐', '顶部对齐'], // 校验表单数据 valiFormData: { name: '', age: '', introduction: '', }, // 校验规则 rules: { name: { rules: [{ required: true, errorMessage: '姓名不能为空' }] }, age: { rules: [{ required: true, errorMessage: '年龄不能为空' }, { format: 'number', errorMessage: '年龄只能输入数字' }] } }, // 自定义表单数据 customFormData: { name: '', age: '', hobby: [] }, // 自定义表单校验规则 customRules: { name: { rules: [{ required: true, errorMessage: '姓名不能为空' }] }, age: { rules: [{ required: true, errorMessage: '年龄不能为空' }] }, hobby: { rules: [{ format: 'array' }, { validateFunction: function(rule, value, data, callback) { if (value.length < 2) { callback('请至少勾选两个兴趣爱好') } return true } } ] } }, dynamicFormData: { email: '', domains: {} }, dynamicLists: [], dynamicRules: { email: { rules: [{ required: true, errorMessage: '域名不能为空' }, { format: 'email', errorMessage: '域名格式错误' }] } } } }, computed: { // 处理表单排列切换 alignment() { if (this.current === 0) return 'left' if (this.current === 1) return 'top' return 'left' } }, onLoad() {}, onReady() { // 设置自定义表单校验规则,必须在节点渲染完毕后执行 this.$refs.customForm.setRules(this.customRules) }, methods: { onClickItem(e) { console.log(e); this.current = e.currentIndex }, add() { this.dynamicLists.push({ label: '域名', rules: [{ 'required': true, errorMessage: '域名项必填' }], id: Date.now() }) }, del(id) { let index = this.dynamicLists.findIndex(v => v.id === id) this.dynamicLists.splice(index, 1) }, submit(ref) { this.$refs[ref].validate().then(res => { console.log('success', res); uni.showToast({ title: `校验通过` }) }).catch(err => { console.log('err', err); }) }, } }</script><style lang="scss"> .example { padding: 15px; background-color: #fff; } .segmented-control { margin-bottom: 15px; } .button-group { margin-top: 15px; display: flex; justify-content: space-around; } .form-item { display: flex; align-items: center; } .button { display: flex; align-items: center; height: 35px; margin-left: 10px; }</style>
本文链接地址:https://www.jiuchutong.com/zhishi/288029.html 转载请保留说明!

上一篇:池塘边结了冰的树 (© Philippe Sainte-Laudy Photography/Getty Images)(池塘里的水结冰了)

下一篇:发财树叶子发黄怎么办(发财树叶子发黄怎样补救)

  • 新手如何免费推广自己的淘宝店?看这些就够啦!(免费推广途径)

    新手如何免费推广自己的淘宝店?看这些就够啦!(免费推广途径)

  • iqooz5x有nfc功能吗

    iqooz5x有nfc功能吗

  • 荣耀play6T处理器(荣耀play5t参数配置)

    荣耀play6T处理器(荣耀play5t参数配置)

  • oppo怎么隐藏消息通知内容(oppo隐藏小妙招)

    oppo怎么隐藏消息通知内容(oppo隐藏小妙招)

  • 淘宝没有付款的订单怎么取消(淘宝没有付款的订单删除了怎么恢复)

    淘宝没有付款的订单怎么取消(淘宝没有付款的订单删除了怎么恢复)

  • 人工智能技术包括(人工智能技术包括哪些内容)

    人工智能技术包括(人工智能技术包括哪些内容)

  • 手机TT是什么意思

    手机TT是什么意思

  • 移动数据lte是4g吗(移动lte和4g的区别)

    移动数据lte是4g吗(移动lte和4g的区别)

  • 表格出现e十17怎么取消(表格出现e+17怎么办)

    表格出现e十17怎么取消(表格出现e+17怎么办)

  • 抖音上显示2个共同好友(抖音上显示2个未登录)

    抖音上显示2个共同好友(抖音上显示2个未登录)

  • ipad pro可以当电脑用吗(ipad pro可以当电脑吗)

    ipad pro可以当电脑用吗(ipad pro可以当电脑吗)

  • 抖音关注失败什么原因(抖音关注不成功)

    抖音关注失败什么原因(抖音关注不成功)

  • 魅族国内虚拟流量用不了(魅族国内虚拟流量怎么用)

    魅族国内虚拟流量用不了(魅族国内虚拟流量怎么用)

  • windows中文件夹的命名不能带扩展名对吗(windows中文件夹组织结构是一种)

    windows中文件夹的命名不能带扩展名对吗(windows中文件夹组织结构是一种)

  • 手机突然不能投屏了 以前还可以用(手机突然不能投屏到电视机)

    手机突然不能投屏了 以前还可以用(手机突然不能投屏到电视机)

  • 小米8se开机一直显示mi(小米8se开机一直显示mi 无法开机)

    小米8se开机一直显示mi(小米8se开机一直显示mi 无法开机)

  • 闲鱼被拉黑有提示吗(闲鱼拉黑后会提醒对方评价么)

    闲鱼被拉黑有提示吗(闲鱼拉黑后会提醒对方评价么)

  • 手机频繁重启如何解决(手机频繁重启如何处理)

    手机频繁重启如何解决(手机频繁重启如何处理)

  • 苹果7出厂系统多少(苹果7出厂系统版本)

    苹果7出厂系统多少(苹果7出厂系统版本)

  • 微信怎么录屏带语音(微信怎么录屏带语音和聊天记录)

    微信怎么录屏带语音(微信怎么录屏带语音和聊天记录)

  • 京东订单已再投是什么意思(京东订单已再投原因集约地址)

    京东订单已再投是什么意思(京东订单已再投原因集约地址)

  • 聊呗是什么(聊呗是什么?)

    聊呗是什么(聊呗是什么?)

  • 计算器ac是什么键(计算器ac是什么的缩写)

    计算器ac是什么键(计算器ac是什么的缩写)

  • 手机拍照怎么摆动作(手机拍照怎么摆好看)

    手机拍照怎么摆动作(手机拍照怎么摆好看)

  • 小米mix2s多少克(小米mix2s多重多少克)

    小米mix2s多少克(小米mix2s多重多少克)

  • 苹果手机设备锁怎么弄(苹果手机设备锁是什么意思)

    苹果手机设备锁怎么弄(苹果手机设备锁是什么意思)

  • 欧拉操作系统和鸿蒙区别介绍(欧拉操作系统和龙蜥哪个好用)

    欧拉操作系统和鸿蒙区别介绍(欧拉操作系统和龙蜥哪个好用)

  • 初级职称经济法目录
  • 增值税出口退税计入什么科目
  • 以前年度遗留的个税怎么处理
  • 土地增值税扣除20%的适用情况
  • 加工费怎么做账
  • 个人独资企业需要交什么税
  • 土地使用权利
  • 兼职劳务报酬需要发票吗
  • 金税盘显示已到锁死期,未到汇总期是什么原因
  • 计提跌价的存货卖出了
  • 银行存款可以红字吗
  • 个人出租商业用房
  • 企业年度财务报表主要包括
  • 快消品行业成本结转方法
  • 发票开错了收入增多了当月分录如何红冲?
  • 别人退保证金多久能到账
  • 制造业交新型墙体材料专项基金款分录
  • 取得投资收益会导致经营现金流量小于
  • 固定资产评估增值递延所得税
  • 消费型增值税计算公式
  • 发票过期未认证可以用吗
  • 以前年度多列的费用今年交回
  • 材料成本差异率要算发出材料吗
  • 工程决算条件
  • 其他应付款挂多少有风险
  • 企业高管需要什么证书
  • 民间非营利组织会计科目
  • 公司分期付款购车账务处理
  • 公司帐户能直接转账吗
  • 股东投资如何做账务处理
  • 公司收到银行转账会计分录
  • 可抵扣增值税有哪些
  • 如何自定义smartart
  • php数据统计分析
  • vue做项目的流程
  • php给图片加水印
  • 收到对方退回的现金
  • 301重定向到https 并且不带www跳转到带www
  • 过路费抵扣进项税怎么计算
  • 非金融企业之间借款利息可以抵扣吗
  • 5 分钟速通 SVG
  • 帝国cms灵动标签 PHP变量文章ID加减1
  • 融资交易的会计处理
  • 收缩数据库日志文件对数据有影响吗
  • 私车公用产生的费用算不算在公务用车运行维护费中
  • 加盟费收入如何入账
  • 事业单位研究开设的课题
  • 旅行社差额征收怎么报税
  • 取得与收益相关的政府补助计入什么科目
  • 车辆购置税退税申请表
  • 公司买车车辆购置税怎么交钱
  • 资产减值的含义与应用范围
  • 企业风险管理有哪些方面
  • sql实现行列转换
  • 微软windows 10
  • fedora os
  • winpe安装系统教程
  • wfxswtch.exe - wfxswtch是什么进程
  • win10 sfc命令
  • win8系统ie浏览器打不开
  • linux在实际工作中的应用
  • 电脑因故障出现问题而启动
  • win7系统玩英雄联盟蓝屏
  • cocos2dx lua android glsurfaceview 截图
  • javascriptwhile
  • jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
  • 基于android的app
  • nodejs报错
  • 完美解决gvim的菜单乱码问题
  • unity打包64位出错
  • javascript编辑工具
  • 深入理解javascript
  • javascript基本概念
  • jquery foreach循环
  • android开发框架
  • 测验2:python基本图形绘制
  • 煤炭资源税税率是多少啊
  • 个人所得税怎么退税
  • 2022年车船税减半政策
  • 刚注册了一家深圳公司
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设