import useFormValidate from '@/hooks/useFormValidate'
setup(props, { emit }) {
const { validateName, validateIPAndPort } = useFormValidate()
const state = reactive({
workFaceInfo: props.info?.id ? props.info : {},
sysTypeData: props.sysType,
formRules: {
name: [
{
required: true,
message: '工作面名称不能为空',
trigger: ['blur', 'change']
},
{
validator: validateName,
trigger: ['blur', 'change']
}
],
address: [
{
required: true,
message: '工作面IP端口不能为空',
trigger: ['blur', 'change']
},
{
validator: validateIPAndPort,
trigger: ['blur', 'change']
}
],
username: [
{
required: true,
trigger: ['blur', 'change'],
message: '请输入您的账号'
},
{ validator: validateMobilePhone, trigger: ['blur', 'change'] }
],
},
}
useFormValidate .js文章来源：https://www.toymoban.com/news/detail-775579.html
/**
* 表单验证hooks
* @returns
*/
export default function () {
// 匹配名称类字段
const validateName = (rule, value, callback) => {
// if (!/^[\u4E00-\u9FA5a-zA-Z0-9_]{1,20}$/.test(value)) {
// return callback(new Error('请输入中文、英文字母、数字或下划线组合，长度不超过20'))
// }
if (!/^.{1,20}$/.test(value)) {
return callback(new Error('长度不超过20'))
}
return callback()
}
// 匹配value类字符串
const validateValue = (rule, value, callback) => {
if (!/^[\u4E00-\u9FA5a-zA-Z0-9_]{0,12}$/.test(value)) {
return callback(new Error('请输入中文、英文字母、数字或下划线组合，长度不超过12'))
}
return callback()
}
// 匹配编码/标识符类字段
const validateCode = (rule, value, callback) => {
if (!/^[a-zA-Z_][a-zA-Z0-9_]{1,31}$/.test(value)) {
return callback(new Error('第一个字符不能是数字，支持英文、数字、下划线的组合，长度不超过32'))
}
return callback()
}
const validateProp = (rule, value, callback) => {
if (!/^[a-zA-Z_][a-zA-Z0-9_]{0,31}$/.test(value)) {
return callback(new Error('第一个字符不能是数字，支持英文、数字、下划线的组合，长度不超过32'))
}
return callback()
}
// 匹配入网VIN
const validateVin = (rule, value, callback) => {
if (!value) {
return callback()
}
if (!/^[a-zA-Z0-9_:-]{1,50}$/.test(value)) {
return callback(new Error('请输入英文字母、数字、下划线、冒号、短横线组合，长度不超过50'))
}
return callback()
}
//匹配故障码
const validateFaultCode = (rule, value, callback) => {
if (!value) {
return callback()
}
if (!/^[a-zA-Z0-9_]{1,10}$/.test(value)) {
return callback(new Error('请输入英文字母、数字或下划线组合，长度不超过10'))
}
return callback()
}
// 匹配路径类字段
const validatePath = (rule, value, callback) => {
if (!/^[a-zA-Z0-9_/%&',;=?\x22-]{1,200}$/.test(value)) {
return callback(new Error('请输入合法的路径地址，长度不超过200'))
}
return callback()
}
// 匹配描述类字段
const validateText = (rule, value, callback) => {
if (value?.length > 200) {
return callback(new Error('长度不超过200'))
}
return callback()
}
// 匹配邮箱地址
const validateEmail = (rule, value, callback) => {
if (!value) {
return callback()
}
if (!/^.{0,32}$/.test(value)) {
return callback(new Error('长度不超过32'))
}
if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)) {
return callback(new Error('请输入合法的邮箱地址'))
}
return callback()
}
// 匹配手机号
const validateMobilePhone = (rule, value, callback) => {
if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
return callback(new Error('请输入合法的11位手机号码'))
}
return callback()
}
//匹配数字
const validateNumber = (rule, value, callback) => {
if (!/^([0-9]){0,20}$/.test(value)) {
return callback(new Error('请输入数字，长度不超过20'))
}
return callback()
}
//匹配数字
const validateIsNumber = (rule, value, callback) => {
if (!value) {
return callback()
}
if (!/^([+-]?[0-9]){0,999}$/.test(value)) {
return callback(new Error('请输入数字'))
}
return callback()
}
//匹配数字长度不超10
const validateIsNumber10 = (rule, value, callback) => {
if (!value) {
return callback()
}
if (!/^([+-]?[0-9]){0,10}$/.test(value)) {
return callback(new Error('请输入数字,长度不超过10'))
}
return callback()
}
//匹配正整数，小数
const validateNumberFloat = (rule, value, callback) => {
if (!/^\d+(\.\d+)?$/.test(value)) {
return callback(new Error('请输入数字'))
}
return callback()
}
const validateInteger = (rule, value, callback) => {
if (!/^([0-9]*){0,5}$/.test(value)) {
return callback(new Error(`请输入1~10000之间的整数`))
}
return callback()
}
//匹配ip地址的校验
const validateIP = (rule, value, callback) => {
if (!/^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])$/.test(value)) {
return callback(new Error(`请输入合法的IP地址`))
}
return callback()
}
//匹配端口
const validatePort = (rule, value, callback) => {
if (!/^((6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])|[0-5]?\d{0,4})$/g.test(value)) {
return callback(new Error(`请输入合法的端口号`))
}
return callback()
}
//匹配ip/ip+端口
const validateIPAndPort = (rule, value, callback) => {
const ipRegex = /^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])$/
const ipAndPortRegex = /^((\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5]):((6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])|[0-5]?\d{0,4})$/
if (!ipRegex.test(value) && !ipAndPortRegex.test(value)) {
return callback(new Error(`请输入合法的IP地址或IP地址和端口号`))
}
return callback()
}
//匹配50个字符长度
const validateLength50 = (rule, value, callback) => {
if (!/^.{0,50}$/.test(value)) {
return callback(new Error('长度不超过50'))
}
return callback()
}
//匹配以http,https开头的地址
const validateUrlAdress = (rule, value, callback) => {
if (value) {
if (!/(http|https):\/\/([\w.]+\/?)\S*/.test(value)) {
return callback(new Error('地址需以http://,https://开头'))
}
if (!/^.{0,500}$/.test(value)) {
return callback(new Error('长度不超过500'))
}
}
return callback()
}
return {
validateName,
validateValue,
validateCode,
validateProp,
validatePath,
validateText,
validateEmail,
validateMobilePhone,
validateInteger,
validateIP,
validatePort,
validateIPAndPort,
validateVin,
validateNumber,
validateIsNumber,
validateIsNumber10,
validateFaultCode,
validateLength50,
validateUrlAdress,
validateNumberFloat
}
}
手机号验证文章来源地址https://www.toymoban.com/news/detail-775579.html
<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form">
<div class="form-bg">
<img src="../../assets/images/login/formbg.png" />
</div>
<h3 class="login-title"></h3>
<div class="form-box">
<el-form-item prop="username">
<el-input class="login-input" v-model="loginForm.username" size="large" type="text" auto-complete="off" placeholder="账号" autofocus @keyup.enter="handleLogin">
<template #prefix>
<svg t="1669889721496" class="divicon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8250" width="32" height="32">
<path
d="M774.21758248 133.2144911l-308.63958662 308.68902431c-90.718187-42.91192715-202.39796052-27.04242413-277.44439533 48.00401067-95.51364429 95.51364429-95.51364429 250.4514089 0 345.9650532s250.4514089 95.51364429 345.9650532 0c75.04643481-75.04643481 90.86650012-186.67677063 48.00401066-277.49383305l117.21679639-117.21679637 74.45318236 74.45318235c22.24696684 22.24696684 58.33649082 22.29640455 80.63289536 0l33.61763877-33.61763878c22.24696684-22.24696684 22.29640455-58.33649082 0-80.63289537l-42.07148616-42.07148617 0.0494377-0.04943771-32.43113389-32.28282077 77.22169379-77.22169378c22.24696684-22.24696684 22.29640455-58.33649082 0-80.63289537l-35.89177316-35.89177316c-22.29640455-22.29640455-58.38592852-22.29640455-80.68233307 0zM419.35374254 721.1771058c-32.18394536 32.18394536-84.34072317 32.13450766-116.47523082-0.0494377-32.18394536-32.18394536-32.18394536-84.34072317-1e-8-116.52466853s84.34072317-32.13450766 116.47523083 0.0494377 32.23338307 84.29128546 1e-8 116.52466853z"
p-id="8251"></path>
</svg>
</template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
class="login-input password-input"
v-model="loginForm.password"
:type="showOpenEye ? 'text' : 'password'"
auto-complete="off"
placeholder="密码"
size="large"
@keyup.enter="handleLogin">
<template #prefix>
<svg t="1669890083558" class="divicon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8394" width="32" height="32">
<path
d="M848.09719641 814.04327668l0 24.74195525c0 51.22107559-134.22763586 95.08976724-134.22763586 95.08976725l-55.92870868-7.11099317c0 0-89.44187201-11.18616311-145.4137998-11.18616312-55.88970667 0-145.4137998 11.18616311-145.4137998 11.18616312l-55.51866184 6.94655255c0 0-134.63768272-43.89082855-134.63768272-94.92532745l0-24.74195526c0-47.60444092 62.0562214-95.6463349 134.7852574-132.4904708 3.5228194-1.78038337 47.22812513 245.71400839 47.22812511 245.7140084l19.32912516-0.50280826c0 0-37.34694415-255.53405127-33.55638162-257.27121716 20.13235373-9.2076081 33.37718445-17.83756631 53.18065695-24.98123666 7.34605828-2.67637253 42.46567795-21.74935034 22.81926736-73.11062192-45.50150116-46.38167908-76.49746161-91.32028775-76.49746161-192.65879005l337.61827003 0c0 100.28861362-31.78759324 145.64359397-76.98867491 192.08957355l0.26141831 0c-19.21422766 58.2656597 11.51399047 72.08392319 16.40714557 73.66824344 19.59686828 6.47853003 39.1062453 16.60426336 58.76846795 24.99283245 4.87207371 2.07553271-33.55743631 257.27121716-33.55743631 257.27121717l20.42750308-0.54813428c0 0 41.66139634-246.68483917 45.92208912-244.59876534C786.9359103 717.76342478 848.09719641 765.46695111 848.09719641 814.04327668L848.09719641 814.04327668zM704.97713017 272.01821487c0-116.45542393-158.58695132-174.67786533-158.58695134-174.67786532-22.4598175-10.11519223-44.75414053-7.81091922-67.72625271 0 0 0-158.59327534 51.12198935-158.59327533 174.67786532 0 18.47213801-33.52475913 14.50659458-44.61710697 72.93669489l474.15650455 0C729.42393606 286.12108743 704.97713017 290.49035287 704.97713017 272.01821487L704.97713017 272.01821487zM704.97713017 272.01821487"
p-id="8395"></path>
</svg>
</template>
<template #suffix>
<svg
v-if="showOpenEye"
t="1669890127355"
class="divicon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="8538"
width="32"
height="32"
@click="showOpenEye = !showOpenEye">
<path
d="M512 212C312.00000031 212 141.2 336.39999969 72.00000031 512c69.19999969 175.60000031 240 300 439.99999969 300s370.8-124.39999969 439.99999969-300c-69.19999969-175.60000031-240-300-439.99999969-300zM512 711.99999969c-110.4 0-199.99999969-89.59999969-199.99999969-199.99999969s89.59999969-199.99999969 199.99999969-199.99999969 199.99999969 89.59999969 199.99999969 199.99999969-89.59999969 199.99999969-199.99999969 199.99999969z m0-319.99999969c-66.40000031 0-120 53.59999969-120 120s53.59999969 120 120 120 120-53.59999969 120-120-53.59999969-120-120-120z"
p-id="8539"></path>
</svg>
<svg
v-else
t="1669890138247"
class="divicon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="8682"
width="32"
height="32"
@click="showOpenEye = !showOpenEye">
<path
d="M920.534375 317.178125a33.75 33.75 0 0 0-47.625 3.05625c-58.228125 66.215625-118.509375 116.371875-179.165625 149.0625-59.2125 31.95-120.609375 48.140625-182.45625 48.140625S388.19375 501.246875 329.1875 469.334375c-60.39375-32.690625-120.3-82.81875-178.040625-148.996875a33.75 33.75 0 0 0-50.86875 44.371875c41.85 47.9625 85.0875 88.3875 129.159375 120.834375l-54.440625 54.45a33.75 33.75 0 0 0 47.728125 47.728125l64.5-64.5c3.271875 1.875 6.5625 3.703125 9.834375 5.475a479.325 479.325 0 0 0 91.875 38.30625l-31.875 104.634375a33.75 33.75 0 1 0 64.575 19.6875l33.54375-110.109375a422.578125 422.578125 0 0 0 56.04375 3.75 424.63125 424.63125 0 0 0 56.165625-3.75l33.525 110.109375a33.75 33.75 0 1 0 64.575-19.6875l-31.875-104.634375A483.309375 483.309375 0 0 0 725.75 528.725c3.084375-1.659375 6.159375-3.375 9.24375-5.11875l64.10625 64.115625a33.75 33.75 0 0 0 47.728125-47.728125l-53.859375-53.896875C837.490625 453.575 881.215625 413 923.5625 364.8125a33.75 33.75 0 0 0-3.028125-47.634375z"
p-id="8683"></path>
</svg>
</template>
</el-input>
</el-form-item>
<div class="forget-password" @click="forgetPassword">忘记密码</div>
<el-button class="syzk-button mt-20" :class="{ 'syzk-button-active': loading }" :loading="loading" style="width: calc(100% - 4.6rem)" @click="handleLogin">
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
</div>
</el-form>
<div class="forget-password" @click="forgetPassword">忘记密码</div>
<el-button class="syzk-button mt-20" :class="{ 'syzk-button-active': loading }" :loading="loading" style="width: calc(100% - 4.6rem)" @click="handleLogin">
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
到了这里，关于vue项目表单使用正则过滤ip、手机号的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
