vue3中，form表单校验之特殊字符校验、手机号、身份证号、百分制数字 & route和router的写法 & setup的两种用法 & rules中校验之blur和change

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

<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

/ * @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() } 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10773.html