前端Vue中常用rules校验规则
正则表达式 整数
^[1-9]\d*$ //匹配正整数
^-[1-9]\d*$ //匹配负整数
^-?[1-9]\d*$ //匹配整数
^[1-9]\d*|0$ //匹配非负整数(正整数 + 0)
^-[1-9]\d*|0$ //匹配非正整数(负整数 + 0)
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ //匹配正浮点数
^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ //匹配负浮点数
^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$ //匹配浮点数
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$ //匹配非负浮点数(正浮点数 + 0)
^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$ //匹配非正浮点数(负浮点数 + 0)
rules: {
//验证非空和长度
name: [{
required: true,
message: "站点名称不能为空",
trigger: "blur"
},{
min: 3,
max: 5,
message: \'长度在 3 到 5 个字符\',
trigger: \'blur\'
}],
//验证数值
age: [{
type: \'number\',
message: \'年龄必须为数字值\',
trigger: "blur"
}],
//验证日期
birthday:[{
type: \'date\',
required: true,
message: \'请选择日期\',
trigger: \'change\'
}],
//验证多选
habit: [{
type: \'array\',
required: true,
message: \'请至少选择一个爱好\',
trigger: \'change\'
}],
//验证邮箱
email: [{
type: \'email\',
message: \'请输入正确的邮箱地址\',
trigger: [\'blur\', \'change\']
}],
// 验证手机号
telephone: [{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}],
// 验证经度 整数部分为0-180小数部分为0到7位
longitude: [{
pattern: /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,7})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/,
message: "整数部分为0-180,小数部分为0到7位",
trigger: "blur"
}],
// 验证维度 整数部分为0-90小数部分为0到7位
latitude: [{
pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/,
message: "整数部分为0-90,小数部分为0到7位",
trigger: "blur"
}]
}
vue的rules中自定义校验规则
<script>
import { checkParam } from "@/api/system/param.js";
export default {
name: "Param",
data() {
var validateCode = (rule, value, callback) => {
if (value === \'\') {} else {
if (value !== \'\') {
const param = {
id: this.form.id,
code: this.form.code
}
checkParam(param).then(response => {
if (!response.data) {
callback(new Error(response.msg));
} else {
callback();
}
});
}
}
};
return {
// 表单校验
rules: {
code: [{
required: true,
message: "参数编码不能为空",
trigger: "blur"
}, {
max: 50,
message: \'参数编码在 50 个字以内\',
trigger: \'blur\'
}, {
validator: validateCode,
trigger: \'blur\'
}]
}
};
},
created() {
},
methods: {
}
};
</script>
以上是 前端Vue中常用rules校验规则 的全部内容, 来源链接: utcz.com/z/376887.html