详解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判断一个URL链接是否有效的实现方法
Oct 08 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
详细分析Node.js 模块系统
Jun 28 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实现多文件上传的方法
2015/07/08 PHP
javascript与cookie 的问题详解
2013/11/11 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
投资合作协议书范本
2014/04/17 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
大学社团计划书
2014/05/01 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
员工团队活动方案
2014/08/28 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python