vue3表單參數(shù)校驗及正則表達式舉例詳解
這里我們要實現(xiàn)在form表單中對表單項添加參數(shù)校驗。
校驗要求
我們的表單中有用戶名、密碼、電話號碼、郵箱這四個項。
我們設置用戶名為3到20位的非空字符
密碼為3到25位非空字符
電話號碼就用目前用的電話號碼正則表達式，要求手機號碼以 1 開頭，第二位為 3 到 9 之間的數(shù)字，后面跟著任意 9 個數(shù)字，總共是 11 位數(shù)字。
郵箱就用目前用的郵箱正則表達式，要求一個或多個字母、數(shù)字或下劃線，接著是 @ 符號，然后是一個或多個字母、數(shù)字或下劃線，接著是一個句點，最后是一個或多個字母、數(shù)字或下劃線。
首先搭建頁面
頁面主要代碼：
<el-form ref="form">
<el-form-item>
<el-input :prefix-icon="User" placeholder="請輸入用戶名"></el-input>
</el-form-item>
<el-form-item>
<el-input :prefix-icon="Lock" placeholder="請輸入密碼"></el-input>
</el-form-item>
<el-form-item>
<el-input :prefix-icon="Phone" placeholder="請輸入電話號碼"></el-input>
</el-form-item>
<el-form-item>
<el-input :prefix-icon="Message" placeholder="請輸入郵箱"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary"
@click="register">注冊
</el-button>
</el-form-item>
</el-form>然后對頁面進行數(shù)據(jù)綁定：
為了方便傳數(shù)據(jù)到后端，我們就設置前端表單項的屬性名和后端的一樣。再在<script setup></script>里面定義數(shù)據(jù)模型為registerData，里面有username,password,phone,email。初始都設為空的。
import {ref} from 'vue'
//定義數(shù)據(jù)模型
const registerData = ref({
username: '',
password: '',
phone: '',
email: ''
})
再綁到表單上。
<el-form ref="form" class="form" autocomplete="off" :model="registerData" >
表單項中用：
<el-form-item>
<el-input :prefix-icon="User" placeholder="請輸入用戶名"
v-model="registerData.username"></el-input>
</el-form-item>比如設置了數(shù)據(jù)模型名為registerData后在v-model中用戶名我們要寫registerData.username。以此類推密碼、號碼、郵箱。
然后要定義表單規(guī)則，校驗嘛。我們要寫在表單的上面，在<script setup></script>里面生效。
username校驗規(guī)則部分代碼：
username: [
{require: true, message: '請輸入用戶名', trigger: 'blur'},
{
min: 3,
max: 20,
message: '用戶名為3~20位非空字符',
trigger: 'blur'
},
{
validator: checkUserName,
trigger: 'blur'
}
],
username校驗規(guī)則的checkUserName函數(shù)代碼：
const checkUserName = (rule, value, callback) => {
if (value.trim() === '') {
callback(new Error("姓名不可為空"))
} else {
return callback();
}
}Const rules{}中有表單中的四項，還是以用戶名為例，可以設置默認的{require: true, message: '請輸入用戶名', trigger: 'blur'},使得必須輸入。（不過我試的這個好像不管用，就加上了后面的另外的validator里的規(guī)則）。
{
min: 3,
max: 20,
message: '用戶名為3~20位非空字符',
trigger: 'blur'
},上面這段是設置輸入的長度為3到20位。
{
validator: checkUserName,
trigger: 'blur'
}Validator這里的checkUserName也是我們自己定義的，用來判斷輸入是否為空的或者輸入的全是空格。如果沒有這個value.trim()的話，輸入三個空格也不會報錯。Callback里的error是給出校驗不通過時的報錯提示信息。
const checkUserName = (rule, value, callback) => {
if (value.trim() === '') {
callback(new Error("姓名不可為空"))
} else {
return callback();
}
}在el-form標簽上通過rules屬性，綁定校驗規(guī)則
<el-form ref="form" class="form" autocomplete="off" :model="registerData" :rules="rules">
也就是在原來的基礎上加了一個: rules="rules"，這個"rules"是我們在const rules{}的那個"rules"，規(guī)則名。
在el-form-item標簽上通過prop屬性，指定校驗項
接下來在el-form-item標簽上通過prop屬性，指定校驗項。是在el-form-item里加prop="username"，也就是你的校驗項的屬性名。
<el-form-item prop="username">
<el-input :prefix-icon="User" placeholder="請輸入用戶名"
v-model="registerData.username"></el-input>
</el-form-item>以上就完成了表單的校驗。
看看效果：
都點進輸入框后不輸入內容就點框外的情況：
在框中都輸三個空格
在姓名和密碼輸入框中輸入小于三個字符，在電話號碼輸入框和郵箱輸入框輸入不符合規(guī)則的號碼和郵箱
下面提供給大家電話號碼的正則表達式和郵箱的正則表達式。
電話號碼正則表達式為/^1[3-9]\d{9}$/
/^1[3-9]\d{9}$/- ^：表示匹配字符串的開始。
- 1：匹配數(shù)字 1。
- [3-9]：表示匹配數(shù)字范圍在 3 到 9 之間的任意一個數(shù)字。
- \d：匹配任意一個數(shù)字。
- {9}：表示前面的 \d 必須重復匹配 9 次。
- $：表示匹配字符串的結束。
綜合起來，這個正則表達式用于驗證手機號碼格式，要求手機號碼以 1 開頭，第二位為 3 到 9 之間的數(shù)字，后面跟著任意 9 個數(shù)字，總共是 11 位數(shù)字。
郵箱的正則表達式為：
/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
- ^：表示匹配字符串的開始。
- \w+：匹配一個或多個字母、數(shù)字或下劃線。
- ([-+.]\w+)*：表示匹配一個可選的子模式，其中包含一個連字符、加號或句點，后面跟著一個或多個字母、數(shù)字或下劃線。整個子模式可以重復零次或多次。
- @：匹配電子郵件地址中的 "@" 符號。
- \w+：再次匹配一個或多個字母、數(shù)字或下劃線。
- ([-.]\w+)*：類似于第二個子模式，但是匹配的是一個連字符或句點，后面跟著一個或多個字母、數(shù)字或下劃線。
- \.：匹配電子郵件地址中的句點。
- \w+：再次匹配一個或多個字母、數(shù)字或下劃線。
- ([-.]\w+)*：類似于前兩個子模式，用于匹配郵箱地址中的域名部分。
- $：表示匹配字符串的結束。
綜合起來，這個正則表達式用于驗證電子郵件地址的格式，匹配的規(guī)則大致是“一個或多個字母、數(shù)字或下劃線，接著是 @ 符號，然后是一個或多個字母、數(shù)字或下劃線，接著是一個句點，最后是一個或多個字母、數(shù)字或下劃線”。
附：郵箱校驗規(guī)則部分的代碼：
//定義郵箱校驗規(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("請輸入合法的郵箱"));
}到此這篇關于vue3表單參數(shù)校驗及正則表達式的文章就介紹到這了,更多相關vue3表單參數(shù)校驗+正則內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端input上傳視頻、音頻，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
Vue3實現(xiàn)provide/inject的示例詳解
Vue3 的 Provide / Inject 的實現(xiàn)原理其實就是巧妙利用了原型和原型鏈來實現(xiàn)的。本文將通過示例為大家介紹下provide/inject的具體實現(xiàn)，需要的可以參考一下2022-11-11
這篇文章主要介紹了vue項目的html如何引進public里面的js文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue3?計算屬性computed的實現(xiàn)原理，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-08-08
這篇文章主要介紹了如何去掉ElementUI Table的hover變色問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vux-uploader 圖片上傳組件的安裝及使用方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
今天小編就為大家分享一篇Vue的click事件防抖和節(jié)流處理詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
antd vue table跨行合并單元格,并且自定義內容實例
這篇文章主要介紹了antd vue table跨行合并單元格,并且自定義內容實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
本文主要介紹了Vue3 將組件手動渲染到指定元素中的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
在本篇文章里小編給大家分享了關于VUE中使用MUI方法和步驟，有需要的朋友們可以學習參考下。2019-02-02