翼度科技»论坛 编程开发 JavaScript 查看内容

Vue.js rules校验规则举例详解

6

主题

6

帖子

18

积分

新手上路

Rank: 1

积分
18
Vue.js 提供了一套轻量级的、可扩展的模板校验规则。这些规则可以通过在
  1. v-model
复制代码
绑定中添加
  1. .modifier
复制代码
来使用,例如
  1. v-model.trim
复制代码
下面是一些常见的 Vue.js 校验规则:

    1. required
    复制代码
    : 检查值是否非空
    1. email
    复制代码
    : 检查值是否符合电子邮件格式
    1. min
    复制代码
    : 检查值是否大于等于指定的最小值
    1. max
    复制代码
    : 检查值是否小于等于指定的最大值
    1. minLength
    复制代码
    : 检查值的长度是否大于等于指定的最小长度
    1. maxLength
    复制代码
    : 检查值的长度是否小于等于指定的最大长度
    1. numeric
    复制代码
    : 检查值是否为数字
    1. regex
    复制代码
    : 检查值是否符合指定的正则表达式
这是使用
  1. .modifier
复制代码
将这些规则应用于
  1. v-model
复制代码
的一个例子:
  1. <template>
  2.   <div>
  3.     <input v-model.trim="username" required>
  4.     <input v-model.trim="email" type="email" required>
  5.     <input v-model.number="age" type="number" min="18" max="99" required>
  6.   </div>
  7. </template>
复制代码
在这个例子中:

    1. v-model.trim
    复制代码
    将输入值去掉前后空格
    1. required
    复制代码
    校验输入是否非空
    1. type="email"
    复制代码
    校验输入是否符合电子邮件格式
    1. v-model.number
    复制代码
    将输入转换成数字
    1. min
    复制代码
    1. max
    复制代码
    校验输入是否在指定范围内
除了这些内置的校验规则,你还可以使用自定义的校验函数。校验函数应该返回一个布尔值,代表输入是否合法,例如:
  1. <template>
  2.   <div>
  3.     <input v-model="password" :class="{ invalid: !validatePassword }">
  4.   </div>
  5. </template>

  6. <script>
  7. export default {
  8.   data() {
  9.     return {
  10.       password: '',
  11.     };
  12.   },
  13.   computed: {
  14.     validatePassword() {
  15.       return this.password.length >= 8;
  16.     },
  17.   },
  18. };
  19. </script>
复制代码
在这个例子中,我们使用了一个计算属性
  1. validatePassword
复制代码
,它根据密码的长度来返回一个布尔值。我们还在输入框上绑定了一个类名
  1. invalid
复制代码
,如果输入不符合规则,就将这个类名添加到输入框上。
前端Vue中常用rules校验规则:
1、是否合法IP地址:
  1. pattern:/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
复制代码
2.是否手机号码或者固话
  1. pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,
复制代码
3. 是否身份证号码
  1. pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
复制代码
4.是否邮箱
  1. pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
复制代码
5.整数填写
  1. pattern:/^-?[1-9]\d*$/,
复制代码
6.正整数填写
  1. pattern:/^[1-9]\d*$/,
复制代码
7.小写字母
  1. pattern:/^[a-z]+$/,
复制代码
8.大写字母
  1. pattern:/^[A-Z]+$/,
复制代码
9.大小写混合
  1. pattern:/^[A-Za-z]+$/,
复制代码
10.多个8位数字格式(yyyyMMdd)并以逗号隔开
  1. pattern:/^\d{8}(\,\d{8})*$/,
复制代码
11.数字加英文,不包含特殊字符
  1. pattern:/^[a-zA-Z0-9]+$/,
复制代码
12.前两位是数字后一位是英文
  1. pattern:/^\d{2}[a-zA-Z]+$/,
复制代码
13.密码校验(6-20位英文字母、数字或者符号(除空格),且字母、数字和标点符号至少包含两种)
  1. pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,
复制代码
14.中文校验
  1. pattern:/^[\u0391-\uFFE5A-Za-z]+$/,
复制代码
总结
到此这篇关于Vue.js rules校验规则的文章就介绍到这了,更多相关Vue rules校验规则内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

来源:https://www.jb51.net/javascript/3161027ex.htm
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

举报 回复 使用道具