详解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 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
php Static关键字实用方法
2010/06/04 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
基于Pytorch SSD模型分析
2020/02/18 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
numba提升python运行速度的实例方法
2021/01/25 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
工程造价管理专业大专生求职信
2013/10/06 职场文书
初中美术教学反思
2014/01/29 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
2015年党性分析材料
2014/12/19 职场文书
埃及王子观后感
2015/06/16 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android