腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

uniapp表單校驗(yàn)超詳細(xì)講解

更新時(shí)間：2023年10月09日 08:54:35 作者：千里及

這篇文章主要給大家介紹了關(guān)于uniapp表單校驗(yàn)的相關(guān)資料,Uni-app內(nèi)置了一些表單驗(yàn)證方法,可以幫助我們對表單進(jìn)行有效的驗(yàn)證,需要的朋友可以參考下

uni-forms表單校驗(yàn)

1、uni-forms 需要通過rules屬性傳入約定的校驗(yàn)規(guī)則。

2、uni-forms 需要綁定model屬性，值為表單的key/value組成的對象

3、uni-forms-item 需要設(shè)置name 屬性為當(dāng)前字段名，字段為String|Array類型

4、只要使用的組件不管內(nèi)置組件還是三方組件，只需綁定v-model，無需其他操作

5、如果使用原生checkbox或三方組件不支持v-model等，只需要給罪案綁定binddata方法即可出發(fā)表單校驗(yàn)，無需綁定事件到methods中

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

第一個(gè)參數(shù)傳入當(dāng)前表單組件所在的name，同當(dāng)前父組件uni-forms-item 綁定屬性name的值

第二個(gè)參數(shù)傳入需要校驗(yàn)的值，內(nèi)置組件可以通過$event.detail.value 獲取到組件的返回值，自定義組件傳入需要校驗(yàn)的值即可

第三個(gè)參數(shù)傳入uni-forms組件綁定屬性ref的值，通常在多表單的時(shí)候需要傳入，用來區(qū)分表單，如頁面中僅有一個(gè)uni-forms可忽略

7、如果內(nèi)置binddata方法無法滿足需求，在當(dāng)前頁面的methods中復(fù)寫此方法即可，復(fù)寫此方法需要調(diào)用uni-forms的setValue來觸發(fā)表單校驗(yàn)

<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 {
            // 表單數(shù)據(jù)
            formData: {
                name: 'LiMing',
                email: 'dcloud@email.com'
            },
            rules: {
                // 對name字段進(jìn)行必填驗(yàn)證
                name: {
                    rules: [{
                            required: true,
                            errorMessage: '請輸入姓名',
                        },
                        {
                            minLength: 3,
                            maxLength: 5,
                            errorMessage: '姓名長度在 {minLength} 到 {maxLength} 個(gè)字符',
                        }
                    ]
                },
                // 對email字段進(jìn)行必填驗(yàn)證
                email: {
                    rules: [{
                        format: 'email',
                        errorMessage: '請輸入正確的郵箱地址',
                    }]
                }
            }
        }
    },
    methods: {
        /**
         * 復(fù)寫 binddata 方法，如果只是為了校驗(yàn)，無復(fù)雜自定義操作，可忽略此方法
         * @param {String} name 字段名稱
         * @param {String} value 表單域的值
         */
        // binddata(name,value){
        // 通過 input 事件設(shè)置表單指定 name 的值
        //   this.$refs.form.setValue(name, value)
        // },
        // 觸發(fā)提交表單
        submit() {
            this.$refs.form.validate().then(res=>{
                console.log('表單數(shù)據(jù)信息：', res);
            }).catch(err =>{
                console.log('表單錯(cuò)誤信息：', err);
            })
        }
    }
}
</script>

校驗(yàn)規(guī)則說明

校驗(yàn)規(guī)則接受一個(gè)Object類型的值，通過傳入不同的規(guī)則來表示每個(gè)表單域的值該如何校驗(yàn)

對象的key表示當(dāng)前表單域的字段名，value為具體的校驗(yàn)規(guī)則

以下為value所包含的內(nèi)容

屬性名	類型	說明
rules	Array	校驗(yàn)規(guī)則，下方rules屬性說明
validateTrigger	String	表單校驗(yàn)時(shí)機(jī)【1.4.0】已廢棄
label	String	當(dāng)前表單域的字段中文名，多用于errMessage的顯示，可以不填

