這里我們要實(shí)現(xiàn)在form表單中對(duì)表單項(xiàng)添加參數(shù)校驗(yàn)。

校驗(yàn)要求

我們的表單中有用戶名、密碼、電話號(hào)碼、郵箱這四個(gè)項(xiàng)。

我們?cè)O(shè)置用戶名為3到20位的非空字符

密碼為3到25位非空字符

電話號(hào)碼就用目前用的電話號(hào)碼正則表達(dá)式，要求手機(jī)號(hào)碼以 1 開頭，第二位為 3 到 9 之間的數(shù)字，后面跟著任意 9 個(gè)數(shù)字，總共是 11 位數(shù)字。

郵箱就用目前用的郵箱正則表達(dá)式，要求一個(gè)或多個(gè)字母、數(shù)字或下劃線，接著是 @ 符號(hào)，然后是一個(gè)或多個(gè)字母、數(shù)字或下劃線，接著是一個(gè)句點(diǎn)，最后是一個(gè)或多個(gè)字母、數(shù)字或下劃線。

首先搭建頁(yè)面

頁(yè)面主要代碼：

                    <el-form ref="form">
                        <el-form-item>
                            <el-input :prefix-icon="User" placeholder="請(qǐng)輸入用戶名"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input :prefix-icon="Lock" placeholder="請(qǐng)輸入密碼"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input :prefix-icon="Phone" placeholder="請(qǐng)輸入電話號(hào)碼"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input :prefix-icon="Message" placeholder="請(qǐng)輸入郵箱"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary"
                                       @click="register">注冊(cè)
                            </el-button>
                        </el-form-item>
                    </el-form>

然后對(duì)頁(yè)面進(jìn)行數(shù)據(jù)綁定：

為了方便傳數(shù)據(jù)到后端，我們就設(shè)置前端表單項(xiàng)的屬性名和后端的一樣。再在<script setup></script>里面定義數(shù)據(jù)模型為registerData，里面有username,password,phone,email。初始都設(shè)為空的。

import {ref} from 'vue'
    //定義數(shù)據(jù)模型
    const registerData = ref({
        username: '',
        password: '',
        phone: '',
        email: ''
    })

再綁到表單上。

<el-form ref="form" class="form" autocomplete="off" :model="registerData" >

表單項(xiàng)中用：

<el-form-item>
    <el-input :prefix-icon="User" placeholder="請(qǐng)輸入用戶名"
              v-model="registerData.username"></el-input>
</el-form-item>

比如設(shè)置了數(shù)據(jù)模型名為registerData后在v-model中用戶名我們要寫registerData.username。以此類推密碼、號(hào)碼、郵箱。

然后要定義表單規(guī)則，校驗(yàn)嘛。我們要寫在表單的上面，在<script setup></script>里面生效。

username校驗(yàn)規(guī)則部分代碼：

username: [
            {require: true, message: '請(qǐng)輸入用戶名', trigger: 'blur'},
            {
                min: 3,
                max: 20,
                message: '用戶名為3~20位非空字符',
                trigger: 'blur'
            },
            {
                validator: checkUserName,
                trigger: 'blur'
            }
        ],

username校驗(yàn)規(guī)則的checkUserName函數(shù)代碼：

const checkUserName = (rule, value, callback) => {
        if (value.trim() === '') {
            callback(new Error("姓名不可為空"))
        } else {
            return callback();
        }
    }

Const rules{}中有表單中的四項(xiàng)，還是以用戶名為例，可以設(shè)置默認(rèn)的{require: true, message: '請(qǐng)輸入用戶名', trigger: 'blur'},使得必須輸入。（不過我試的這個(gè)好像不管用，就加上了后面的另外的validator里的規(guī)則）。

{
    min: 3,
    max: 20,
    message: '用戶名為3~20位非空字符',
    trigger: 'blur'
},

上面這段是設(shè)置輸入的長(zhǎng)度為3到20位。

{
    validator: checkUserName,
    trigger: 'blur'
}

Validator這里的checkUserName也是我們自己定義的，用來判斷輸入是否為空的或者輸入的全是空格。如果沒有這個(gè)value.trim()的話，輸入三個(gè)空格也不會(huì)報(bào)錯(cuò)。Callback里的error是給出校驗(yàn)不通過時(shí)的報(bào)錯(cuò)提示信息。

const checkUserName = (rule, value, callback) => {
    if (value.trim() === '') {
        callback(new Error("姓名不可為空"))
    } else {
        return callback();
    }
}

