Vue.js rules校验规则举例详解
作者：我爱学习yq
Vue表单校验规则（rules）是一种用于验证表单数据的对象,它通常用于Vue.js框架中的表单组件中,可以在表单提交前进行数据验证,这篇文章主要给大家介绍了关于Vue.js rules校验规则的相关资料,需要的朋友可以参考下
Vue.js 提供了一套轻量级的、可扩展的模板校验规则。这些规则可以通过在v-model绑定中添加.modifier来使用，例如v-model.trim
下面是一些常见的 Vue.js 校验规则：
required: 检查值是否非空email: 检查值是否符合电子邮件格式min: 检查值是否大于等于指定的最小值max: 检查值是否小于等于指定的最大值minLength: 检查值的长度是否大于等于指定的最小长度maxLength: 检查值的长度是否小于等于指定的最大长度numeric: 检查值是否为数字regex: 检查值是否符合指定的正则表达式
这是使用 .modifier 将这些规则应用于 v-model 的一个例子：
<template>
<div>
<input v-model.trim="username" required>
<input v-model.trim="email" type="email" required>
<input v-model.number="age" type="number" min="18" max="99" required>
</div>
</template>
在这个例子中：
v-model.trim将输入值去掉前后空格required校验输入是否非空type="email"校验输入是否符合电子邮件格式v-model.number将输入转换成数字min和max校验输入是否在指定范围内
除了这些内置的校验规则，你还可以使用自定义的校验函数。校验函数应该返回一个布尔值，代表输入是否合法，例如：
<template>
<div>
<input v-model="password" :class="{ invalid: !validatePassword }">
</div>
</template>
<script>
export default {
data() {
return {
password: '',
};
},
computed: {
validatePassword() {
return this.password.length >= 8;
},
},
};
</script>
在这个例子中，我们使用了一个计算属性 validatePassword，它根据密码的长度来返回一个布尔值。我们还在输入框上绑定了一个类名 invalid，如果输入不符合规则，就将这个类名添加到输入框上。
前端Vue中常用rules校验规则:
1、是否合法IP地址:
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.是否手机号码或者固话
pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,3. 是否身份证号码
pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,4.是否邮箱
pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
5.整数填写
pattern:/^-?[1-9]\d*$/,
6.正整数填写
pattern:/^[1-9]\d*$/,
7.小写字母
pattern:/^[a-z]+$/,
8.大写字母
pattern:/^[A-Z]+$/,
9.大小写混合
pattern:/^[A-Za-z]+$/,
10.多个8位数字格式(yyyyMMdd)并以逗号隔开
pattern:/^\d{8}(\,\d{8})*$/,11.数字加英文，不包含特殊字符
pattern:/^[a-zA-Z0-9]+$/,
12.前两位是数字后一位是英文
pattern:/^\d{2}[a-zA-Z]+$/,13.密码校验（6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种）
pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,14.中文校验
pattern:/^[\u0391-\uFFE5A-Za-z]+$/,
总结
到此这篇关于Vue.js rules校验规则的文章就介绍到这了,更多相关Vue rules校验规则内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！