详解vue如何使用rules对表单字段进行校验


Posted in Javascript onOctober 17, 2018

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);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
解析vue中的$mount
Dec 21 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
Vue绑定内联样式问题
Oct 17 #Javascript
react 应用多入口配置及实践总结
Oct 17 #Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 #Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 #Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 #Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 #Javascript
vue实现循环切换动画
Oct 17 #Javascript
You might like
php缓存技术介绍
2006/11/25 PHP
PHP 简单数组排序实现代码
2009/08/05 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
怎样创建、运行java程序
2014/08/01 面试题
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
餐饮商业计划书范文
2014/04/29 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