rules: {
    // 對name字段進(jìn)行必填驗(yàn)證
    name: {
        // name 字段的校驗(yàn)規(guī)則
        rules:[
            // 校驗(yàn) name 不能為空
            {
                required: true,
                errorMessage: '請?zhí)顚懶彰?,
            },
            // 對name字段進(jìn)行長度驗(yàn)證
            {
                minLength: 3,
                maxLength: 5,
                errorMessage: '{label}長度在 {minLength} 到 {maxLength} 個(gè)字符',
            }
        ],
        // 當(dāng)前表單域的字段中文名，可不填寫
        label:'姓名',
        validateTrigger:'submit'
    }
}

rules 屬性說明

每一個(gè)驗(yàn)證規(guī)則中，可以配置多個(gè)屬性，下面是一些常見規(guī)則屬性

屬性名	類型	默認(rèn)值	可選值	說明
required	Boolean	-	-	是否必填，配置此參數(shù)不會(huì)顯示輸入框左邊的必填星號，如需要，請配置uni-forms-item組件的的required為true
range	Array	-	-	數(shù)組至少要有一個(gè)元素，且數(shù)組內(nèi)的每一個(gè)元素都是唯一的。
format	String	-	-	內(nèi)置校驗(yàn)規(guī)則，如這些規(guī)則無法滿足需求，可以使用正則匹配或者自定義規(guī)則
pattern	RegExp	-	-	正則表達(dá)式，注意事項(xiàng)見下方說明
maximum	Number	-	-	校驗(yàn)最大值(大于)
minimum	Number	-	-	校驗(yàn)最小值(小于)
maxLength	Number	-	-	校驗(yàn)數(shù)據(jù)最大長度
errorMessage	String	-	-	校驗(yàn)失敗提示信息語，可添加屬性占位符，當(dāng)前表格內(nèi)屬性都可用作占位符
validateFunction	Function	-	-	自定義校驗(yàn)規(guī)則

format屬性值說明

屬性名	說明
string	必須是 string 類型，默認(rèn)類型
number	必須是 number 類型
boolean	必須是 boolean 類型
array	必須是 array 類型
object	必須是 object 類型
url	必須是 url 類型
email	必須是 email 類型

validateFunction 自定義校驗(yàn)規(guī)則使用說明

validateFunction 方法返回四個(gè)參數(shù) validateFunction:function(rule,value,data,callback){} ，當(dāng)然返回參數(shù)名開發(fā)者可以自定義：

rule : 當(dāng)前校驗(yàn)字段在 rules 中所對應(yīng)的校驗(yàn)規(guī)則

value : 當(dāng)前校驗(yàn)字段的值

data : 所有校驗(yàn)字段的字段和值的對象

callback : 校驗(yàn)完成時(shí)的回調(diào)，一般無需執(zhí)行callback，返回true(校驗(yàn)通過)或者false(校驗(yàn)失敗)即可，如果需要顯示不同的 errMessage，如果校驗(yàn)不通過需要執(zhí)行 callback('提示錯(cuò)誤信息')，如果校驗(yàn)通過，執(zhí)行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">校驗(yàn)表單</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('請至少勾選兩個(gè)興趣愛好')
                            }
                            return true
                        }
                    }]
                }
            }
        }
    },
    onReady() {
        // 需要在onReady中設(shè)置規(guī)則
        this.$refs.form.setRules(this.rules)
    },
    methods: {
        submit(form) {
            this.$refs.form.validate().then(res=>{
                console.log('表單數(shù)據(jù)信息：', res);
            }).catch(err =>{
                console.log('表單錯(cuò)誤信息：', err);
            })
        }
    }
}
</script>

validateFunction 異步校驗(yàn)

上面的自定義校驗(yàn)方式為同步校驗(yàn) ，如果需要異步校驗(yàn)，validateFunction 需要返回一個(gè) Promise ，校驗(yàn)不通過執(zhí)行 reject(new Error('錯(cuò)誤信息')) 返回對應(yīng)的錯(cuò)誤信息，如果校驗(yàn)通過則直接執(zhí)行 resolve() 即可，在異步校驗(yàn)方法中，不需要使用 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">校驗(yàn)表單</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('錯(cuò)誤信息'))
                                        reject(new Error('年齡必須大于十歲'))
                                    }
                                }, 2000)
                            })
                        }
                    }]
                }
            }
        }
    },
    onReady() {
        // 需要在onReady中設(shè)置規(guī)則
        this.$refs.form.setRules(this.rules)
    },
    methods: {
        /**
         * 表單提交
         * @param {Object} event
         */
        submit() {
            uni.showLoading()
            this.$refs.form.validate().then(res => {
                uni.hideLoading()
                console.log('表單數(shù)據(jù)信息：', res);
            }).catch(err => {
                uni.hideLoading()
                console.log('表單錯(cuò)誤信息：', err);
            })
        }
    }
}
</script>

動(dòng)態(tài)表單校驗(yàn)

多用于同一個(gè)字段需要添加多次的場景，如需要?jiǎng)討B(tài)創(chuàng)建多個(gè)域名參與檢驗(yàn)。

在 formData 中定義個(gè)變量用來接受同一個(gè)字段的多個(gè)結(jié)果。

dynamicFormData: {
    email: '',
    // domains 字段下會(huì)有多個(gè)結(jié)果
    domains: []
}

使用 uni-forms-item 的 rules 屬性定義單個(gè)表單域的校驗(yàn)規(guī)則。

<uni-forms-item :label="item.label+' '+index" required
    :rules="[{'required': true,errorMessage: '域名項(xiàng)必填'}]" :key="item.id">
    ...
</uni-forms-item>

name 需要?jiǎng)討B(tài)指定，動(dòng)態(tài)表單推薦使用 Array 類型，內(nèi)容從左到右為綁定值的調(diào)用鏈。['domains',index,'value'] 等同于 dynamicFormData.domains[index].value
```
<uni-forms-item 
    required
    :label="item.label+' '+index" 
    :name="['domains',index,'value']"
    :rules="[{'required': true,errorMessage: '域名項(xiàng)必填'}]" 
    :key="item.id"
    >
    ...
</uni-forms-item>
```

需要綁定值的組件的 v-model 也需要?jiǎng)討B(tài)指定 dynamicFormData.domains[index].value

<uni-forms-item 
    required
    :label="item.label+' '+index" 
    :name="['domains',index,'value']"
    :rules="[{'required': true,errorMessage: '域名項(xiàng)必填'}]" 
    :key="item.id"
    >
    <uni-easyinput v-model="dynamicFormData.domains[index].value" placeholder="請輸入域名" />
</uni-forms-item>

完整實(shí)例

<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: '域名項(xiàng)必填'}]" :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 {
            // 數(shù)據(jù)源
            dynamicFormData: {
                email: '',
                domains: []
            },
            // 規(guī)則
            dynamicRules: {
                email: {
                    rules: [{
                        required: true,
                        errorMessage: '域名不能為空'
                    }, {
                        format: 'email',
                        errorMessage: '域名格式錯(cuò)誤'
                    }]
                }
            }
        }
    },
    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>

表單校驗(yàn)時(shí)機(jī)說明

如果需要子表單需要單獨(dú)的校驗(yàn)時(shí)機(jī)，可以使用 uni-forms-item 的 rules 屬性和 onFieldChange 配合

<template>
    <view>
        <uni-forms  ref="form" :modelValue="formData" validate-trigger="bind">
            <uni-forms-item name="age" label="年齡">
                <!-- uni-easyinput 的校驗(yàn)時(shí)機(jī)是數(shù)據(jù)發(fā)生變化， 即觸發(fā) input 時(shí) -->
                <uni-easyinput v-model="formData.age" type="text" placeholder="請輸入年齡" />
            </uni-forms-item>
            <uni-forms-item ref="input"  name="email" label="郵箱">
             <!-- input 的校驗(yàn)時(shí)機(jī) -->
                <input v-model="formData.email"  @blur="(e)=>$refs.input.onFieldChange($event.detail.value)" />
            </uni-forms-item>
            <button class="button" @click="submit">校驗(yàn)表單</button>
        </uni-forms>
    </view>
</template>

【1.4.0后此規(guī)則已不生效】對于表單校驗(yàn)時(shí)機(jī)，同時(shí)只會(huì)有一個(gè) validateTrigger 發(fā)生作用，它的作用權(quán)重為

規(guī)則 > uni-forms-item > uni-forms

如果規(guī)則里配置 validateTrigger ，則優(yōu)先使用規(guī)則里的 validateTrigger 屬性來決定表單校驗(yàn)時(shí)機(jī)