在el-form標(biāo)簽上通過rules屬性，綁定校驗(yàn)規(guī)則

<el-form ref="form" class="form" autocomplete="off" :model="registerData" :rules="rules">

也就是在原來的基礎(chǔ)上加了一個(gè): rules="rules"，這個(gè)"rules"是我們?cè)赾onst rules{}的那個(gè)"rules"，規(guī)則名。

在el-form-item標(biāo)簽上通過prop屬性，指定校驗(yàn)項(xiàng)

接下來在el-form-item標(biāo)簽上通過prop屬性，指定校驗(yàn)項(xiàng)。是在el-form-item里加prop="username"，也就是你的校驗(yàn)項(xiàng)的屬性名。

<el-form-item prop="username">
    <el-input :prefix-icon="User" placeholder="請(qǐng)輸入用戶名"
              v-model="registerData.username"></el-input>
</el-form-item>

以上就完成了表單的校驗(yàn)。

看看效果：

都點(diǎn)進(jìn)輸入框后不輸入內(nèi)容就點(diǎn)框外的情況：

在框中都輸三個(gè)空格

在姓名和密碼輸入框中輸入小于三個(gè)字符，在電話號(hào)碼輸入框和郵箱輸入框輸入不符合規(guī)則的號(hào)碼和郵箱

下面提供給大家電話號(hào)碼的正則表達(dá)式和郵箱的正則表達(dá)式。

電話號(hào)碼正則表達(dá)式為/^1[3-9]\d{9}$/

/^1[3-9]\d{9}$/

• ^：表示匹配字符串的開始。
• 1：匹配數(shù)字 1。
• [3-9]：表示匹配數(shù)字范圍在 3 到 9 之間的任意一個(gè)數(shù)字。
• \d：匹配任意一個(gè)數(shù)字。
• {9}：表示前面的 \d 必須重復(fù)匹配 9 次。
• $：表示匹配字符串的結(jié)束。

綜合起來，這個(gè)正則表達(dá)式用于驗(yàn)證手機(jī)號(hào)碼格式，要求手機(jī)號(hào)碼以 1 開頭，第二位為 3 到 9 之間的數(shù)字，后面跟著任意 9 個(gè)數(shù)字，總共是 11 位數(shù)字。

郵箱的正則表達(dá)式為：

/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

• ^：表示匹配字符串的開始。
• \w+：匹配一個(gè)或多個(gè)字母、數(shù)字或下劃線。
• ([-+.]\w+)*：表示匹配一個(gè)可選的子模式，其中包含一個(gè)連字符、加號(hào)或句點(diǎn)，后面跟著一個(gè)或多個(gè)字母、數(shù)字或下劃線。整個(gè)子模式可以重復(fù)零次或多次。
• @：匹配電子郵件地址中的 "@" 符號(hào)。
• \w+：再次匹配一個(gè)或多個(gè)字母、數(shù)字或下劃線。
• ([-.]\w+)*：類似于第二個(gè)子模式，但是匹配的是一個(gè)連字符或句點(diǎn)，后面跟著一個(gè)或多個(gè)字母、數(shù)字或下劃線。
• \.：匹配電子郵件地址中的句點(diǎn)。
• \w+：再次匹配一個(gè)或多個(gè)字母、數(shù)字或下劃線。
• ([-.]\w+)*：類似于前兩個(gè)子模式，用于匹配郵箱地址中的域名部分。
• $：表示匹配字符串的結(jié)束。

綜合起來，這個(gè)正則表達(dá)式用于驗(yàn)證電子郵件地址的格式，匹配的規(guī)則大致是“一個(gè)或多個(gè)字母、數(shù)字或下劃線，接著是 @ 符號(hào)，然后是一個(gè)或多個(gè)字母、數(shù)字或下劃線，接著是一個(gè)句點(diǎn)，最后是一個(gè)或多個(gè)字母、數(shù)字或下劃線”。

附：郵箱校驗(yàn)規(guī)則部分的代碼：

//定義郵箱校驗(yàn)規(guī)則
const checkEmail = (rule, value, callback) => {
    const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    if (value === '') {
        callback(new Error("郵箱不可為空"))
    } else if (regEmail.test(value)) {
        return callback();
    }
    callback(new Error("請(qǐng)輸入合法的郵箱"));
}

到此這篇關(guān)于vue3表單參數(shù)校驗(yàn)及正則表達(dá)式的文章就介紹到這了,更多相關(guān)vue3表單參數(shù)校驗(yàn)+正則內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論