这篇文章主要介绍“vue中的rules表单验证怎么实现”，在日常操作中，相信很多人在vue中的rules表单验证怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue中的rules表单验证怎么实现”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
首先在表单中绑定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: 验证条件, required: true, 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', required: true, message: '请至少选择一个爱好', trigger: 'change' }], //验证邮箱 email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }], // 验证手机号 telephone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }], // 验证经度 整数部分为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位", trigger: "blur" }], // 验证维度 整数部分为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,小数部分为0到7位", trigger: "blur" }] }前端Vue中常用rules校验规则
是否合法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])\.(\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])$/,是否手机号码或者固话
pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,是否身份证号码
pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,是否邮箱
pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,整数填写
pattern:/^-?[1-9]\d*$/,正整数填写
pattern:/^[1-9]\d*$/,小写字母
pattern:/^[a-z]+$/,大写字母
pattern:/^[A-Z]+$/,大小写混合
pattern:/^[A-Za-z]+$/,多个8位数字格式(yyyyMMdd)并以逗号隔开
pattern:/^\d{8}(\,\d{8})*$/,数字加英文，不包含特殊字符
pattern:/^[a-zA-Z0-9]+$/,前两位是数字后一位是英文
pattern:/^\d{2}[a-zA-Z]+$/,密码校验（6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种）
pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,中文校验
pattern:/^[\u0391-\uFFE5A-Za-z]+$/,到此，关于“vue中的rules表单验证怎么实现”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
