详解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 相关文章推荐
js滚动条多种样式,推荐
Feb 05 Javascript
javascript时区函数介绍
Sep 14 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
原生js实现验证码功能
Mar 16 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
vue 实现上传组件
May 31 Vue.js
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(视频)Http下载
2006/12/12 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
JavaScript DOM 添加事件
2009/02/14 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
python3正则模块re的使用方法详解
2020/02/11 Python
如何在python中判断变量的类型
2020/07/29 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
《难忘的泼水节》教学反思
2014/02/27 职场文书
风险评估实施方案
2014/03/09 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
高一作文之乐趣
2019/11/21 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server