element-ui 官網(wǎng)

element-ui 表單校驗(yàn)的規(guī)則如下：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-717939.html

<屬性名>: [
	{ 
		required: true,// 是否必填（若有l(wèi)abel則在其左上角顯示紅點(diǎn)，否則不顯示必填標(biāo)志），可選。
		type: 'date',// 限制輸入的數(shù)據(jù)類型，可選。
		min: 3,// 當(dāng)輸入的是數(shù)值時(shí)，限制輸入的最小值，可選。
		max: 5,// 當(dāng)輸入的是數(shù)值時(shí)，限制輸入的最大值，可選。
		pattern: /^\d+\.\d+\.\d+$/,// 正則表達(dá)式，可選。
		message: "請(qǐng)使用 x.x.x 格式編號(hào)",// 錯(cuò)誤時(shí)提示信息，必須。
		trigger: ['change', 'blur']// 觸發(fā)校驗(yàn)的事件，必須。監(jiān)聽單一事件用字符串，監(jiān)聽多個(gè)事件用數(shù)組
	},
	// ...
]

1、對(duì)全部表單項(xiàng)的校驗(yàn)

<template>
<form ref="formRef" :model="form" :rules="rules" hide-required-asterisk class="base-form" :label-width="120">
	<el-form-item label="編碼：" prop="code">
		<el-input v-model="form.code" placeholder="請(qǐng)輸入編碼" clearable/>
	</el-form-item>
	<el-form-item label="地址" prop="address">
		<el-select v-model="form.address" placeholder="請(qǐng)選擇一個(gè)城市" clearable>
			<el-option label="上海" value="shanghai" />
			<el-option label="北京" value="beijing" />
		</el-select>
    </el-form-item>
	<el-form-item label="月份：" prop="moth">
		<el-input v-model="form.moth" placeholder="請(qǐng)輸入月份" clearable/>
	</el-form-item>
	<el-form-item label="日期" prop="date">
		<el-date-picker v-model="form.date" type="date" placeholder="請(qǐng)選擇日期" clearable/>
	</el-form-item>
	<el-form-item label="成員：" prop="members">
		<el-checkbox-group v-model="form.members">
        	<el-checkbox label="一號(hào)" name="members" />
        	<el-checkbox label="二號(hào)" name="members" />
        	<el-checkbox label="三號(hào)" name="members" />
		</el-checkbox-group>
    </el-form-item>
	<el-form-item label="手機(jī)號(hào)：" prop="phone">
		<el-input v-model="form.phone" placeholder="請(qǐng)輸入手機(jī)號(hào)" clearable/>
	</el-form-item>
	<el-form-item>
		<el-button @click="submit(formRef)">保存</el-button>
    </el-form-item>
</form>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const formRef = ref(null)

interface RuleForm {
    code: string
   	address: string
    moth: string | number
	date: Date | string
	members: string[]
	phone: string
}

const form = reactive<RuleForm>({
	code: '',
	address: '',
    moth: '',
	date: '',
	members: []
	phone: '',
})

// 表單校驗(yàn)
const rules = reactive<FormRules<RuleForm>>({
	// 失焦觸發(fā)校驗(yàn)
	code: [{ required: true, message: '請(qǐng)輸入編碼', trigger: 'blur' }],
	// 值改變時(shí)觸發(fā)校驗(yàn)
	address: [{ required: true, message: '請(qǐng)選擇一個(gè)城市', trigger: 'change' }],
	// 包含最大值和最小值
	moth: [
		{ required: true, message: '請(qǐng)輸入月', trigger: 'blur' },
		{ min: 1, max: 12, message: '請(qǐng)輸入1~12月中的一個(gè)', trigger: 'blur' },
	],
	// 帶類型的校驗(yàn) - 類型為日期
	date: [{ type: 'date', required: true, message: '請(qǐng)輸入日期', trigger: 'change' }],
	// 帶類型的校驗(yàn) - 類型為數(shù)組
	members: [{ type: 'array', required: true, message: '請(qǐng)選擇成員', trigger: 'change' }],
	// 帶正則表達(dá)式的校驗(yàn)
    phone: [
    	{ required: true, message: '請(qǐng)輸入手機(jī)號(hào)', trigger: 'blur' },
    	{ pattern: /^(13[0-9]|15[0-9]|17[0-9]|18[0-9]|19[0-9])[0-9]{8}$/, message: '請(qǐng)輸入正確的手機(jī)號(hào)', trigger: 'blur' },
    ],
})

