validación de formularios uniformes
1. Los uniformes deben pasar las reglas de validación acordadas a través del atributo de reglas.
2. los uniformes deben vincular el atributo del modelo, y el valor es un objeto compuesto por la clave/valor del formulario
3. uni-forms-item necesita establecer el atributo de nombre en el nombre del campo actual, y el campo es del tipo String|Array
4. Siempre que los componentes utilizados sean componentes integrados o componentes de terceros, solo es necesario vincular el modelo v, no se requieren otras operaciones
5. Si usa una casilla de verificación nativa o componentes de terceros que no son compatibles con v-model, etc., solo necesita vincular el método binddata al delito para iniciar la verificación del formulario, y no es necesario vincular los eventos a los métodos.
6. El método binddata('name', $event.detail.value, 'form') acepta tres valores,
El primer parámetro pasa el nombre del componente de formulario actual y vincula el valor del nombre del atributo con el componente principal actual uni-forms-item
El segundo parámetro pasa el valor que debe verificarse. El componente integrado puede obtener el valor de retorno del componente a través de $event.detail.value, y el componente personalizado puede pasar el valor que debe verificarse.
El tercer parámetro se pasa en el valor del atributo de enlace del componente de uniformes ref, que generalmente debe pasarse cuando hay varios formularios para distinguir los formularios, por ejemplo, solo se puede ignorar un uniforme en la página.
7. Si el método binddata incorporado no puede cumplir con los requisitos, simplemente reescriba este método en los métodos de la página actual. Para reescribir este método, debe llamar al setValue de uni-forms para activar la validación del formulario.
<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: '[email protected]'
},
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>Descripción de las reglas de verificación
Las reglas de validación aceptan un valor de tipo Objeto y pasan diferentes reglas para indicar cómo validar el valor de cada campo de formulario
La clave del objeto representa el nombre de campo del campo de formulario actual y el valor representa la regla de verificación específica
El siguiente es el contenido contenido en valor
| Nombre del Atributo |
tipo |
ilustrar |
| normas |
Formación |
Reglas de validación, la descripción del atributo de reglas a continuación |
| validar disparador |
Cadena |
El tiempo de validación del formulario [1.4.0] está obsoleto |
| etiqueta |
Cadena |
El nombre chino del campo del campo de formulario actual, que se usa principalmente para mostrar errMessage y se puede dejar en blanco |
rules: {
// 对name字段进行必填验证
name: {
// name 字段的校验规则
rules:[
// 校验 name 不能为空
{
required: true,
errorMessage: '请填写姓名',
},
// 对name字段进行长度验证
{
minLength: 3,
maxLength: 5,
errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
}
],
// 当前表单域的字段中文名，可不填写
label:'姓名',
validateTrigger:'submit'
}
}
Descripción del atributo de reglas
En cada regla de validación, se pueden configurar múltiples atributos, los siguientes son algunos atributos de regla comunes
| Nombre del Atributo |
tipo |
valores predeterminados |
valor opcional |
ilustrar |
| requerido |
booleano |
- |
- |
Si es necesario, la configuración de este parámetro no mostrará el asterisco requerido a la izquierda del cuadro de entrada, si es necesario, configure el componente requerido del uni-forms-item en verdadero |
| rango |
Formación |
- |
- |
Una matriz debe tener al menos un elemento, y cada elemento de la matriz es único. |
| formato |
Cadena |
- |
- |
Reglas de verificación integradas, si estas reglas no pueden cumplir con los requisitos, puede usar reglas de coincidencia regulares o personalizadas |
| patrón |
RegExp |
- |
- |
Expresión regular, consulte la descripción a continuación para conocer las precauciones. |
| máximo |
Número |
- |
- |
Compruebe el valor máximo (mayor que) |
| mínimo |
Número |
- |
- |
comprobar min (menos de) |
| longitud máxima |
Número |
- |
- |
Longitud máxima de los datos de suma de comprobación |
| mensaje de error |
Cadena |
- |
- |
Mensaje de solicitud de falla de verificación, se pueden agregar marcadores de posición de atributo y los atributos en la tabla actual se pueden usar como marcadores de posición |
| Validar Función |
Función |
- |
- |
reglas de validación personalizadas |
formato atributo valor descripción
| Nombre del Atributo |
ilustrar |
| cadena |
Debe ser de tipo cadena, el tipo predeterminado |
| número |
Debe ser del tipo número |
| booleano |
Debe ser de tipo booleano |
| formación |
Debe ser de tipo matriz |
| objeto |
Debe ser de tipo objeto |
| URL |
Debe ser del tipo url |
| correo electrónico |
Debe ser tipo de correo electrónico |
Instrucciones de función de validación para reglas de validación personalizadas
El método de función de validación devuelve cuatro parámetros función de validación: función (regla, valor, datos, devolución de llamada) {}, por supuesto, el desarrollador puede personalizar el nombre del parámetro de retorno:
regla : la regla de verificación correspondiente al campo de verificación actual en reglas
valor: el valor del campo de verificación actual
datos: un objeto de campos y valores de todos los campos de validación
devolución de llamada: la devolución de llamada cuando se completa la verificación. Generalmente, no hay necesidad de ejecutar la devolución de llamada, simplemente devuelva verdadero (pasó la verificación) o falso (falló la verificación). Si necesita mostrar un errMessage diferente, si la verificación falla , debe ejecutar la devolución de llamada ('información de error de solicitud'), si se pasa la verificación, simplemente ejecute la devolución de llamada ()
<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>
Validar función de validación asíncrona.
El método de verificación personalizado anterior es la verificación síncrona. Si se requiere la verificación asíncrona, la función de validación debe devolver una promesa. Si la verificación falla, ejecute el rechazo (nuevo error ("información del error")) para devolver el mensaje de error correspondiente. Si la verificación pasa Luego ejecute resolve() directamente. En el método de verificación asincrónica, no se requiere devolución de llamada.
<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>
Validación dinámica de formularios
Se usa principalmente en escenarios donde el mismo campo debe agregarse varias veces, como la necesidad de crear dinámicamente varios nombres de dominio para participar en la inspección.
- Defina una variable en formData para aceptar múltiples resultados del mismo campo.
dynamicFormData: { email: '', // domains 字段下会有多个结果 domains: [] } - Utilice el atributo de reglas de uni-forms-item para definir reglas de validación para un solo campo de formulario.
<uni-forms-item :label="item.label+' '+index" required :rules="[{'required': true,errorMessage: '域名项必填'}]" :key="item.id"> ... </uni-forms-item> - El nombre debe especificarse dinámicamente. Se recomienda utilizar el tipo Array para la forma dinámica, y el contenido es la cadena de llamada del valor enlazado de izquierda a derecha. ['domains',index,'value'] es equivalente a 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> - El modelo v del componente que necesita enlazar el valor también necesita especificar dinámicamente 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>ejemplo completo
<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>Momento de la validación del formulario
Si los subformularios necesitan tiempos de verificación separados, puede usar el atributo de reglas de uni-forms-item para cooperar con 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>[Esta regla ya no es efectiva después de 1.4.0] Para el tiempo de validación de formularios, solo un validar Trigger tendrá efecto al mismo tiempo, y su peso de rol es
Reglas > uni-forms-item > uni-forms
Si validar Trigger está configurado en la regla, el atributo de validar Trigger en la regla se usa primero para determinar el tiempo de validación del formulario.
Si la regla no configura validar Trigger, se prefiere el atributo de validar Trigger de uni-forms-item para determinar el momento de la validación del formulario.
Si la validación de disparo no está configurada en el componente uni-forms-item, se prefiere el atributo de validación de activación de uni-forms para determinar el tiempo de validación del formulario.
Por analogía, si no se usa el atributo validateTrigger, el valor predeterminado del atributo validateTrigger de uni-forms se usará para determinar el tiempo de validación del formulario.
API
Accesorios de formularios
Nombre del Atributo
tipo
valores predeterminados
valor opcional
ilustrar
Compatibilidad
modelo
Objeto
-
-
datos del formulario
1.4.0 nuevo
normas
Objeto
-
-
Reglas de validación de formularios
validar disparador
Cadena
entregar
enlazar/enviar/borrar
Tiempo de verificación de formulario, el desenfoque solo tiene efecto en uni-easyinput
1.4.0 Valor de desenfoque agregado
posición de la etiqueta
Cadena
izquierda
arriba a la izquierda
posición de la etiqueta
ancho de etiqueta
Cadena/Número
75
-
ancho de etiqueta, unidad px
etiqueta-alinear
Cadena
izquierda
izquierda centro derecha
método de centrado de etiquetas
err-mostrar-tipo
Cadena
subtitular
subtítulo/brindis/modal
Método de solicitud de mensaje de error de formulario
borde
booleano
FALSO
-
Ya sea para mostrar la línea reglada
valor
Objeto
-
-
Datos de formulario, compatible con vue2
Quedará obsoleto pronto, use el modelo en su lugar
valor del modelo
Objeto
-
-
Datos de formulario, compatible con vue3
Quedará obsoleto pronto, use el modelo en su lugar
Eventos de formularios
nombre del evento
ilustrar
@validar
Activado después de validar cualquier elemento del formulario, devuelve la información de validación del formulario
Métodos de formularios
nombre del método
ilustrar
Compatibilidad
establecer reglas
Reglas de formulario definidas dinámicamente
validar
El método de validación de todo el formulario devolverá una promesa
validar campo
Algunos formularios están validados
borrarValidar
Eliminar resultados de validación de formulario
entregar
El método de validación de todo el formulario devolverá una promesa
Quedará obsoleto pronto, use validar en su lugar
valor ajustado
Establezca el valor correspondiente de un nombre de elemento en el formulario, generalmente utilizado en uni-forms-item y componentes de formulario personalizados
Quedará obsoleto pronto, utilice onFieldChange para funciones relacionadas compatibles
reestablecer campos
重置表单, 需要把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 返回 null if(!err){ console.log('success',formData) return } console.log('error',err) }).then(res=>{ // res 返回 null }) // 使用 Promise // 对整个表单进行校验，返回一个 Promise this.$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>