详解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 相关文章推荐
对象的类型:本地对象(1)
Dec 29 Javascript
完整显示当前日期和时间的JS代码
Sep 17 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 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
mysql5写入和读出乱码解决
2006/11/25 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
js单例模式的两种方案
2013/10/22 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
python中__call__方法示例分析
2014/10/11 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
StringBuilder和String的区别
2015/05/18 面试题
自荐信要包含哪些内容
2013/11/06 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
报关报检委托书
2014/04/08 职场文书
支部组织生活会方案
2014/06/10 职场文书
让生命充满爱观后感
2015/06/08 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL