详解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 相关文章推荐
javascript preload&amp;lazy load
May 13 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 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
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
从零学Python之入门(四)运算
2014/05/27 Python
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
Django多个app urls配置代码实例
2020/11/26 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
大学生最新职业生涯规划书范文
2014/01/12 职场文书
初中政治教学反思
2014/01/17 职场文书
学生打架检讨书
2014/02/14 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
南京青奥会口号
2014/06/12 职场文书
干部考察材料范文
2014/12/24 职场文书
班主任工作实习计划
2015/01/16 职场文书
旗帜观后感
2015/06/08 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle