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

快捷導(dǎo)航

uniapp表單校驗超詳細講解

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

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

uni-forms表單校驗

1、uni-forms 需要通過rules屬性傳入約定的校驗規(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ā)表單校驗，無需綁定事件到methods中

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

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

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

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

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

<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字段進行必填驗證
                name: {
                    rules: [{
                            required: true,
                            errorMessage: '請輸入姓名',
                        },
                        {
                            minLength: 3,
                            maxLength: 5,
                            errorMessage: '姓名長度在 {minLength} 到 {maxLength} 個字符',
                        }
                    ]
                },
                // 對email字段進行必填驗證
                email: {
                    rules: [{
                        format: 'email',
                        errorMessage: '請輸入正確的郵箱地址',
                    }]
                }
            }
        }
    },
    methods: {
        /**
         * 復(fù)寫 binddata 方法，如果只是為了校驗，無復(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('表單錯誤信息：', err);
            })
        }
    }
}
</script>

校驗規(guī)則說明

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

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

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

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

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

rules 屬性說明

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

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

format屬性值說明

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

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

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

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

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

data : 所有校驗字段的字段和值的對象

callback : 校驗完成時的回調(diào)，一般無需執(zhí)行callback，返回true(校驗通過)或者false(校驗失敗)即可，如果需要顯示不同的 errMessage，如果校驗不通過需要執(zhí)行 callback('提示錯誤信息')，如果校驗通過，執(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">校驗表單</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中設(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('表單錯誤信息：', err);
            })
        }
    }
}
</script>

validateFunction 異步校驗

上面的自定義校驗方式為同步校驗，如果需要異步校驗，validateFunction 需要返回一個 Promise ，校驗不通過執(zhí)行 reject(new Error('錯誤信息')) 返回對應(yīng)的錯誤信息，如果校驗通過則直接執(zhí)行 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中設(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('表單錯誤信息：', err);
            })
        }
    }
}
</script>

動態(tài)表單校驗

多用于同一個字段需要添加多次的場景，如需要動態(tài)創(chuàng)建多個域名參與檢驗。

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

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

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

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

name 需要動態(tài)指定，動態(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: '域名項必填'}]" 
    :key="item.id"
    >
    ...
</uni-forms-item>

需要綁定值的組件的 v-model 也需要動態(tài)指定 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 {
            // 數(shù)據(jù)源
            dynamicFormData: {
                email: '',
                domains: []
            },
            // 規(guī)則
            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 的校驗時機是數(shù)據(jù)發(fā)生變化， 即觸發(fā) 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后此規(guī)則已不生效】對于表單校驗時機，同時只會有一個 validateTrigger 發(fā)生作用，它的作用權(quán)重為

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

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

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

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

以此類推，如果都沒有使用 validateTrigger 屬性，則會使用 uni-forms 的 validateTrigger 屬性默認值來決定表單校驗時機

API

Forms Props

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

Forms Events

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

Forms Methods

方法稱名	說明	兼容說明
setRules	動態(tài)設(shè)置表單規(guī)則
validate	對整個表單進行校驗的方法，會返回一個 promise
validateField	部分表單進行校驗
clearValidate	移除表單的校驗結(jié)果
submit	對整個表單進行校驗的方法，會返回一個 promise	即將棄用，請使用validate代替
setValue	設(shè)置表單某一項 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 方法是對整個表單進行校驗，方法接受兩個參數(shù)

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

校驗成功后，校驗對象只保留指定了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 字段 ，此時這個字段是不參數(shù)校驗的，所以結(jié)果中不返回
            // 在 validate(['id']) 方法中，指定第一個參數(shù) ，即可返回id字段
            this.$refs.form.validate(['id'],(err,formData)=>{
                if(!err){
                    console.log('success',formData)
                }
            })
        }
    }
}
</script>

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

callback 方法會返回兩個返回值 :

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

第二個返回值校驗數(shù)據(jù)

// 使用 callback
// 如果不需要 keepItem 參數(shù) ，則可以省略
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 為表單數(shù)據(jù)
    // 其他邏輯處理 
    // ...
}).catch((err)=>{
    // 表單校驗驗失敗，err 為具體錯誤信息
    // 其他邏輯處理
    // ...
})

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

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

setValue 方法接受兩個參數(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">校驗表單</button>
        </uni-forms>
    </view>
</template>
<script>
export default {
    data() {
        return {
            formData:{
                age:''
            },
            rules: {
                // ...
            }
        }
    },
    methods: {
        setValue(name,value){
            // 設(shè)置表單某項對應(yīng)得值來觸發(fā)表單校驗
            // 接受兩個參數(shù)，第一個參數(shù)為表單域的 name ，第二個參數(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({
    //...
})
// 部分表單進行校驗，接受一個參數(shù)，類型為 String 或 Array ，只校驗傳入 name 表單域的值
this.$refs.form.validateField(['name', 'email']).then((res)=>{
    // 成功返回，res 為對應(yīng)表單數(shù)據(jù)
    // 其他邏輯處理 
    // ...
}).catch((err)=>{
    // 表單校驗驗失敗，err 為具體錯誤信息
    // 其他邏輯處理
    // ...
})
// 移除表單校驗，接受一個參數(shù)，類型為 String 或 Array ，只移除傳入 name 表單域的值，如果不傳入?yún)?shù)，則移除所有
this.$refs.form.clearValidate(['name', 'email'])

FormsItem Props

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

FormsItem Methods

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

FormsItem Slots

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

示例

<template>
    <view class="container">
        <uni-card :is-shadow="false" is-full>
            <text class="uni-h6">uni-forms 組件一般由輸入框、選擇器、單選框、多選框等控件組成，用以收集、校驗、提交數(shù)據(jù)。</text>
        </uni-card>
        <uni-section title="基本用法" type="line">
            <view class="example">
                <!-- 基礎(chǔ)用法，不包含校驗規(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="日期時間">
                        <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">
                <!-- 基礎(chǔ)表單校驗 -->
                <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="自定義校驗規(guī)則" 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="動態(tài)表單" type="line">
            <view class="example">
                <!-- 動態(tài)表單校驗 -->
                <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: ['左對齊', '頂部對齊'],
                // 校驗表單數(shù)據(jù)
                valiFormData: {
                    name: '',
                    age: '',
                    introduction: '',
                },
                // 校驗規(guī)則
                rules: {
                    name: {
                        rules: [{
                            required: true,
                            errorMessage: '姓名不能為空'
                        }]
                    },
                    age: {
                        rules: [{
                            required: true,
                            errorMessage: '年齡不能為空'
                        }, {
                            format: 'number',
                            errorMessage: '年齡只能輸入數(shù)字'
                        }]
                    }
                },
                // 自定義表單數(shù)據(jù)
                customFormData: {
                    name: '',
                    age: '',
                    hobby: []
                },
                // 自定義表單校驗規(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('請至少勾選兩個興趣愛好')
                                    }
                                    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() {
            // 設(shè)置自定義表單校驗規(guī)則，必須在節(jié)點渲染完畢后執(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: '域名項必填'
                    }],
                    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>