正則表達式 整數
^[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>