详解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 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
js获取url传值的方法
Dec 18 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
js实现简单数字变动效果
Nov 06 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之数据库操作详解及乱码解决!
2007/01/02 PHP
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
python原始套接字编程示例分享
2014/02/21 Python
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
python实现树形打印目录结构
2018/03/29 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
美国玩具公司:U.S.Toy
2018/05/19 全球购物
华为的Java面试题
2014/03/07 面试题
会计自我鉴定
2014/02/04 职场文书
矿泉水广告词
2014/03/20 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
感恩教育主题班会
2015/08/12 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js