vue3 el-form 表单正则校验

最新推荐文章于 2024-07-05 13:39:15 发布

喝可乐的大喵

最新推荐文章于 2024-07-05 13:39:15 发布

阅读量1.9k

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/phoenixguangyu/article/details/130528315

版权

<template>
<el-form :model="form" :rules="addRules" ref="addForm">
	<el-form-item prop="proportion" label="权重" label-width="80">
		<el-col :span="20">
	       <el-input maxlength="3" v-model.trim="form.proportion" autocomplete="off" />
		</el-col>
	</el-form-item>
</el-form>
</template>

<script setup lang="ts">
    import type { FormInstance, FormRules } from 'element-plus'
    //表单实例
    const addForm = ref<FormInstance>()//ref="addForm"
    //校验规则/^\d+$/
    const addRules = ref<FormRules>({
	    proportion: [
		    { required: true, message: '请输入权重', trigger: ['blur'] },
		    { pattern: /^\d+$/, message: '权重必须为数字', trigger: ['blur'] }
	    ],
    })
    //点击提交,进行校验
    const submit = async (formEl: FormInstance | undefined) => {
	    if (!formEl) return
	    await formEl.validate((valid, fields) => {
	    if (valid) {
        //通过校验
        }else{
            //未通过校验}
</script>

表单校验四要素:
<el-form>
:model='表单数据' -----------------------1
:rules='校验规则' -----------------------2

<el-form-item>
 prop="xxx"-----------------------3

<el-form-item>
    <el-input v-model='data.xxx'>-----------------------4
</el-form-item>