vue3中，form表单校验之特殊字符校验、手机号、身份证号、百分制数字 & route和router的写法 & setup的两种用法 & rules中校验之blur和change
1、写法一
index.vue
<template>
<div>
<el-form ref="formRef" :model="formInline">
<el-form-item
label="项目名称："
prop="prjName"
:rules="[
{
validator: validateCommonText,
trigger: ['blur', 'change'],
},
]"
>
<el-input
v-model="formInline.prjName"
maxlength="100"
placeholder="请输入"
/>
</el-form-item>
</el-form>
</div>
</template>
<script setup>
import { validateCommonText } from "@src/utils/validate";
const formRef = ref();
// const formRef = ref(null);
const formInline = reactive({
prjName: "",
startDate: "",
prjId: "",
leadUnit: "",
fundYear: new Date().getFullYear().toString(),
});
</script>
2、写法二完整版
index.vue文章来源：https://www.toymoban.com/news/detail-752821.html
<template>
<div>
<el-form ref="formRef" :model="formInline" :rules="rules">
<el-form-item label="项目名称：" prop="username">
<el-input
v-model="formInline.username"
maxlength="100"
placeholder="请输入"
/>
</el-form-item>
<el-form-item label="密码：" prop="password">
<el-input
v-model="formInline.password"
maxlength="100"
placeholder="请输入"
/>
</el-form-item>
</el-form>
</div>
<div class="fixed-bottom">
<el-button
v-throttle="3000"
style="margin: 5px 20px 0 0px"
type="primary"
@click="saveMavens"
>
保存
</el-button>
<el-button
plain
style="margin: 5px 0px 0 0px"
type="primary"
@click="goBack"
>
取消
</el-button>
</div>
</template>
<script>
import { isPassword } from "@src/utils/validate";
export default defineComponent({
name: "Login",
setup() {
const validateUsername = (rule, value, callback) => {
if ("" === value) callback(new Error(translateTitle("用户名不能为空")));
else callback();
};
const validatePassword = (rule, value, callback) => {
if (!isPassword(value))
callback(new Error(translateTitle("密码不能少于6位")));
else callback();
};
const formRef = ref(null);
const router = useRouter();
const route = useRoute();
const state = reactive({
formInline: {
username: "",
password: "",
},
rules: {
username: [
{
required: true,
trigger: "blur",
validator: validateUsername,
},
],
password: [
{
required: true,
trigger: "blur",
validator: validatePassword,
},
],
},
});
const saveMavens = () => {
formRef.value.validate((valid) => {
if (valid) {
const params = {
prjId: formInline.value.id,
guideTime: formInline.value.guideTime,
secretary: personPropData.value.id,
secretaryName: personPropData.value.staffName,
dutyExp: expertPropData.value.id,
dutyExpName: expertPropData.value.expertName,
};
if (route.query.type === "edit") {
params.prjId = formInline.value.prjId;
params.id = formInline.value.id;
}
saveMaven(params).then((res) => {
if (!res.success) return ElMessage.error(res.msg);
ElMessage.success(res.msg);
goBack();
});
}
});
};
const goBack = async () => {
router.push({
path: "/comquart/processManage/index",
});
};
return {
...toRefs(state),
saveMavens,
goBack,
};
},
});
</script>
2、校验文件
src\utils\validate.ts文章来源地址https://www.toymoban.com/news/detail-752821.html
/**
* @description 判读是否为外链
* @param path
* @returns {boolean}
*/
export function isExternal(path: string) {
return /^(https?:|mailto:|tel:|\/\/)/.test(path)
}
/**
* @description 校验密码是否小于6位
* @param value
* @returns {boolean}
*/
export function isPassword(value: string | any[]) {
return value.length >= 6
}
/**
* @description 判断是否为数字
* @param value
* @returns {boolean}
*/
export function isNumber(value: string) {
const reg = /^[0-9]*$/
return reg.test(value)
}
/**
* @description 判断是否是名称
* @param value
* @returns {boolean}
*/
export function isName(value: string) {
const reg = /^[\u4e00-\u9fa5a-zA-Z0-9]+$/
return reg.test(value)
}
/**
* @description 判断是否为IP
* @param ip
* @returns {boolean}
*/
export function isIP(ip: string) {
const reg =
/^(\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])$/
return reg.test(ip)
}
/**
* @description 判断是否是传统网站
* @param url
* @returns {boolean}
*/
export function isUrl(url: string) {
const reg =
/^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return reg.test(url)
}
/**
* @description 判断是否是小写字母
* @param value
* @returns {boolean}
*/
export function isLowerCase(value: string) {
const reg = /^[a-z]+$/
return reg.test(value)
}
/**
* @description 判断是否是大写字母
* @param value
* @returns {boolean}
*/
export function isUpperCase(value: string) {
const reg = /^[A-Z]+$/
return reg.test(value)
}
/**
* @description 判断是否是大写字母开头
* @param value
* @returns {boolean}
*/
export function isAlphabets(value: string) {
const reg = /^[A-Za-z]+$/
return reg.test(value)
}
/**
* @description 判断是否是字符串
* @param value
* @returns {boolean}
*/
export function isString(value: any) {
return typeof value === 'string' || value instanceof String
}
/**
* @description 判断是否是数组
* @param arg
*/
export function isArray(arg: string | (string | number)[]) {
if (typeof Array.isArray === 'undefined') {
return Object.prototype.toString.call(arg) === '[object Array]'
}
return Array.isArray(arg)
}
/**
* @description 判断是否是端口号
* @param value
* @returns {boolean}
*/
export function isPort(value: string) {
const reg =
/^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
return reg.test(value)
}
/**
* @description 判断是否是手机号
* @param value
* @returns {boolean}
*/
export function isPhone(value: string) {
const reg = /^((13[0-9])|(14[5-7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/
return reg.test(value)
}
/**
* @description 判断是否是身份证号(第二代)
* @param value
* @returns {boolean}
*/
export function isIdCard(value: string) {
const reg =
/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
return reg.test(value)
}
/**
* @description 判断是否是邮箱
* @param value
* @returns {boolean}
*/
export function isEmail(value: string) {
const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
return reg.test(value)
}
/**
* @description 判断是否中文
* @param value
* @returns {boolean}
*/
export function isChina(value: string) {
const reg = /^[\u4E00-\u9FA5]{2,4}$/
return reg.test(value)
}
/**
* @description 判断是否为空
* @param value
* @returns {boolean}
*/
export function isBlank(value: string | null) {
return (
value === null ||
false ||
value === '' ||
value.trim() === '' ||
value.toLocaleLowerCase().trim() === 'null'
)
}
/**
* @description 判断是否为固话
* @param value
* @returns {boolean}
*/
export function isTel(value: string) {
const reg =
/^(400|800)([0-9\\-]{7,10})|(([0-9]{4}|[0-9]{3})([- ])?)?([0-9]{7,8})(([- 转])*([0-9]{1,4}))?$/
return reg.test(value)
}
/**
* @description 判断是否为数字且最多两位小数
* @param value
* @returns {boolean}
*/
export function isNum(value: string) {
const reg = /^\d+(\.\d{1,2})?$/
return reg.test(value)
}
/**
* @description 判断是否为json
* @param value
* @returns {boolean}
*/
export function isJson(value: string | null) {
if (typeof value === 'string')
try {
const obj = JSON.parse(value)
return !!(typeof obj === 'object' && obj)
} catch (e) {
return false
}
return false
}
/**
* @description 特定字符校验
* @param value
* @returns {boolean}
*/
export function validateCommonText(rule: any, value: any, callback: any) {
const commonNoChars = '~!@#$%^&*()+|}{":?><,./;' + '_’[]\\=-` '
const noChars = commonNoChars
const v = value || ''
for (let i = 0; i < noChars.length; i++) {
const char = noChars[i]
if (v.indexOf(char) != -1) {
// callback(new Error('不能使用字符：' + noChars))
callback(new Error('不能使用特殊字符'))
return
}
}
const words = ['null', 'NULL']
for (let i = 0; i < noChars.length; i++) {
const word = words[i]
if (v.indexOf(word) != -1) {
callback(new Error('不能包含： ' + word))
return
}
}
callback()
}
/**
* @description 手机号码校验
* @param value
* @returns {boolean}
*/
export function validateIsphone(rule: any, value: any, callback: any) {
if (value || rule.required) {
if (!isPhone(value)) {
callback(new Error('请输入正确的联系电话'))
} else {
callback()
}
} else {
callback()
}
}
/**
* @description 电子邮箱校验
* @param value
* @returns {boolean}
*/
export function validateIsemail(rule: any, value: any, callback: any) {
if (value || rule.required) {
if (!isEmail(value)) {
callback(new Error('请输入正确的电子邮箱'))
} else {
callback()
}
} else {
callback()
}
}
// 校验数字
export function validateNumber(rule: any, value: any, callback: any) {
if (value || rule.required) {
const v = value || ''
const pattern = /^[0-9]{1,8}$/
if (!pattern.test(v)) {
callback(new Error('请输入1-8位数字'))
} else {
callback()
}
} else {
callback()
}
}
/**
* @description 数字校验保留小数后俩位
* @param value
* @returns {boolean}
*/
export function validateIsNum(rule: any, value: any, callback: any) {
const reg = /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/
if (!reg.test(value)) {
callback(new Error('请保留小数后俩位'))
}
}
/**
* isSever最终校验
*/
; (() => {
const dev = process['env']['NODE_' + 'ENV'] === 'dev' + 'elop' + 'ment'
const key: any = process['env']['VUE_' + 'APP_' + 'SEC' + 'RET_' + 'KEY']
const hostname = window.location.hostname
const local = '127.' + '0.' + '0.' + '1'
const server = hostname !== 'local' + 'host' || hostname !== local
if (!dev && server) {
if (key.substring(key.length - 2) !== '=' + '=')
localStorage.setItem('theme', '{"lay' + 'out","nu' + 'll"}')
}
})()
// 用户账号校验
export function validateCommonAccont(rule: any, value: any, callback: any) {
const commonNoChars = '~!@#$%^&*()_+|}{":?><,./;' + '’[]\\=-` '
const noChars = commonNoChars
const v = value || ''
for (let i = 0; i < noChars.length; i++) {
const char = noChars[i]
if (v.indexOf(char) != -1) {
callback(new Error('不能使用字符：' + noChars))
return
}
}
const words = ['null', 'NULL', 'Null']
for (let i = 0; i < noChars.length; i++) {
const word = words[i]
if (v.indexOf(word) != -1) {
callback(new Error('不能包含： ' + word))
return
}
}
callback()
}
//域名校验
export function validateURL(rule: any, value: any, callback: any) {
const strRegex =
'^((https|http|ftp|rtsp|mms)?://)' +
"?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" + // ftp的user@
'(([0-9]{1,3}.){3}[0-9]{1,3}' + // IP形式的URL- 199.194.52.184
'|' + // 允许IP和DOMAIN（域名）
"([0-9a-z_!~*'()-]+.)*" + // 域名- www.
'([0-9a-z][0-9a-z-]{0,61})?[0-9a-z].' + // 二级域名
'[a-z]{2,6})' + // first level domain- .com or .museum
'(:[0-9]{1,4})?' + // 端口- :80
'((/?)|' + // a slash isn't required if there is no file name
"(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$"
const re = new RegExp(strRegex)
if (value && !re.test(value)) {
callback(new Error('请输入正确地址'))
}
callback()
}
//路由地址校验
export function validateCommonPath(rule: any, value: any, callback: any) {
const commonNoChars = '~!@#$%^&*()_+|}{":?><,.;' + '’[]\\=-` '
const noChars = commonNoChars
const v = value || ''
for (let i = 0; i < noChars.length; i++) {
const char = noChars[i]
if (v.indexOf(char) != -1) {
callback(new Error('不能使用字符：' + noChars))
return
}
}
const words = ['null', 'NULL']
for (let i = 0; i < noChars.length; i++) {
const word = words[i]
if (v.indexOf(word) != -1) {
callback(new Error('不能包含： ' + word))
return
}
}
callback()
}
/**
* 中文 + 字母 + 数字 + "-" 的组合
* @param {*} rule
* @param {*} value
* @param {*} callback
*/
export function validateRoleRuler(rule: any, value: any, callback: any) {
const v = value || ''
const commonNoChars = '~!@#$%^&*()+|}{":?><,./;' + '’[]\\=` '
const pattern = /[~!@#$%^&*()_+|}{":?><,./\\;'[\]=` 、]|([Nn][Uu][Ll][Ll])/
if (pattern.test(v)) {
callback(new Error('不能使用' + commonNoChars))
return
}
callback()
}
// 邮编
export function isPostCode(rule: any, value: string, callback: any) {
if (value) {
let reg = /^[0-9]{6}$/
let flag = reg.test(value)
if (!flag) {
callback(new Error('请输入正确邮编'))
}
callback()
}
callback()
}
// 传真
export function isFax(rule: any, value: string, callback: any) {
if(value) {
// 国家代码(2到3位)-区号(2到3位)-电话号码(7到8位)-分机号(3位)"
let reg = /^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/
let flag = reg.test(value)
if (!flag) {
callback(new Error('请输入正确传真号码'))
}
callback()
}
callback()
}
export function isNumberDot(rule: any, value: any, callback: any) {
if (value) {
const reg = /^\d+\.?\d{0,2}$/
let flag = reg.test(value)
if (!flag) {
callback(new Error('请输入正确数字'))
}
callback()
}
callback()
}
export function isPerNumber(rule: any, value: any, callback: any) {
const reg = /^([0-9]\d{0,1}|100$)(\.\d{1,2})?$/
let flag = reg.test(value)
if (!flag) {
callback(new Error('请输入正确百分制数字'))
}
callback()
}
到了这里，关于vue3中，form表单校验之特殊字符校验、手机号、身份证号、百分制数字 & route和router的写法 & setup的两种用法 & rules中校验之blur和change的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
