详解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框架
Aug 13 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 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 各种排序算法实现代码
2009/08/20 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
js文字滚动停顿效果代码
2008/06/28 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
vue按需加载实例详解
2019/09/06 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
python DataFrame 取差集实例
2019/01/30 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
XML文档面试题
2015/08/05 面试题
主持人婚宴答谢词
2014/01/28 职场文书
国培计划培训感言
2014/03/11 职场文书
服装设计专业求职信
2014/06/16 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
教代会闭幕词
2015/01/28 职场文书
护士辞职信怎么写
2015/02/27 职场文书
在职证明书模板
2015/06/15 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
Python竟然能剪辑视频
2021/05/25 Python