您好,登錄后才能下訂單哦!
1、在代碼中,添加屬性::rule
<Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit" class="form-con"> <FormItem prop="phone"> <Input v-model="form.phone" prefix="md-person" placeholder="請輸入您的手機(jī)號(hào)" size="large" class="login-form-input" :maxlength="11"></Input> </FormItem> <FormItem prop="password"> <Input type="password" v-model="form.password" prefix="md-lock" placeholder="請輸入您的密碼" size="large" class="login-form-input" :maxlength="100"></Input> </FormItem> <FormItem prop="code"> <Input v-model="form.code" placeholder="請輸入驗(yàn)證碼" prefix="ios-barcode" size="large" class="login-form-input" :maxlength="4"></Input> <img @click="refLoginImg" :src="loginImgSrc" class="login-img"/> </FormItem> <FormItem> <Button @click="handleSubmit" :loading="submitLoading" type="info" long size="large" class="login-btn" icon="md-log-in"> <span v-if="!submitLoading">立即登錄</span> <span v-else>正在登錄,請稍候...</span> </Button> </FormItem> </Form>
2.新建一個(gè)文件(validate.js)定義驗(yàn)證規(guī)則
/** 這個(gè)文件只允許放表單驗(yàn)證方法 **/ //驗(yàn)證手機(jī)號(hào) export function isPhone(rule, value, callback) { if (!value) { return callback(new Error('輸入不可以為空')); } var pattern = /^1[34578]\d{9}$/ if(pattern.test(value)){ return callback() } return callback(new Error('輸入的手機(jī)號(hào)錯(cuò)誤')) }
3、在頁面(xx.vue)中引入驗(yàn)證規(guī)則定義的文件,并在export default中定義rule規(guī)則,使用語法:{validator:驗(yàn)證方法,trigger:驗(yàn)證觸發(fā)} validator
rules: { phone: [ { required: true, message: '手機(jī)號(hào)不能為空', trigger: 'blur' }, { type: 'string', min: 11, message: '手機(jī)號(hào)不允許小于11位', trigger: 'blur' }, { validator: isPhone, trigger: 'blur' }, ], password: [ { required: true, message: '密碼不能為空', trigger: 'blur' }, { type: 'string', min: 6, message: '密碼不允許小于6位', trigger: 'blur' }, ], code: [ { required: true, message: '驗(yàn)證碼不能為空', trigger: 'blur' }, { type: 'string', min: 4, message: '驗(yàn)證碼必須是4位', trigger: 'blur' }, ], },
以下是validator.js文件的部分驗(yàn)證方法
/* 是否是公司郵箱*/ export function isWscnEmail(str) { const reg = /^[a-z0-9](?:[-_.+]?[a-z0-9]+)*@wallstreetcn\.com$/i; return reg.test(str.trim()); } /* 合法uri*/ export function validateURL(textval) { const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/; return urlregex.test(textval); } // 驗(yàn)證是否整數(shù) export function isInteger(rule, value, callback) { if (!value) { return callback(new Error('輸入不可以為空')); } setTimeout(() => { if (!Number(value)) { callback(new Error('請輸入正整數(shù)')); } else { const re = /^[0-9]*[1-9][0-9]*$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error('請輸入正整數(shù)')); } else { callback(); } } }, 1000); } // 驗(yàn)證是否是[0-1]的小數(shù) export function isDecimal(rule, value, callback) { if (!value) { return callback(new Error('輸入不可以為空')); } setTimeout(() => { if (!Number(value)) { callback(new Error('請輸入數(shù)字')); } else { if (value < 0 || value > 1) { callback(new Error('請輸入[0,1]之間的數(shù)字')); } else { callback(); } } }, 1000); } // 驗(yàn)證端口是否在[0,65535]之間 export function isPort(rule, value, callback) { if (!value) { return callback(new Error('輸入不可以為空')); } setTimeout(() => { if (value == '' || typeof(value) == undefined) { callback(new Error('請輸入端口值')); } else { const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error('請輸入在[0-65535]之間的端口值')); } else { callback(); } } }, 1000); } /* 小寫字母*/ export function validateLowerCase(str) { const reg = /^[a-z]+$/; return reg.test(str); }
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。