首先在表单中绑定rules,并在item中定义属性prop:
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-form>
在data或computed中编写rules规则:
rules {
name: [ { type: 'string',required: true,message: "名称必填",trigger: 'blur'},{max: 30,message: "名称长度不能超过30位" }]
}
其中name为prop名
type:类型
required:是否必选项(此栏是否为空)
message:报错信息
trigger:触发方式(
blur :失去焦点时进行验证
常用:对input
输入框的验证change :当值发生变化时进行验证
常用:下拉框select
,日期选择框date-picker
,复选框checkBox
,单选框radio
)
也可以直接用pattern进行匹配验证:
name: [ { pattern: 验证条件,message: "提示信息",trigger: "blur" }]
vue的rules中自带的校验规则和常用正则表达式校验
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',
message: '请至少选择一个爱好', //验证邮箱
email: [{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur','change']
}], // 验证手机号
telephone: [{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", // 验证经度 整数部分为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位", // 验证维度 整数部分为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, trigger: "blur"
}]
}
前端Vue中常用rules校验规则:
1、是否合法IP地址:
pattern:/^(\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])$/,
2.是否手机号码或者固话
pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,3. 是否身份证号码
pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,4.是否邮箱
pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,5.整数填写
pattern:/^-?[1-9]\d*$/,6.正整数填写
pattern:/^[1-9]\d*$/,7.小写字母
pattern:/^[a-z]+$/,8.大写字母
pattern:/^[A-Z]+$/,9.大小写混合
pattern:/^[A-Za-z]+$/,10.多个8位数字格式(yyyyMMdd)并以逗号隔开
pattern:/^\d{8}(\,\d{8})*$/,11.数字加英文,不包含特殊字符
pattern:/^[a-zA-Z0-9]+$/,12.前两位是数字后一位是英文
pattern:/^\d{2}[a-zA-Z]+$/,13.密码校验(6-20位英文字母、数字或者符号(除空格),且字母、数字和标点符号至少包含两种)
pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,14.中文校验
pattern:/^[\u0391-\uFFE5A-Za-z]+$/,
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。