制服フォームの検証
1. ユニフォームは、ルール属性を通じて合意された検証ルールを渡す必要があります。
2. ユニフォームはモデル属性をバインドする必要があり、値はフォームのキー/値で構成されるオブジェクトです。
3. uni-forms-item は name 属性を現在のフィールド名に設定する必要があり、フィールドの型は String|Array です。
4. 使用されるコンポーネントが組み込みコンポーネントまたはサードパーティ コンポーネントである限り、v-model をバインドするだけでよく、他の操作は必要ありません。
5. v-model などをサポートしていないネイティブ チェックボックスやサードパーティ コンポーネントを使用する場合、フォーム検証を開始するには、binddata メソッドをクライムにバインドするだけでよく、イベントをメソッドにバインドする必要はありません。
6.binddata('name', $event.detail.value, 'form') メソッドは 3 つの値を受け入れます。
最初のパラメータは、現在のフォーム コンポーネントの名前を渡し、属性名の値を現在の親コンポーネント uni-forms-item にバインドします。
2 番目のパラメーターは、検証が必要な値を渡します。組み込みコンポーネントは $event.detail.value を通じてコンポーネントの戻り値を取得でき、カスタム コンポーネントは検証が必要な値を渡すことができます。
3 番目のパラメーターは、uni-forms コンポーネントのバインディング属性 ref の値で渡されます。これは通常、フォームを区別するために複数のフォームがある場合 (ページ内の 1 つの uni-forms のみを無視できる場合など) に渡す必要があります。
7. 組み込みのバインドデータ メソッドが要件を満たさない場合は、現在のページのメソッドでこのメソッドを書き換えてください。このメソッドを書き換えるには、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: '[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>検証ルールの説明
検証ルールは Object 型の値を受け入れ、各フォーム フィールドの値を検証する方法を示す別のルールを渡します。
オブジェクトのキーは現在のフォームフィールドのフィールド名を表し、値は特定の検証ルールを表します。
valueに含まれる内容は以下の通りです
| 属性名 |
タイプ |
説明する |
| ルール |
配列 |
検証ルール、以下のルール属性の説明 |
| トリガーを検証する |
弦 |
フォーム検証タイミング [1.4.0] は廃止されました |
| ラベル |
弦 |
現在のフォームフィールドのフィールドの中国語名。主に errMessage を表示するために使用され、空白のままにすることができます。 |
rules: {
// 对name字段进行必填验证
name: {
// name 字段的校验规则
rules:[
// 校验 name 不能为空
{
required: true,
errorMessage: '请填写姓名',
},
// 对name字段进行长度验证
{
minLength: 3,
maxLength: 5,
errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
}
],
// 当前表单域的字段中文名，可不填写
label:'姓名',
validateTrigger:'submit'
}
}
ルール属性の説明
各検証ルールでは、複数の属性を構成できます。一般的なルール属性の一部を次に示します。
| 属性名 |
タイプ |
デフォルト |
オプションの値 |
説明する |
| 必要 |
ブール値 |
- |
- |
必須かどうかに関係なく、このパラメータを設定しても入力ボックスの左側に必須のアスタリスクは表示されません。必要に応じて、uni-forms-item コンポーネントの required を true に設定してください。 |
| 範囲 |
配列 |
- |
- |
配列には少なくとも 1 つの要素が必要で、配列内の各要素は一意です。 |
| フォーマット |
弦 |
- |
- |
組み込みの検証ルール。これらのルールが要件を満たさない場合は、通常の一致ルールまたはカスタム ルールを使用できます。 |
| パターン |
正規表現 |
- |
- |
正規表現に関する注意事項については、以下の説明を参照してください。 |
| 最大 |
番号 |
- |
- |
最大値（より大きい）を確認してください |
| 最小 |
番号 |
- |
- |
最小値 (未満) を確認してください |
| 最大長さ |
番号 |
- |
- |
チェックサムデータの最大長 |
| エラーメッセージ |
弦 |
- |
- |
検証失敗のプロンプト メッセージ。属性プレースホルダーを追加でき、現在のテーブルの属性をプレースホルダーとして使用できます。 |
| 検証関数 |
関数 |
- |
- |
カスタム検証ルール |
フォーマット属性値の説明
| 属性名 |
説明する |
| 弦 |
デフォルトの型である文字列型である必要があります |
| 番号 |
タイプ番号である必要があります |
| ブール値 |
ブール型である必要があります |
| 配列 |
配列型である必要があります |
| 物体 |
オブジェクト型である必要があります |
| URL |
URL タイプである必要があります |
| Eメール |
電子メールタイプである必要があります |
validateFunction カスタム検証ルールの手順
validateFunction メソッドは 4 つのパラメーター validateFunction:function(rule,value,data,callback){} を返します。もちろん、戻りパラメーター名は開発者がカスタマイズできます。
rules : ルール内の現在の検証フィールドに対応する検証ルール
value : 現在のチェックフィールドの値
data : すべての検証フィールドのフィールドと値のオブジェクト
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('エラー情報')) を実行して、対応するエラー メッセージを返します。検証に合格した場合は、非同期検証方式の場合、コールバックは必要ありません。
<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> - 名前は動的に指定する必要があります。動的フォームには 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 以降は無効です] フォーム検証のタイミングでは、同時に 1 つの validateTrigger のみが有効になり、その役割の重みは次のようになります。
ルール > 制服アイテム > 制服
validateTrigger がルールで構成されている場合、ルールの validateTrigger 属性が最初に使用されてフォーム検証のタイミングが決定されます。
validateTrigger がルールで構成されていない場合は、フォーム検証のタイミングを決定するために uni-forms-item の validateTrigger 属性が優先されます。
validateTrigger が uni-forms-item コンポーネントで構成されていない場合、フォーム検証のタイミングを決定するには uni-forms の validateTrigger 属性が優先されます。
同様に、 validateTrigger 属性が使用されない場合、uni-forms の validateTrigger 属性のデフォルト値がフォーム検証のタイミングを決定するために使用されます。
API
フォームの小道具
属性名
タイプ
デフォルト
オプションの値
説明する
互換性
モデル
物体
-
-
フォームデータ
1.4.0新規
ルール
物体
-
-
フォーム検証ルール
トリガーを検証する
弦
送信
バインド/送信/ぼかし
フォーム検証タイミング、ブラーは uni-easyinput でのみ有効です
1.4.0 ぼかし値を追加
ラベル位置
弦
左
左上
ラベルの位置
ラベル幅
文字列/数値
75
-
ラベルの幅、単位ピクセル
ラベル整列
弦
左
左/中央/右
ラベルのセンタリング方法
エラー表示タイプ
弦
字幕
サブタイトル/トースト/モーダル
フォームエラーメッセージプロンプトメソッド
国境
ブール値
間違い
-
罫線を表示するかどうか
価値
物体
-
-
フォームデータ、vue2と互換性あり
まもなく廃止される予定です。代わりにモデルを使用してください
モデル値
物体
-
-
フォームデータ、vue3と互換性あり
まもなく廃止される予定です。代わりにモデルを使用してください
フォームイベント
イベント名
説明する
@検証
フォーム項目が検証された後にトリガーされ、フォーム検証情報を返します。
フォームメソッド
メソッド名
説明する
互換性
setRules
動的に設定されるフォームルール
検証
フォーム全体を検証するメソッドは Promise を返します
検証フィールド
一部のフォームは検証されています
クリア検証
フォーム検証結果を削除する
送信
フォーム全体を検証するメソッドは Promise を返します
まもなく廃止される予定です。代わりに validate を使用してください
セット値
フォーム内の項目名の対応する値を設定します。通常は、uni-forms-item およびカスタム フォーム コンポーネントで使用されます。
これは間もなく廃止される予定です。互換性のある関連関数については onFieldChange を使用してください。
リセットフィールド
重置表单, 需要把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>