Vue自定義表單內容檢查rules例項
阿新 • • 發佈:2020-10-30
先看個例子
元件
<el-form-item label="手機號:" prop="phone_number"> <el-input v-model="formPerson.phone_number"></el-input> </el-form-item>
script中
export default { data() { var validateMobilePhone = (rule,value,callback) => { if (value === '') { callback(new Error('負責人手機號不可為空')); } else { if (value !== '') { var reg = /^1[3456789]\d{9}$/; if (!reg.test(value)) { callback(new Error('請輸入有效的手機號碼')); } else { callback(); } } } }; return{ formPerson: { phone_number: '',},rules: { phone_number: [ {validator: validateMobilePhone,trigger: 'blur'} ] },} } }
遇到的坑
在元件中【開始寫的時候prop自定的名字】
<el-form-item label="手機號:" prop="phone"> <el-input v-model="formPerson.phone_number"></el-input> </el-form-item>
rules中
rules: { phone: [ {validator: validateMobilePhone,trigger: 'blur'} ] }
碰到的坑
當輸入正確的手機號時,顯示為錯誤,發現value並沒有傳過來,為undefined
解決:
prop寫成和資料中的引數的名稱一樣,即phone_number
補充知識:用vue自定義指令v-validated寫一個全域性表單驗證
由於不想在單vue檔案裡用blur等等設定表單驗證並顯示驗證失敗的資訊,因此思考並封裝了一個全域性自定義指令。
獻上我的程式碼。
html
<div class="form-section"> <p>First Name</p> <input type="text" v-model='form.username' v-validated:username="['username',form.username]" placeholder="" > <div class="error"></div> </div> <div class="form-section"> <p>Last Name</p> <input type="text" v-model='form.secondname' placeholder=""> <div class="error"></div> </div> <div class="form-section"> <p>Email</p> <input type="email" v-model='form.email' v-validated:email="['email',form.email]" placeholder=""> <div class="error"></div> </div> <div class="form-section"> <p>Password</p> <input type="password" v-model='form.password' v-validated:password="['password',form.password]" autocomplete placeholder=""> <div class="error"></div> </div>
在input上掛載v-validated指令,向指令傳輸 ‘username'的校驗型別,和form.username的校驗資料。
現在封裝v-validated指令
validated.js
import Vue from 'vue' /** * 校驗失敗 */ function testError (el) { el.style.borderColor = '#d20000' el.style.backgroundColor = '#fff8f8' } /** * 校驗成功 */ function testCorrect (el) { el.style.borderColor = '#a3a3a3' el.nextElementSibling.innerHTML = '' el.style.backgroundColor = 'transparent' } /** * 校驗使用者名稱 * */ function testUserName (username,el) { if (/^\w{3,30}$/g.test(username)) { testCorrect(el) return true } else { testError(el) el.nextElementSibling.innerHTML = 'Username must be 3 to 30 characters' return false } } /** * 校驗郵箱 * */ function testEmail (email,el) { if (/^[\w-]+@[\w-]+(\.[\w-]+)+$/g.test(email)) { testCorrect(el) return true } else { testError(el) el.nextElementSibling.innerHTML = 'Mailbox format is not correct!' return false } } /** * 校驗密碼 * */ function testPwd (pwd,el) { if (/^\w{6,30}$/g.test(pwd)) { testCorrect(el) return true } else { testError(el) el.nextElementSibling.innerHTML = 'Password must be 6 to 30 characters' return false } } Vue.directive('validated',{ inserted (el,binding) { // 繫結元素插入父節點時呼叫 el.addEventListener('blur',() => { switch (binding.value[0]) { case 'username' : testUserName(binding.def[binding.rawName],el); break case 'email' : testEmail(binding.def[binding.rawName],el); break case 'password' : testPwd(binding.def[binding.rawName],el); break } }) },update: function (el,binding,vNode) { // 更新元素資訊時呼叫 binding.def[binding.rawName] = binding.value[1] } }) export default { init () { console.log('*** validated installed ***') } }
由於沒有找到官方鉤子之間傳遞資料的方法,所以自己看著用binding.def下定義updated來作為傳遞資料,
inserted是節點插入時就呼叫一次。在這裡做元素blur的監聽,動態資料由update重新整理。
修正:我只定義一個updated會出現多個更新資料共用一個引數名,導致資料錯亂。
所以我用binding.rawName做指標,放入binding.def下,實現一個頁面多個數據多個處理,因為update鉤子是頁面上的任意改動都會觸發,而不是當前掛載指令的dom物件變化才會跟著變化。
最後將這個檔案放入main.js
main.js
import validated from '@/dorajs/validated.js'
Vue.use(validated)
效果如下
完美解決!
以上這篇Vue自定義表單內容檢查rules例項就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。