vue中的rules表单验证怎么实现

这篇文章主要介绍“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校验规则

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])\\.(\\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]+$/,

到此，关于“vue中的rules表单验证怎么实现”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注恰卡网网站，小编会继续努力为大家带来更多实用的文章！