验证规则一些常用字段

required:是否为必须,用于验证字段内容是否为空

type:数据类型。默认是string。常见的类型有number,boolean,integer,float,array,date,email等

pattern:正则表达式

min和max:对于string和数组来说,min和max表示最小和最大的长度;对于数字number来说,表示限制值大小

trigger:触发验证的条件

validator:自定义校验

自定义校验的使用

var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
age: [
            { validator: checkAge, trigger: 'blur' }
          ]

rule, value, callback分别代表规则,要校验的值,回调函数

<br/>

正则表达式:

邮箱:

const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;

手机:

const regmobile = /^1[34578]\d{9}$/;

test 一个在字符串中测试是否匹配的RegExp方法,它返回 true 或 false。

regEmail.test(value)

用法:

var checkEmail = (rule, value, callback)=>{
  const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
  if(regEmail.test(value)){
    return callback();
  }
  callback(new Error('请输入合法的邮箱'))
}
email: [
    {
      required: true,
      message: '请输入邮箱',
      trigger: 'blur',
    },
    {
      validator: checkEmail,
      trigger: 'blur',
    },
  ],

小笔记:

ref

ref 被用来给元素或子组件注册引用信息, 引用信息将会注册在父组件的 $refs 对象上,如果是在普通的DOM元素上使用,引用指向的就是 DOM 元素,如果是在子组件上,引用就指向组件的实例。

$refs

$refs 是一个对象,持有已注册过 ref 的所有的子组件。

本人理解:ref = *** 代表这个组件取名这个 使用this.$refs.*** 可以获取到这个组件(个人理解)

通过axios发送网络请求

const { data: res } = await this.$http.post('users', this.addForm)

await是处理异步 {data:res}是解构赋值,将获取的结果的data值 赋值为res 直接访问res 就是访问获取对象里面的data属性