文件：regular.js
export default {
// 验证自然数
naturalNum: {
pattern: /^(([0-9]*[1-9][0-9]*)|(0+))$/,
message: '请输入自然数'
},
// 正整数
positiveNum: {
pattern: /^[1-9]+\d*$/,
message: '请输入正整数'
},
// 保留两位小数
twoDecimal: {
pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{0,2})?$/,
message: '小数点保留最多两位'
},
email: {
pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
message: '请输入正确的邮箱地址'
},
// 手机号
phone: {
pattern: /^1\d{10}$/,
message: '请输入正确的手机号码'
},
// 座机
telephone: {
pattern: /^\\d{3}-\\d{7,8}|\\d{4}-\\d{7,8}$/,
message: '请输入正确的座机号'
},
// 微信号
weChat: {
pattern: /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/,
message: '请输入正确的微信号码'
},
// QQ号码
qq: {
pattern: /^[1-9]\d{4,11}$/,
message: '请输入正确的QQ号码'
},
// 英文
english: {
pattern: /^.[A-Za-z]+$/,
message: '请输入英文字符'
},
// 银行卡号码
bankCard: {
pattern: /^[1-9]\\d{9,19}$/,
message: '请输入正确的银行卡号码'
},
// 证件号码
IDNumber: {
pattern: /^[a-z0-9A-Z]{0,50}$/,
message: '请输入正确的证件号码'
},
// 身份证号码,包括15位和18位的
IDCard: {
pattern: /(^[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]$)|(^[1-9]\d{7}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/,
message: '请输入正确的身份证号码'
},
// url
url: {
pattern: /^(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-.,@?^=%&:/~+#]*[\w\-@?^=%&/~+#])?$/,
message: '请输入以http和https开头的网址'
},
noHttp: {
pattern: /[\w\-_]+(\.[\w\-_]+)+([\w\-.,@?^=%&:/~+#]*[\w\-@?^=%&/~+#])?$/,
message: '请不要输入http和https开头的网址'
},
noUrl: {
pattern: /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/,
message: '请输入正确的连接地址'
},
// 0到20位的英文字符和数字
enNum0to20: {
pattern: /^[a-z0-9A-Z]{0,20}$/,
message: '请输入20位以内的英文字符和数字'
},
// 8到20位的英文字符和数字
enNum8to20: {
pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/,
message: '请输入8-20位以内的英文字符和数字'
},
// 2到100位的中英文字符和空格
cnEnSpace2to100: {
pattern: /^[a-zA-Z\u4E00-\u9FA5\s*]{2,100}$/,
message: '请输入2到100位的中英文字符和空格'
},
// 数字和换行符
numLinefeed: {
pattern: /^[0-9\n*]+$/,
message: '请输入数字和换行符'
},
// 255位以内的字符
char0to255: {
pattern: /^.{0,255}$/,
message: '请输入255位以内的字符'
},
// 四个字符
char0to4: {
pattern: /^.{0,4}$/,
message: '最多四位数或四个汉字'
},
// 2-20位 字母、中文 字符
enCh2to20: {
pattern: /^[a-zA-Z\u4e00-\u9fa5]{2,20}$/,
message: '组织名由2-20位字母、中文字符组成'
},
// 特殊字符
specialChar: {
pattern: /^[^`~!@#$^&*()=|{}':;',/\\[\].<>?]*$/,
message: '请删除特殊字符'
},
// 数字验证码
codeNumber: {
pattern: /^[0-9]{6}$/,
message: '请输入正确的编码'
}
}
使用：
- 引入：import regular from ‘@/utils/regular’
- 使用：表单校验
loginRules: {
account: [
{
required: true,
trigger: 'blur',
validator: validateUsername
}
],
password: [
{
required: true,
trigger: 'blur',
message: '请输入登录密码'
}
],
code: [
{
required: true,
trigger: 'change',
pattern: regular.codeNumber.pattern,
message: regular.codeNumber.message
}
],
verifyCode: [
{
required: true,
trigger: 'blur',
message: '请输入验证码'
}
]
},
const validateUsername = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入手机号'))
} else {
if (!regular.phone.pattern.test(value)) {
callback(new Error(regular.phone.message))
} else {
callback()
}
}
}
- 使用校验规则：prop属性
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
auto-complete="on"
label-position="left"
v-show="titleIndex === 0"
>
<el-form-item prop="account" class="bor-1-px">
<el-input
ref="account"
v-model="loginForm.account"
:disabled="accountDisable"
name="account"
type="text"
tabindex="1"
@keyup.enter.native="handleLogin"
/>
</el-form-item>
</el-form>
注意：
- 要有表单数据对象model
:model="loginForm" - 表单验证规则
:rules="loginRules" prop="account"v-model="loginForm.account"名称account要一致