手机号/用户名/密码表单校验规则

思路(按el-form中表单的验证方式：):

(1)在表单组件上添加三项：ref, rules, model;
(2)在表单项组件上添加一项： prop

举例

1.在组件的data里 声明验证规则; 2.在表单验证规则里使用;

     <el-form
        ref="userForm"
        :model="userInfo"
        :rules="rules"
        label-width="120px"
        style="margin-left: 120px; margin-top: 30px"
      >

    export default {
      data() {
          //声明验证规则
        const validateMobile = (rule, value, callback) => {
          if (! /^1[3-9]\d{9}$/.test(value)) {
            callback(new Error('请输入正确的手机号'))
          } else {
            callback()
          }
        }
        
        return {
          userInfo: {
            mobile: '',
            username: '',
            password:''
          },
          
          rules:{
              //手机号规则
            mobile: [{ required: true, trigger: 'blur', validator: validateMobile }],
            //密码规则
            password: [
                { required: true, trigger: 'blur', message: '密码不能为空' }, 
                { min: 6, max: 16, message: '密码的长度在6-16位之间 ', trigger: 'blur'}
              ] ,
            //用户名规则
             username:[{required:true,message:'用户名不能为空',trigger:'blur'}]
          }
        }
      }