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

放鹿青崖间

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. 
   
7. <script>
   
8. export default {
   
9.   data() {
   
10.     return {
    
11.       password: '',
    
12.     };
    
13.   },
    
14.   computed: {
    
15.     validatePassword() {
    
16.       return this.password.length >= 8;
    
17.     },
    
18.   },
    
19. };
    
20. </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】 我们会及时删除侵权内容，谢谢合作！