如果規(guī)則里沒有配置 validateTrigger ，則優(yōu)先使用 uni-forms-item 的 validateTrigger 屬性來決定表單校驗(yàn)時(shí)機(jī)

如果 uni-forms-item 組件里沒有配置 validateTrigger ，則優(yōu)先使用 uni-forms 的 validateTrigger 屬性來決定表單校驗(yàn)時(shí)機(jī)

以此類推，如果都沒有使用 validateTrigger 屬性，則會(huì)使用 uni-forms 的 validateTrigger 屬性默認(rèn)值來決定表單校驗(yàn)時(shí)機(jī)

API

Forms Props

屬性名	類型	默認(rèn)值	可選值	說明	兼容說明
model	Object	-	-	表單數(shù)據(jù)	1.4.0 新增
rules	Object	-	-	表單校驗(yàn)規(guī)則
validateTrigger	String	submit	bind/submit/blur	表單校驗(yàn)時(shí)機(jī),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	label 居中方式
err-show-type	String	undertext	undertext/toast/modal	表單錯(cuò)誤信息提示方式
border	Boolean	false	-	是否顯示分格線
value	Object	-	-	表單數(shù)據(jù)，兼容vue2	即將棄用，請使用 model 代替
modelValue	Object	-	-	表單數(shù)據(jù)，兼容vue3	即將棄用，請使用 model 代替

Forms Events

事件稱名	說明
@validate	任意表單項(xiàng)被校驗(yàn)后觸發(fā)，返回表單校驗(yàn)信息

Forms Methods

方法稱名	說明	兼容說明
setRules	動(dòng)態(tài)設(shè)置表單規(guī)則
validate	對整個(gè)表單進(jìn)行校驗(yàn)的方法，會(huì)返回一個(gè) promise
validateField	部分表單進(jìn)行校驗(yàn)
clearValidate	移除表單的校驗(yàn)結(jié)果
submit	對整個(gè)表單進(jìn)行校驗(yàn)的方法，會(huì)返回一個(gè) promise	即將棄用，請使用validate代替
setValue	設(shè)置表單某一項(xiàng) name 的對應(yīng)值，通常在 uni-forms-item 和自定表單組件中使用	即將棄用，請使用 onFieldChange 兼容相關(guān)功能
resetFields	重置表單, 需要把uni-forms的modelValue屬性改為v-model,且對內(nèi)置組件可能不生效	1.4.0 已棄用

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

validate 方法是對整個(gè)表單進(jìn)行校驗(yàn)，方法接受兩個(gè)參數(shù)

參數(shù)稱名	類型	說明
keepItem	Array	保留不參與校驗(yàn)的字段
callback	Function	校驗(yàn)完成返回函數(shù)

校驗(yàn)成功后，校驗(yàn)對象只保留指定了name的字段（只要 uni-forms-item 綁定了 name，哪怕不校驗(yàn)，也會(huì)返回），如果需要保留其他字段，則需要 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">校驗(yàn)表單</button>
        </uni-forms>
    </view>
</template>
<script>
export default {
    data() {
        return {
            formData:{
                age:''
            },
            rules: {
                // ...
            }
        }
    },
    onLoad(){
        this.formData.id = 'testId'
    },
    methods: {
        submit() {
            // 在 onLoad 生命周期中，formData添加了一個(gè) id 字段 ，此時(shí)這個(gè)字段是不參數(shù)校驗(yàn)的，所以結(jié)果中不返回
            // 在 validate(['id']) 方法中，指定第一個(gè)參數(shù) ，即可返回id字段
            this.$refs.form.validate(['id'],(err,formData)=>{
                if(!err){
                    console.log('success',formData)
                }
            })
        }
    }
}
</script>

validate 方法還可以返回一個(gè) Promise 對象，如果使用了 callback 則Promise 返回 null，validate 方法會(huì)優(yōu)先使用 callback。

callback 方法會(huì)返回兩個(gè)返回值 :

第一個(gè)返回值為檢驗(yàn)結(jié)果，如果校驗(yàn)失敗，則返回失敗信息，如果成功，返回 null

第二個(gè)返回值校驗(yàn)數(shù)據(jù)

