Vue+element註冊表單斷定
1、是否被註冊，不用element的驗證
<template>
<div class="login">
<div class="login_box" style="top:-40px">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
<ul class="login_form">
<li>
<div class="login_input">
<div class="login_input_left">
+86
</div>
<div class="line"></div>
<div class="login_input_right">
<el-form-item prop="phone">
<el-input v-model="ruleForm.phone" placeholder="請輸入手機號" style="width:260px" @blur="userPhoneExist()" @focus="cleanPhoneExist()"></el-input>
<p v-show="isReg === true" style="color:red;font-size:12px;position: absolute;top: 30px;">手機號已被註冊!</p>
</el-form-item>
</div>
</div>
</li>
<li>
<div class="login_input">
<div class="login_input_left iconfont icon-mima" style="text-align: center">
</div>
<div class="line"></div>
<div class="login_input_right">
<el-form-item prop="password">
<el-input type='password' v-model="ruleForm.password" placeholder="請輸入密碼" style="width:260px"></el-input>
</el-form-item>
</div>
</div>
</li>
<li>
<div class="login_input">
<div class="login_input_left iconfont icon-bianji" style="text-align: center">
</div>
<div class="line"></div>
<div class="login_input_right">
<el-form-item prop="nickName">
<el-input v-model="ruleForm.nickName" placeholder="請輸入暱稱" style="width:170px"></el-input>
</el-form-item>
</div>
</div>
<p class="error"></p>
</li>
<li>
<div class="login_input" style="width:218px;float:left">
<div class="login_input_left iconfont icon-anquan" style="text-align: center">
</div>
<div class="line"></div>
<div class="login_input_right" style="width:170px">
<el-form-item prop="verticalCode">
<el-input v-model="ruleForm.verticalCode" style="width:170px"></el-input>
</el-form-item>
</div>
</div>
<el-button style="margin:0 0 0 10px" v-show="show" @click="sendCode()" class="btn_code" >發送驗證碼</el-button>
<el-button style="margin:0 0 0 10px;padding:0 10px" v-show="!show" disabled class="btn_code"><el-input disabled v-model="this.count" class="sendCodeNum"></el-input>秒後重發</el-button>
<p class="error"></p>
</li>
<li>
<div class="login_input" style='width:104px;float:left'>
<div class="login_input_left iconfont icon-xingbie" style="text-align: center">
</div>
<div class="line"></div>
<div class="login_input_right" style="width:60px">
<el-form-item prop="sex">
<input type="text" placeholder="性別" v-model="ruleForm.sex" style="width:62px;text-align:left" disabled>
</el-form-item>
</div>
</div>
<div class="sex_radio">
<label for="" v-if = "ruleForm.sex === '男'" @click="clickSex1()"><span class="iconfont icon-yixuanzhong"></span><input type="radio" value="男">男</label>
<label for="" v-else @click="clickSex1()"><span class="iconfont icon-weixuanzhong"></span><input type="radio" value="男">男</label>
<label for="" v-if = "ruleForm.sex === '女'" @click="clickSex2()"><span class="iconfont icon-yixuanzhong"></span><input type="radio" value="女">女</label>
<label for="" v-else @click="clickSex2()"><span class="iconfont icon-weixuanzhong"></span><input type="radio" value="女">女</label>
</div>
<p class="error"></p>
</li>
</ul>
<div class="lrbtn login_btn" @click="submitForm('ruleForm')" >註冊</div>
<p class="regmsg">註冊即表示贊成[SANTE] <router-link to="" class="linkto">服務條款</router-link> 和 <router-link to="" class="linkto">隱私條款</router-link></p>
<p class="regthird"><a href="#" class="linkto" style="border-bottom:none"><span class="iconfont icon-weixin"></span> 使用社交帳號快速登陸</a></p>
<div class="login_close" @click="close"></div>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: 'register',
props: ['userreg'],
mounted: function () {
},
data () {
return {
ajaxPhoneUrl: '', // 驗證手機號是否存在
ajaxSendCodeUrl: '', // 發送驗證碼
ajaxRegisterUrl: '', // 註冊提交表單
show: true, //是否顯示發送驗證碼的按鈕
isReg: '', // 手機號是否存在的斷定驗證,最後在提交表單裏還須要再次驗證
isCodeCorrect: false, // 若是是分步驟的，須要判斷手機號的驗證碼是否正確
GetCode: {}, // 若是是分步驟的，須要驗證手機號的驗證碼是否正確
count: '', // 發送驗證碼的計時器變量
timer: null, // 是否已存在計時器
ruleForm: { // 表單內容
nickName: '',
phone: '',
password: '',
verticalCode: '',
sex: ''
},
rules: { // 表單規則
nickName: [
{required: true, message: '請輸入暱稱', trigger: 'blur'},
{min: 3, max: 10, message: '長度在 3 到 10 個字符'},
{pattern: /^[\u4E00-\u9FA5A-Za-z]+$/, message: '只能輸入中文和英文'}
],
phone: [
{required: true, message: '請輸入註冊手機號', trigger: 'blur'},
{pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '只能輸入11位手機號'},
],
password: [
{required: true, message: '請輸入密碼', trigger: 'blur'},
{pattern: /^[A-Za-z]+[0-9]+[A-Za-z0-9]*|[0-9]+[A-Za-z]+[A-Za-z0-9]*$/, message: '密碼必須由6-16個英文字母和數字的字符串組成！'}
],
verticalCode: [
{required: true, message: '請輸入驗證碼', trigger: 'blur'},
// {pattern: /^[0-9]{6}$/, message: '驗證碼必須爲6位數字'}
],
sex: [
{required: true, message: '請選擇性別', trigger: 'blur'},
]
}
}
},
methods: {
close () {
this.$emit('listenToChildEvent', false)
},
login () {
this.$emit('changestate', [0, true, false])
},
clickSex1 () {
this.ruleForm.sex = '男'
},
clickSex2 () {
this.ruleForm.sex = '女'
},
// 失去焦點後, 判斷用戶手機號是否存在, POST失敗
userPhoneExist () {
this.$ajax.get(this.ajaxPhoneUrl, {
params: {phone: this.ruleForm.phone}
})
.then((res) => {
if (res.data.status === 1) {
// 能夠註冊
this.isReg = false
} else {
// 已經被註冊
this.isReg = true
}
})
.catch(function (error) {
console.log(error)
})
},
// 清除新增長斷定手機號是否存在的提示
cleanPhoneExist () {
this.isReg = ''
},
// 驗證碼得到
getCode () {
// 發送手機號驗證碼
this.$ajax.get(this.ajaxSendCodeUrl, {
params: {phone: this.ruleForm.phone}
})
.then((res) => {
if (res.data.status === 1) {
this.isCodeCorrect = true
this.$message.success('驗證碼發送成功')
} else {
this.isCodeCorrect = false
this.$message.error('驗證碼發送失敗')
}
})
.catch(function (error) {
console.log(error)
})
},
// 點擊發送驗證碼
sendCode () {
// 倒計時
// 先判斷手機號是否填寫正確
var re = /^[1][3,4,5,7,8][0-9]{9}$/
if ((re.test(this.ruleForm.phone)) & (this.isReg === false)) {
// 填寫正確後，開始發送信息，倒計時
const TIME_COUNT = 60
// 判斷時間計時是否存在,不存在則賦值60,不顯示發送驗證碼按鈕,計時器啓動循環
if (!this.timer) {
this.count = TIME_COUNT
this.show = false
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
if (this.count === 60) {
// 發送手機號到後臺
this.getCode()
}
this.count--
} else {
// 計時器爲0的時候顯示發送驗證碼按鈕，清空計時器
this.show = true
clearInterval(this.timer)
this.timer = null
return false
}
}, 1000)
}
} else {
// 手機號存在,或者手機號沒有正確填寫
this.show = true
this.$message.error('請填寫正確手機號！')
}
},
// 總表單提交
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// 判斷手機號是否被註冊,是否發送過驗證碼
if (this.isReg === false && this.isCodeCorrect === true) {
// 驗證經過,提交註冊信息
console.log('提交了呢！')
this.$ajax.get(this.ajaxRegisterUrl, {
params: {regForm: this.ruleForm}})
.then((res) => {
if (res.status === 1) {
this.$message.success('恭喜您,註冊成功！')
// 跳轉提交狀態頁面,可不添加
this.formSubmit = true
} else if (res.status === 2) {
this.$message.error('驗證碼錯誤，請從新註冊！')
}
})
} else {
// 驗證未經過
this.$message.error('未經過驗證,註冊失敗！')
return false
}
} else {
this.$message.error('提交資料有誤,註冊失敗！')
return false
}
})
}
}
}
</script>
<style scoped lang="scss">
</style>
手機號已被註冊的斷定就是經過增長了一個isReg的變量判斷，使用userPhoneExist（）這個方法來肯定是否顯示的css
2、自定義element驗證是否被註冊
<template>
<div class="login">
<div class="login_box" style="top:-40px">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
<ul class="login_form">
<li>
<div class="login_input">
<div class="login_input_left">
+86
</div>
<div class="line"></div>
<div class="login_input_right">
<el-form-item prop="phone">
<el-input v-model="ruleForm.phone" placeholder="請輸入手機號" style="width:260px"></el-input>
</el-form-item>
</div>
</div>
</li>
<li>
<div class="login_input">
<div class="login_input_left iconfont icon-mima" style="text-align: center">
</div>
<div class="line"></div>
<div class="login_input_right">
<el-form-item prop="password">
<el-input type='password' v-model="ruleForm.password" placeholder="請輸入密碼" style="width:260px"></el-input>
</el-form-item>
</div>
</div>
</li>
<li>
<div class="login_input">
<div class="login_input_left iconfont icon-bianji" style="text-align: center">
</div>
<div class="line"></div>
<div class="login_input_right">
<el-form-item prop="nickName">
<el-input v-model="ruleForm.nickName" placeholder="請輸入暱稱" style="width:170px"></el-input>
</el-form-item>
</div>
</div>
<p class="error"></p>
</li>
<li>
<div class="login_input" style="width:218px;float:left">
<div class="login_input_left iconfont icon-anquan" style="text-align: center">
</div>
<div class="line"></div>
<div class="login_input_right" style="width:170px">
<el-form-item prop="verticalCode">
<el-input v-model="ruleForm.verticalCode" style="width:170px"></el-input>
</el-form-item>
</div>
</div>
<el-button style="margin:0 0 0 10px" v-show="show" @click="sendCode()" class="btn_code" >發送驗證碼</el-button>
<el-button style="margin:0 0 0 10px;padding:0 10px" v-show="!show" disabled class="btn_code"><el-input disabled v-model="this.count" class="sendCodeNum"></el-input>秒後重發</el-button>
<p class="error"></p>
</li>
<li>
<div class="login_input" style='width:104px;float:left'>
<div class="login_input_left iconfont icon-xingbie" style="text-align: center">
</div>
<div class="line"></div>
<div class="login_input_right" style="width:60px">
<el-form-item prop="sex">
<input type="text" placeholder="性別" v-model="ruleForm.sex" style="width:62px;text-align:left" disabled>
</el-form-item>
</div>
</div>
<div class="sex_radio">
<label for="" v-if = "ruleForm.sex === '男'" @click="clickSex1()"><span class="iconfont icon-yixuanzhong"></span><input type="radio" value="男">男</label>
<label for="" v-else @click="clickSex1()"><span class="iconfont icon-weixuanzhong"></span><input type="radio" value="男">男</label>
<label for="" v-if = "ruleForm.sex === '女'" @click="clickSex2()"><span class="iconfont icon-yixuanzhong"></span><input type="radio" value="女">女</label>
<label for="" v-else @click="clickSex2()"><span class="iconfont icon-weixuanzhong"></span><input type="radio" value="女">女</label>
</div>
<p class="error"></p>
</li>
</ul>
<div class="lrbtn login_btn" @click="submitForm('ruleForm')" >註冊</div>
<p class="regmsg">註冊即表示贊成[SANTE] <router-link to="" class="linkto">服務條款</router-link> 和 <router-link to="" class="linkto">隱私條款</router-link></p>
<p class="regthird"><a href="#" class="linkto" style="border-bottom:none"><span class="iconfont icon-weixin"></span> 使用社交帳號快速登陸</a></p>
<div class="login_close" @click="close"></div>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: 'register',
props: ['userreg'],
mounted: function () {
},
data () {
var rulePhone = (rule, value, callback) => {
this.$ajax.get(this.ajaxPhoneUrl, {
params: {phone: this.ruleForm.phone}
})
.then((res) => {
if (res.data.status === 1) {
// 能夠註冊
this.isReg = false
callback(); //重點在這 若是在驗證經過後不添加callback()函數在驗證時是條件會爲false
} else if (res.data.status === 0) {
// 已經被註冊
this.isReg = true
callback(new Error('該手機號已被註冊！'));
}
})
.catch(function (error) {
console.log(error)
})
}
return {
isReg : '',
ajaxPhoneUrl: '', // 驗證手機號是否存在
ajaxSendCodeUrl: '', // 發送驗證碼
ajaxRegisterUrl: '', // 註冊提交表單
show: true, //是否顯示發送驗證碼的按鈕
GetCode: {}, // 若是是分步驟的，須要驗證手機號的驗證碼是否正確
count: '', // 發送驗證碼的計時器變量
timer: null, // 是否已存在計時器
ruleForm: { // 表單內容
nickName: '',
phone: '',
password: '',
verticalCode: '',
sex: ''
},
rules: { // 表單規則
nickName: [
{required: true, message: '請輸入暱稱', trigger: 'blur'},
{min: 3, max: 10, message: '長度在 3 到 10 個字符'},
{pattern: /^[\u4E00-\u9FA5A-Za-z]+$/, message: '只能輸入中文和英文'}
],
phone: [
{required: true, message: '請輸入註冊手機號', trigger: 'blur'},
{pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '只能輸入11位手機號'},
{validator: rulePhone, trigger: 'blur' }
],
password: [
{required: true, message: '請輸入密碼', trigger: 'blur'},
{pattern: /^[A-Za-z]+[0-9]+[A-Za-z0-9]*|[0-9]+[A-Za-z]+[A-Za-z0-9]*$/, message: '密碼必須由6-16個英文字母和數字的字符串組成！'}
],
verticalCode: [
{required: true, message: '請輸入驗證碼', trigger: 'blur'},
// {pattern: /^[0-9]{6}$/, message: '驗證碼必須爲6位數字'}
],
sex: [
{required: true, message: '請選擇性別', trigger: 'blur'},
]
}
}
},
methods: {
close () {
this.$emit('listenToChildEvent', false)
},
login () {
this.$emit('changestate', [0, true, false])
},
clickSex1 () {
this.ruleForm.sex = '男'
},
clickSex2 () {
this.ruleForm.sex = '女'
},
// 驗證碼得到
getCode () {
// 發送手機號驗證碼
this.$ajax.get(this.ajaxSendCodeUrl, {
params: {phone: this.ruleForm.phone}
})
.then((res) => {
if (res.data.status === 1) {
this.isCodeCorrect = true
this.$message.success('驗證碼發送成功')
} else {
this.isCodeCorrect = false
this.$message.error('驗證碼發送失敗')
}
})
.catch(function (error) {
console.log(error)
})
},
// 點擊發送驗證碼
sendCode () {
// 倒計時
// 先判斷手機號是否填寫正確
var re = /^[1][3,4,5,7,8][0-9]{9}$/
if ((re.test(this.ruleForm.phone)) & (this.isReg === false)) {
// 填寫正確後，開始發送信息，倒計時
const TIME_COUNT = 60
// 判斷時間計時是否存在,不存在則賦值60,不顯示發送驗證碼按鈕,計時器啓動循環
if (!this.timer) {
this.count = TIME_COUNT
this.show = false
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
if (this.count === 60) {
// 發送手機號到後臺
this.getCode()
}
this.count--
} else {
// 計時器爲0的時候顯示發送驗證碼按鈕，清空計時器
this.show = true
clearInterval(this.timer)
this.timer = null
return false
}
}, 1000)
}
} else {
// 手機號存在,或者手機號沒有正確填寫
this.show = true
this.$message.error('請填寫正確手機號！')
}
},
// 總表單提交
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$ajax.get(this.ajaxRegisterUrl, {
params: {regForm: this.ruleForm}})
.then((res) => {
if (res.status === 1) {
this.$message.success('恭喜您,註冊成功！')
// 跳轉提交狀態頁面,可不添加
this.formSubmit = true
} else if (res.status === 2) {
this.$message.error('驗證碼錯誤，請從新註冊！')
}
})
} else {
this.$message.error('提交資料有誤,註冊失敗！')
return false
}
})
}
}
}
</script>
<style scoped lang="scss">
</style>
經過新增一個變量isReg來判斷是否被註冊（主要是在點擊發送驗證碼的時候判斷是否被註冊了，若是被註冊則不發驗證碼），不須要額外在失去焦點和聚焦的時候寫方法。定義一個變量rulePhone，使用element的自定義驗證規則，{validator: rulePhone, trigger: 'blur' }來設置。html
參考文檔：vue
1.vue2.X+elementUI表單自定義驗證：https://www.cnblogs.com/wei-dong/p/8776466.htmlajax
相關文章
- 1. 註冊表單
- 2. ExtJS註冊表單
- 3. 自定義drupal註冊表單
- 4. 【註冊表】1：深入認識註冊表--註冊表五大預定義項
- 5. Web表單設計之註冊表單
- 6. 註冊表自定義windowns
- 7. 註冊表自定義
- 8. 註冊表單驗證
- 9. HTML註冊表單練習
- 10. Html註冊表單示例
- 更多相關文章...
- • jQuery Mobile 表單 - jQuery Mobile 教程
- • Thymeleaf表單 - Thymeleaf 教程
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
- • RxJava操作符（十）自定義操作符
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 註冊表單
- 2. ExtJS註冊表單
- 3. 自定義drupal註冊表單
- 4. 【註冊表】1：深入認識註冊表--註冊表五大預定義項
- 5. Web表單設計之註冊表單
- 6. 註冊表自定義windowns
- 7. 註冊表自定義
- 8. 註冊表單驗證
- 9. HTML註冊表單練習
- 10. Html註冊表單示例