欢迎光临~湖南智能应用科技有限公司-hniat.com
语言选择: 中文版 ∷  英文版

基础知识

Vue中rules表单验证(常用)

首先在表单中绑定rules,并在item中定义属性prop:

  1. <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
  2. <el-form-item label="活动名称" prop="name">
  3. <el-input v-model="ruleForm.name"></el-input>
  4. </el-form-item>
  5. </el-form>

在data或computed中编写rules规则:

  1. rules {
  2. name: [ { type: 'string',required: true,message: "名称必填", trigger: 'blur'}, {max: 30,message: "名称长度不能超过30位" }]
  3. }

其中name为prop名

type:类型

required:是否必选项(此栏是否为空)

message:报错信息

trigger:触发方式(

blur :失去焦点时进行验证
常用:对 input 输入框的验证

change :当值发生变化时进行验证
常用:下拉框select,日期选择框date-picker,复选框checkbox,单选框radio)

也可以直接用pattern进行匹配验证:

name: [ { pattern: 验证条件, required: true, message: "提示信息", trigger: "blur" }]

vue的rules中自带的校验规则和常用正则表达式校验

  1. rules: {
  2.     //验证非空和长度
  3.     name: [{
  4.         required: true,
  5.         message: "站点名称不能为空",
  6.         trigger: "blur"
  7.         },{
  8.         min: 3
  9.         max: 5
  10.         message: '长度在 3 到 5 个字符'
  11.         trigger: 'blur' 
  12.     }],
  13.     //验证数值
  14.     age: [{ 
  15.         type: 'number'
  16.         message: '年龄必须为数字值',
  17.         trigger: "blur"
  18.     }],
  19.     //验证日期
  20.     birthday:[{ 
  21.         type: 'date'
  22.         required: true
  23.         message: '请选择日期'
  24.         trigger: 'change' 
  25.     }],
  26.     //验证多选
  27.     habit: [{ 
  28.         type: 'array'
  29.         required: true
  30.         message: '请至少选择一个爱好'
  31.         trigger: 'change' 
  32.     }],
  33.     //验证邮箱
  34.     email: [{ 
  35.         type: 'email'
  36.         message: '请输入正确的邮箱地址'
  37.         trigger: ['blur', 'change'
  38.     }],
  39.     // 验证手机号
  40.     telephone: [{
  41.         pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  42.         message: "请输入正确的手机号码",
  43.         trigger: "blur"
  44.     }],
  45.     // 验证经度 整数部分为0-180小数部分为0到7位
  46.     longitude: [{
  47.         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)$/,
  48.         message: "整数部分为0-180,小数部分为0到7位",
  49.         trigger: "blur"
  50.     }],
  51.     // 验证维度 整数部分为0-90小数部分为0到7位
  52.     latitude: [{
  53.         pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/,
  54.         message: "整数部分为0-90,小数部分为0到7位",
  55.         trigger: "blur"
  56.     }]          
  57. }

前端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]+$/,

联系我们

联系人:徐经理

手机:13907330718

电话:0731-22222718

邮箱:hniatcom@163.com

地址: 湖南省株洲市石峰区联诚路79号轨道智谷2号倒班房6楼603室

关闭
用手机扫描二维码关闭
二维码