// 使用 callback
// 如果不需要 keepItem 參數(shù) ，則可以省略
this.$refs.form.validate((err,formData)=>{
    // 如果校驗(yàn)成功 ，err 返回 null
    if(!err){
        console.log('success',formData)
        return
    }
    console.log('error',err)
}).then(res=>{
    // res 返回 null
})
// 使用 Promise
// 對整個(gè)表單進(jìn)行校驗(yàn)，返回一個(gè) Promise
this.$refs.form.validate().then((res)=>{
    // 成功返回，res 為表單數(shù)據(jù)
    // 其他邏輯處理 
    // ...
}).catch((err)=>{
    // 表單校驗(yàn)驗(yàn)失敗，err 為具體錯(cuò)誤信息
    // 其他邏輯處理
    // ...
})

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

setValue 方法通常用于內(nèi)置組件或三方組件返回值的校驗(yàn)，因?yàn)閡ni-esayinput 等 uni 開頭的組件內(nèi)置了對 uni-forms的支持，所以這些組件返回的值可以直接使用，但是比如像input 這些內(nèi)置組件值的變化，無法及時(shí)通知 uni-forms ，從而無法正常的校驗(yàn)，這時(shí)就需要我們手動(dòng)將這些值加入到uni-forms的校驗(yàn)。

setValue 方法接受兩個(gè)參數(shù)：

name: 表單域?qū)?yīng)的name

value: 表單域?qū)?yīng)的值

<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">校驗(yàn)表單</button>
        </uni-forms>
    </view>
</template>
<script>
export default {
    data() {
        return {
            formData:{
                age:''
            },
            rules: {
                // ...
            }
        }
    },
    methods: {
        setValue(name,value){
            // 設(shè)置表單某項(xiàng)對應(yīng)得值來觸發(fā)表單校驗(yàn)
            // 接受兩個(gè)參數(shù)，第一個(gè)參數(shù)為表單域的 name ，第二個(gè)參數(shù)為表單域的值
            this.$refs.form.setValue(name,value)
        },
        submit() {
            this.$refs.form.validate(['id'],(err,formData)=>{
                if(!err){
                    console.log('success',formData)
                }
            })
        }
    }
}
</script>

其他方法說明

// 設(shè)置規(guī)則
this.$refs.form.setRules({
    //...
})
// 部分表單進(jìn)行校驗(yàn)，接受一個(gè)參數(shù)，類型為 String 或 Array ，只校驗(yàn)傳入 name 表單域的值
this.$refs.form.validateField(['name', 'email']).then((res)=>{
    // 成功返回，res 為對應(yīng)表單數(shù)據(jù)
    // 其他邏輯處理 
    // ...
}).catch((err)=>{
    // 表單校驗(yàn)驗(yàn)失敗，err 為具體錯(cuò)誤信息
    // 其他邏輯處理
    // ...
})
// 移除表單校驗(yàn)，接受一個(gè)參數(shù)，類型為 String 或 Array ，只移除傳入 name 表單域的值，如果不傳入?yún)?shù)，則移除所有
this.$refs.form.clearValidate(['name', 'email'])

FormsItem Props

屬性名	類型	默認(rèn)值	可選值	說明	兼容說明
name	String/Array	-	-	表單域的屬性名，在使用校驗(yàn)規(guī)則時(shí)必填
rules	Object	-	-	表單校驗(yàn)規(guī)則
required	Boolean	false	-	label 右邊顯示紅色"*"號，樣式顯示不會(huì)對校驗(yàn)規(guī)則產(chǎn)生效果
label	String	-	-	輸入框左邊的文字提示
label-width	Number	70	-	label的寬度，單位px
error-message	String	-	-	顯示的錯(cuò)誤提示內(nèi)容，如果為空字符串或者false，則不顯示錯(cuò)誤信息
label-align	String	left	left/center/right	label的文字對齊方式
label-position	String	left	top/left	label的文字的位置	1.4.0已棄用，統(tǒng)一使用 uni-forms 的對齊方式
validateTrigger	String	submit	bind/submit	表單校驗(yàn)時(shí)機(jī)	1.4.0已棄用，統(tǒng)一使用 uni-forms 的校驗(yàn)時(shí)機(jī)
left-icon	String	-	-	label左邊的圖標(biāo)，限uni-ui的圖標(biāo)名稱	1.4.0已棄用，請使用 #label 插槽實(shí)現(xiàn)相關(guān)功能
icon-color	String	#606266	-	左邊通過icon配置的圖標(biāo)的顏色	1.4.0已棄用，請使用 #label 插槽實(shí)現(xiàn)相關(guān)功

