台湾谷歌搜索,故事会电子书下载,工商银行存款利息表
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="请输入您的手机号" 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="请输入验证码" 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.新建一个文件(validate.js)定义验证规则
/** 这个文件只允许放表单验证方法 **/ //验证手机号 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('输入的手机号错误')) }
3、在页面(xx.vue)中引入验证规则定义的文件,并在export default中定义rule规则,使用语法:{validator:验证方法,trigger:验证触发} validator
rules: { phone: [ { required: true, message: '手机号不能为空', trigger: 'blur' }, { type: 'string', min: 11, message: '手机号不允许小于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: '验证码不能为空', trigger: 'blur' }, { type: 'string', min: 4, message: '验证码必须是4位', trigger: 'blur' }, ], },
以下是validator.js文件的部分验证方法
/* 是否是公司邮箱*/ 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); } // 验证是否整数 export function isinteger(rule, value, callback) { if (!value) { return callback(new error('输入不可以为空')); } settimeout(() => { if (!number(value)) { callback(new error('请输入正整数')); } else { const re = /^[0-9]*[1-9][0-9]*$/; const rscheck = re.test(value); if (!rscheck) { callback(new error('请输入正整数')); } else { callback(); } } }, 1000); } // 验证是否是[0-1]的小数 export function isdecimal(rule, value, callback) { if (!value) { return callback(new error('输入不可以为空')); } settimeout(() => { if (!number(value)) { callback(new error('请输入数字')); } else { if (value < 0 || value > 1) { callback(new error('请输入[0,1]之间的数字')); } else { callback(); } } }, 1000); } // 验证端口是否在[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); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论