validate?注冊頁的表單數據校驗實現詳解
更新時間：2022年09月30日 15:53:47 作者：風無雨
這篇文章主要為大家介紹了validate?注冊頁的表單數據校驗實現詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
1.注冊頁是什么
當我們使用一個從未使用過的網站時,想要注冊賬號,點擊注冊賬號時看到的網頁就是注冊頁注冊頁例子如下:
我們看到以下的注冊頁中,有兩大類信息:
- 第一大類是用戶信息類,
包括用戶名,密碼和email,他們都有自己的 取值規(guī)則 ,例如用戶名顯示不得小于3個字符
- 第二大類是驗證碼類,一般有兩種,
一種是短信或郵箱驗證,這是為了綁定手機號或郵箱,
還有一種就下圖中的真人驗證,為了避免機器人惡意訪問信息量過大,通過驗證計算題或者識別字母的方式來確定是真人訪問
2.為什么需要注冊頁
目的:
- 注冊頁的目的是讓用戶注冊賬號
- 用戶通過賬號密碼來登錄網站
- 網站記錄用戶的賬戶密碼,建立一個記錄每一個用戶信息的數據庫
數據校驗
- 用戶名和密碼都有一定的命名和設定規(guī)則
- 為了避免不符合規(guī)則的命名和密碼發(fā)送到服務器,造成服務器壓力過大
- 我們需要在前端頁面對數據進行初篩,符合規(guī)則要求的才會被發(fā)送到服務器
- 服務器再進行用戶名是否重復的校驗
3.注冊頁如何實現
本次所使用的技術棧:vue2.0,axios,element-ui,vuex,vue-router
需要實現的界面如下:
3.1分析業(yè)務需求
- 1.獲取數據: v-model雙向綁定三個數據,分別是username.password,repassword
- 2.校驗數據
(1)在data中添加校驗規(guī)則
(2)在模板中配置規(guī)則
(3)處理最終結果 - 3.發(fā)送數據: 通過axios發(fā)送數據
- 4.處理數據: 判斷axios返回的code值,來處理數據
初始html模板如下
小貼士:
input框的前置icon圖標通過prefix-icon="el-icon-user"實現
如果想要實現點擊小眼睛實現密碼顯示和保密.可以在el-input框便簽加上show-password實現
<!-- 注冊的表單區(qū)域 -->
<el-form>
<!-- 用戶名 -->
<el-form-item>
<el-input placeholder="請輸入用戶名" prefix-icon="el-icon-user"></el-input>
</el-form-item>
<!-- 密碼 -->
<el-form-item>
<el-input type="password" prefix-icon="el-icon-lock" placeholder="請輸入密碼"></el-input>
</el-form-item>
<!-- 確認密碼 -->
<el-form-item>
<el-input type="password" prefix-icon="el-icon-lock" placeholder="請再次確認密碼"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" class="btn-reg">注冊</el-button>
<el-link type="info" @click="$router.push('/login')">去登錄</el-link>
</el-form-item>
</el-form>
3.2獲取數據 v-model雙向綁定
首先在data中定義表單數據對象,包含用戶名,密碼和第二次密碼
data() {
return {
form: {
username: "",
password: "",
repassword: "",
},
}
然后在表單的三個input框中使用v-model綁定上面的三個數據
<!-- 注冊的表單區(qū)域 -->
<el-form >
<el-form-item >
<el-input
placeholder="請輸入用戶名"
prefix-icon="el-icon-user"
v-model="form.username"
></el-input>
</el-form-item>
<el-form-item>
<el-input
placeholder="請輸入密碼"
prefix-icon="el-icon-lock"
v-model="form.password"
show-password
></el-input>
</el-form-item>
<el-form-item >
<el-input
placeholder="請輸入再次確認密碼"
prefix-icon="el-icon-lock"
v-model="form.repassword"
show-password
></el-input>
</el-form-item>
</el-form>
3.3校驗數據
首先在data中定義數據校驗規(guī)則
formRules: {
username: [
{ required: true, message: "用戶名不能為空", trigger: "blur" },
{
pattern: /^[a-zA-Z0-9]{1,10}$/,
message: "用戶名必須是1-10位的字母數字",
trigger: "blur",
},
],
password: [
{ required: true, message: "密碼不能為空", trigger: "blur" },
{
pattern: /^\S{6,15}$/,
message: "密碼必須是6-15位的非空字符",
trigger: "blur",
},
],
repassword: [
{ required: true, message: "請再次確認密碼", trigger: "blur" },
{
pattern: /^\S{6,15}$/,
message: "密碼必須是6-15位的非空字符",
trigger: "blur",
},
// 使用 validator 屬性，來應用自定義的校驗規(guī)則
{
validator: (rule, value, callback) => {
// 形參中的 value 表示被綁定的元素的值
if (value !== this.form.password) {
// 校驗失敗
callback(new Error("兩次密碼不一致！"));
} else {
// 校驗成功
callback();
}
},
trigger: "blur",
},
],
},
然后對html中的form部分標簽中增加內容
- 在el-form中:model綁定form,:rules綁定formRules,
- 在el-form-item中prop綁定form中的數據,注意這里不需要寫form.username,只需要寫username
<!-- 注冊的表單區(qū)域 -->
<el-form :model="form" :rules="formRules" ref="formRef">
<el-form-item prop="username">
<el-input
placeholder="請輸入用戶名"
prefix-icon="el-icon-user"
v-model="form.username"
></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
placeholder="請輸入密碼"
prefix-icon="el-icon-lock"
v-model="form.password"
show-password
></el-input>
</el-form-item>
<el-form-item prop="repassword">
<el-input
placeholder="請輸入再次確認密碼"
prefix-icon="el-icon-lock"
v-model="form.repassword"
show-password
></el-input>
</el-form-item>
</el-form>
3.4method中的發(fā)送數據
首先給html中的注冊按鈕綁定一個點擊事件@click='doRegister'
<el-button type="primary" style="width: 100%" @click="doRegister">注冊</el-button>
然后在methods里定義事件doRegister:
- 通過$refs獲得表單的dom元素
- 使用validate對數據進行校驗,如果成功發(fā)送ajax
- 這里使用了promise的語法糖async-await,來實現同步的寫法實現異步的效果
// 2.方法
methods: {
// 2.1注冊
doRegister() {
// (1).檢查表單時是否校驗通過
this.$refs.formRef.validate(async (valid) => {
if (valid) {
// (2).校驗通過,發(fā)送ajax
const { data: res } = await this.$axios.post("/api/reg", {
...this.form,
});
}
});
},
},
3.5處理數據
根據ajax返回的數據中的code來判斷,是注冊成功還是注冊失敗
(這里要通過后端提供的接口文檔來確定什么code是失敗,什么code是成功)
我這里code為0是成功,1是失敗
- 注冊成功跳轉登錄頁, this.$router.push("/login");通過路由實現
- 彈出成功信息框: this.$message.success(res.message);
- 錯誤則彈出失敗信息框:this.$message.error(res.message)
// 2.方法
methods: {
// 2.1注冊
doRegister() {
// (1).檢查表單時是否校驗通過
this.$refs.formRef.validate(async (valid) => {
if (valid) {
// (2).校驗通過,發(fā)送ajax
const { data: res } = await this.$axios.post("/api/reg", {
...this.form,
});
// (3).處理數據
if (res.code === 0) {
// 跳轉登錄頁
this.$router.push("/login");
// 彈出信息框
this.$message.success(res.message);
} else {
this.$message.error(res.message);
}
}
});
},
},
4總結
業(yè)務思路
1.獲取數據
2.校驗數據
3.發(fā)送請求
4.處理響應數據
以上就是validate 注冊頁的表單數據校驗實現詳解的詳細內容，更多關于validate 注冊頁表單數據校驗的資料請關注腳本之家其它相關文章！
相關文章
本篇文章給大家詳細介紹了vue跨域處理問題的方式以及相關知識點介紹，對此有興趣的朋友學習下。2018-02-02
這篇文章主要為大家詳細介紹了vue實現div拖拽互換位置的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要為大家詳細介紹了如何使用Vue實現簡易的車牌輸入鍵盤效果,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以了解下2023-11-11
這篇文章主要介紹了Vue中使用debugger在瀏覽器中不起作用的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了輕松實現一個簡單的vue公式編輯器組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
本篇文章主要介紹vue2.0 移動端實現下拉刷新和上拉加載更多的示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要給大家介紹了關于vue3中封裝axios請求的最新實現步驟,在Vue 3中可以通過封裝axios來實現接口的統一管理和調用,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue2 webpack proxy與nginx配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在微信小程序中，可以使用全局配置和使用開發(fā)、體驗、生產環(huán)境的地址，這篇文章主要介紹了Vue微信和uniapp配置環(huán)境地址,需要的朋友可以參考下2023-07-07
基于vue-cli3創(chuàng)建libs庫的實現方法
這篇文章主要介紹了基于vue-cli3創(chuàng)建libs庫的實現方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12