FormsItem Methods

方法稱名	說明	兼容說明
setRules	動(dòng)態(tài)設(shè)置表單規(guī)則
onFieldChange	校驗(yàn)子表單	1.4.0新增

FormsItem Slots

插槽名	說明
default	默認(rèn)插槽
label	label插槽，自定義label顯示內(nèi)容

示例

<template>
    <view class="container">
        <uni-card :is-shadow="false" is-full>
            <text class="uni-h6">uni-forms 組件一般由輸入框、選擇器、單選框、多選框等控件組成，用以收集、校驗(yàn)、提交數(shù)據(jù)。</text>
        </uni-card>
        <uni-section title="基本用法" type="line">
            <view class="example">
                <!-- 基礎(chǔ)用法，不包含校驗(yàn)規(guī)則 -->
                <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="日期時(shí)間">
                        <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="表單校驗(yàn)" type="line">
            <view class="example">
                <!-- 基礎(chǔ)表單校驗(yàn) -->
                <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="自定義校驗(yàn)規(guī)則" type="line">
            <view class="example">
                <!-- 自定義表單校驗(yàn) -->
                <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="動(dòng)態(tài)表單" type="line">
            <view class="example">
                <!-- 動(dòng)態(tài)表單校驗(yàn) -->
                <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 {
                // 基礎(chǔ)表單數(shù)據(jù)
                baseFormData: {
                    name: '',
                    age: '',
                    introduction: '',
                    sex: 2,
                    hobby: [5],
                    datetimesingle: 1627529992399
                },
                // 表單數(shù)據(jù)
                alignmentFormData: {
                    name: '',
                    age: '',
                },
                // 單選數(shù)據(jù)源
                sexs: [{
                    text: '男',
                    value: 0
                }, {
                    text: '女',
                    value: 1
                }, {
                    text: '保密',
                    value: 2
                }],
                // 多選數(shù)據(jù)源
                hobbys: [{
                    text: '跑步',
                    value: 0
                }, {
                    text: '游泳',
                    value: 1
                }, {
                    text: '繪畫',
                    value: 2
                }, {
                    text: '足球',
                    value: 3
                }, {
                    text: '籃球',
                    value: 4
                }, {
                    text: '其他',
                    value: 5
                }],
                // 分段器數(shù)據(jù)
                current: 0,
                items: ['左對齊', '頂部對齊'],
                // 校驗(yàn)表單數(shù)據(jù)
                valiFormData: {
                    name: '',
                    age: '',
                    introduction: '',
                },
                // 校驗(yàn)規(guī)則
                rules: {
                    name: {
                        rules: [{
                            required: true,
                            errorMessage: '姓名不能為空'
                        }]
                    },
                    age: {
                        rules: [{
                            required: true,
                            errorMessage: '年齡不能為空'
                        }, {
                            format: 'number',
                            errorMessage: '年齡只能輸入數(shù)字'
                        }]
                    }
                },
                // 自定義表單數(shù)據(jù)
                customFormData: {
                    name: '',
                    age: '',
                    hobby: []
                },
                // 自定義表單校驗(yàn)規(guī)則
                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('請至少勾選兩個(gè)興趣愛好')
                                    }
                                    return true
                                }
                            }
                        ]
                    }
                },
                dynamicFormData: {
                    email: '',
                    domains: {}
                },
                dynamicLists: [],
                dynamicRules: {
                    email: {
                        rules: [{
                            required: true,
                            errorMessage: '域名不能為空'
                        }, {
                            format: 'email',
                            errorMessage: '域名格式錯(cuò)誤'
                        }]
                    }
                }
            }
        },
        computed: {
            // 處理表單排列切換
            alignment() {
                if (this.current === 0) return 'left'
                if (this.current === 1) return 'top'
                return 'left'
            }
        },
        onLoad() {},
        onReady() {
            // 設(shè)置自定義表單校驗(yàn)規(guī)則，必須在節(jié)點(diǎn)渲染完畢后執(zhí)行
            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: '域名項(xiàng)必填'
                    }],
                    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: `校驗(yàn)通過`
                    })
                }).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>