// 提交 - 對(duì)整個(gè)表單進(jìn)行校驗(yàn)
const submit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log('submit!')
		} else {
			console.log('error submit!', fields)
		}
	})
}
</script>

2、校驗(yàn)指定字段

<template>
<form ref="formRef" class="base-form" :model="form" :label-width="120" :rules="rules" hide-required-asterisk>
	<el-form-item label="編碼：" prop="code">
		<el-input v-model="form.code" autocomplete="off" clearable @input="validateSelect" @keyup.enter="validateSelect"/>
	</el-form-item>
</form>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const formRef = ref(null)

interface RuleForm {
    code: string
}

const form = ref<RuleForm>({
    code: '',
})

// 表單校驗(yàn)
const rules = reactive<FormRules<RuleForm>>({
    code: [{ required: true, message: '請(qǐng)?zhí)顚懢幋a', trigger: 'blur' }],,
})

// 校驗(yàn)指定字段
const validateSelect = () => {
	formRef.value!.validateField('selectValue')
}
</script>

3、自定義函數(shù)校驗(yàn)表單

<template>
<form ref="formRef" class="base-form" :model="form" :label-width="120" :rules="rules" hide-required-asterisk>
	<el-form-item label="手機(jī)號(hào)：" prop="phoneNumber">
		<el-input v-model="form.phoneNumber" autocomplete="off" clearable/>
	</el-form-item>
</form>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const formRef = ref(null)

interface RuleForm {
    phoneNumber: string
}

const form = ref<RuleForm>({
    phoneNumber: '',
})

// 自定義校驗(yàn) - 手機(jī)號(hào)
const checkPhoneNumber = (rule: any, value: any, callback: any) => {
	const pattern = /^(13[0-9]|15[0-9]|17[0-9]|18[0-9]|19[0-9])[0-9]{8}$/
	if(!value) {
		callback(new Error('請(qǐng)輸入手機(jī)號(hào)'))
	} else if(!pattern.test(val)) {
		callback(new Error('請(qǐng)輸入正確的手機(jī)號(hào)'))
	} else {
		callback()
	}
}

// 表單校驗(yàn)
const rules = reactive<FormRules<RuleForm>>({
    phoneNumber: [{ validator: checkPhoneNumber, trigger: 'blur' }],,
})
</script>

4、一行內(nèi)多個(gè)輸入框的校驗(yàn)

<template>
<form ref="formRef" class="base-form" :model="form" :label-width="120" :rules="rules" hide-required-asterisk>
	<el-form-item class="form-row" label="測(cè)試：" prop="test">
        <section class="form-col">
            1 <el-input class="ml-5" v-model="form.test[0]" placeholder="第1項(xiàng)" clearable/>
        </section>
        <section class="form-col">
            2 <el-input class="ml-5" v-model="form.test[1]" placeholder="第2項(xiàng)" clearable/>
        </section>
    </el-form-item>
</form>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

// 表單
const formRef = ref<FormInstance>()

interface RuleForm {
    test: string[]
}

const form = ref<RuleForm>({
    test: [],
})

const checkTest =  = (rule: any, value: any, callback: any) => {
    const [oneStr, twoEnd] = form.value.coordinate
    const pattern1 = /^[EWew]?[+-]?([0-9]|[1-8][0-9]|90)(\.\d+)?$/
    const pattern2 = /^[NSns]?[+-]?([0-9]|[1-9][0-9]|1[0-7][0-9]|180)(\.\d+)?$/

    if (oneStr && twoEnd && pattern1.test(oneStr) && pattern2.test(twoEnd)) {
        callback()
    } else {
    	!oneStr && !twoEnd && callback(new Error('請(qǐng)輸入所有項(xiàng)'))
	    !oneStr && callback(new Error('請(qǐng)輸入第1項(xiàng)'))
	    !twoEnd && callback(new Error('請(qǐng)輸入第2項(xiàng)'))
	    !(pattern1.test(oneStr)) && callback(new Error('請(qǐng)輸入正確的第1項(xiàng)'))
	    !(pattern2.test(twoEnd)) && callback(new Error('請(qǐng)輸入正確的第2項(xiàng)'))
	    !(pattern1.test(oneStr)) && !(pattern2.test(twoEnd)) && callback(new Error('請(qǐng)輸入正確的項(xiàng)'))
    }
}

const rules = reactive<FormRules<RuleForm>>({
    test: [{ validator: checkTest, trigger: 'blur' }],
})
</script>

到了這里，關(guān)于element-ui 表單校驗(yàn)?大全的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！