elementui表单验证

• 使用方法：

• • 首先在表单中绑定rules，并在item中定义属性prop：

<el-form class="login-container" :rules="rules">
    <h1 class="title">用户登录</h1>
    <el-form-item label="" prop="username">
        <el-input type="text" v-model="user.username" placeholder="登录账号" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="" prop="password">
        <el-input type="password" v-model="user.password" placeholder="登录密码" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
    </el-form-item>
    <el-row style="text-align: center;margin-top:-10px">
        <el-link type="primary">忘记密码</el-link>
        <el-link type="primary" @click="gotoRegister()">用户注册</el-link>
    </el-row>
</el-form>

• • 在data或computed中编写rules规则：

rules:{
    username:[
        { required:true,message:'登录名不能为空',trigger:'blur' },
        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
    ],
    password:[
        { required:true,message:'密码不能为空',trigger:'blur' },
        { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'}
    ]
}

 

其中key为prop名           

type：类型（可选）           

required：是否必选项（此栏是否为空）           

message：报错信息           

trigger：触发方式（               

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

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

• • vue的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"
  }],
  //验证两次输入密码是否一致
  checkPass:[
      // { pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,message:'6-20位英文字母、数字或者符号',trigger:'blur' },
      { required:true,pattern:/^[a-zA-Z0-9]{6,20}$/,message:'6-20位英文字母、数字',trigger:'blur' },
      {
          validator: (rule, value, callback) => {
              if (value === '') {
                  callback(new Error('请再次输入密码'))
              } else if (value !== this.user.password) {
                  callback(new Error('两次输入密码不一致!'))
              } else {
                  callback()
              }
          },
          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]+$/,