如下所示:
成都創(chuàng)新互聯(lián)專注于企業(yè)網(wǎng)絡營銷推廣、網(wǎng)站重做改版、瓊海網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5場景定制、商城網(wǎng)站建設、集團公司官網(wǎng)建設、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務,價格優(yōu)惠性價比高,為瓊海等各大城市提供網(wǎng)站開發(fā)制作服務。
<div id="app"> <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"> <el-form-item label="密碼" prop="pass"> <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input> </el-form-item> <el-form-item label="確認密碼" prop="checkPass"> <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input> </el-form-item> <el-form-item label="年齡" prop="age"> <el-input v-model.number="ruleForm2.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button> <el-button @click="resetForm('ruleForm2')">重置</el-button> </el-form-item> </el-form> </div>
var Main = { data() { var checkAge = (rule, value, callback) => { if (!value) { return callback(new Error('年齡不能為空')); } setTimeout(() => { if (!Number.isInteger(value)) { callback(new Error('請輸入數(shù)字值')); } else { if (value < 18) { callback(new Error('必須年滿18歲')); } else { callback(); } } }, 1000); }; var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('請輸入密碼')); } else { if (this.ruleForm2.checkPass !== '') { this.$refs.ruleForm2.validateField('checkPass'); } callback(); } }; var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('請再次輸入密碼')); } else if (value !== this.ruleForm2.pass) { callback(new Error('兩次輸入密碼不一致!')); } else { callback(); } }; return { ruleForm2: { pass: '', checkPass: '', age: '' }, rules2: { pass: [ { validator: validatePass, trigger: 'blur' } ], checkPass: [ { validator: validatePass2, trigger: 'blur' } ], age: [ { validator: checkAge, trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } } var Ctor = Vue.extend(Main) new Ctor().$mount('#app')
vue2.X+elementUI表單自定義驗證方法
<template> <div class="taxi-appointment-dairen"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <div class="dairen-input"> <el-form-item> <el-input v-model="ruleForm.name" placeholder="請輸入乘車人姓名(選填)"> </el-input> </el-form-item> <i class="fa fa-user fa-2x"></i> </div> <div class="dairen-input"> <el-form-item prop="number"> <el-input v-model="ruleForm.number" placeholder="請輸入乘車人手機號碼"> </el-input> </el-form-item> <i class="fa fa-mobile-phone fa-2x"></i> </div> <div class="popover-btn"> <el-button @click="submitForm('ruleForm')" type="primary">確定</el-button> </div> </el-form> </div> </template>
<script> export default { data () { var ruleNumber = (rule, value, callback) => { var myreg = /^[1][3,4,5,7,8][0-9]{9}$/; if (value === '') { callback(new Error('請輸入乘車人手機號碼')); } else if(!myreg.test(value)) { callback(new Error('請輸入正確乘車人手機號碼')); }else { callback(); //重點在這 如果在驗證通過后不添加callback()函數(shù)在驗證時是條件會為false } }; return { ruleForm: { name: '', number: '' }, rules: { number: [{ validator: ruleNumber, trigger: 'blur' }] } } }, methods: { submitForm (formName) { this.$refs[formName].validate((valid) => { if (valid) { //在驗證通過時時不返回callback()時 這一步進不來 console.log(valid) } else { return false } }); } } } </script>
以上這篇vue表單自定義校驗規(guī)則介紹就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持創(chuàng)新互聯(lián)。
本文題目:vue表單自定義校驗規(guī)則介紹
新聞來源:http://muchs.cn/article2/gedeic.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供標簽優(yōu)化、小程序開發(fā)、域名注冊、外貿(mào)建站、App開發(fā)、網(wǎng)站設計
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)