vue中rules下拉框验证,vue的rules表单提交才验证
本文主要介绍了vue(常用)中规则表单的验证，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
首先，在表单中绑定规则，并在item中定义属性prop。在数据或计算中编写规则，其中name是prop。还可以使用pattern直接匹配和验证前端Vue中常用的规则检查规则。
首先在表单中绑定rules
并在item中定义属性prop
El-form:model= rule form :rules= rules ref= rule form
El-form-item标签=活动名称属性=名称
el输入v-model=ruleForm.name/el输入
/El-表单-项目
/el格式
在data或computed中编写rules规则
规则{
名称：[{type: string ，required: true，message: name required ，trigger: blur}，{max: 30，message:名称长度不能超过30位 }]
}
其中name为prop名
Type: type required: required(此列是否为空)message:error message trigger:trigger mode(模糊：失去焦点时验证常用:验证输入输入框更改：验证值更改时常用:下拉框选择、日期选择器、复选框复选框、单选)
也可以直接用pattern进行匹配验证
名称：[{模式：验证条件，必需：真，消息：提示信息，触发器：模糊 }]
检查vue的规则中的规则和常用正则表达式。
规则：{
//验证非空和长度
名称：[{
必填：真，
消息：“网站名称不能为空”，
触发器：“模糊”
},{
分钟：3，
最大：5，
消息：“长度为3到5个字符”，
触发器：“模糊”
}],
//验证数值
年龄：[{
类型：数字，
消息：“年龄必须是一个数值”，
触发器：“模糊”
}],
//验证日期
生日：[{
类型：“日期”，
必填：真，
消息：“请选择一个日期”，
触发器：“改变”
}],
//验证多重选择
习惯：[{
类型：“数组”，
必填：真，
消息：“请至少选择一个爱好”，
触发器：“改变”
}],
//验证邮箱
电子邮件：[{
类型：“电子邮件”，
消息：“请输入正确的电子邮件地址”，
触发器：[模糊，改变]
}],
//验证手机号码
电话：[{
图案：/^1[3456789][0-9]\d{8}$/，
消息：“请输入正确的手机号码”，
触发器：“模糊”
}],
//验证经度的整数部分是0-180，小数部分是0-7位。
经度：[{
图案：/^(\-\)？((((\d[1-9]\d1[0-7]\d0{1，3})\。\d{0，7})(\d[1-9]\d1[0-7]\d0{1，3})180\.0{0，6}180)$/，
消息：整数部分为0-180，小数部分为0-7位，
触发器：“模糊”
}],
//验证维度的整数部分是0-90，小数部分是0-7位数。
纬度：[{
图案：/^(\-\)？([0-8]?\d{1}\。\d{0，7}90\.0{0，6}[0-8]？\d{1}90)$/，
消息：整数部分为0-90，小数部分为0-7位，
触发器：“模糊”
}]
}
前端Vue中常用rules校验规则
1.IP地址合法吗：
pattern:/^(\d{1,2}1\d\d2[0-4]\d25[0-5])\.(\d{1，2}1\d\d2[0-4]\d25[0-5])。(\d{1，2}1\d\d2[0-4]\d25[0-5])。(\d{1，2}1\d\d2[0-4]\d25[0-5])$/，
2.是手机号还是固话？
pattern:/^((0\d{2,3}-\d{7,8})(1[34578]\d{9}))$/，
3.是身份证号？
pattern:/(^\d{15}$)(^\d{18}$)(^\d{17}(\dxx)$)/，
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位数字格式(yymmdd)。
pattern:/^\d{8}(\,\d{8})*$/，
1.数字加英文，不带特殊字符。
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]$/，
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。