详解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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
JavaScript基本编码模式小结
May 23 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
react antd实现动态增减表单
Jun 03 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
PHP 类与构造函数解析
2017/02/06 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
vue-router单页面路由
2017/06/17 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
Python简单实现enum功能的方法
2016/04/25 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
python 实现二维列表转置
2019/12/02 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
军训鉴定表自我鉴定
2014/02/13 职场文书
计划生育标语
2014/06/23 职场文书
经济贸易系求职信
2014/08/04 职场文书
验房委托书
2014/08/30 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python