表单的数据校验规则及使用记录

async-validator 异步验证库

async-validator 是一个可以对数据进行异步校验的库。主要功能是校验数据是否合法，并且根据校验规则给出提示信息。
GitHub：async-validator
中文翻译：[https://www.cnblogs.com/cczlovexw/p/13719812.html(https://www.cnblogs.com/cczlovexw/p/13719812.html)

Install 安装

npm i async-validator -S

UI 组件中的 From 表单验证

<template>
	<!--
		ref="formValidateRef" : 重要, 需要通过ref获取form内部方法进行验证和重置  		  :model="formValidate" : 绑定表单数据
		:rules="ruleValidate" : 绑定表单验证规则
	-->
	 <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="Name" prop="name">
            <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
        </FormItem> 
        <el-form-item label="活动形式" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
		<FormItem>
            <Button type="primary" @click="handleSubmit('formValidateRef')">Submit</Button>
            <Button @click="handleReset('formValidateRef')" style="margin-left: 8px">Reset</Button>
        </FormItem>
     </Form>
</template>


<script>
  export default {
    data() {
      return {
      	// 数据
        ruleForm: {
          name: '',
          desc: ''
        },
        // 校验规则
        rules: {
          name: [
            { required: true, message: '请输入活动名称' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          desc: [
              { validator: validateDesc, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      // 自定义校验 And 异步校验
      validateDesc(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);
      },
      handleSubmit(formRef) {
      	// 方式一: 传入回调的方式
        this.$refs[formRef].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        
        // 方式二: Promise
        this.$refs[formName].validate()
        .then((valid) => {
          console.log("验证通过", valid) 
        })
        .catch((error) => {
          console.log('验证失败', error);
        })
      },
      handleReset(formRef) {
      	// 表单重置 
        this.$refs[formRef].resetFields();
      }
    }
  }
</script>

验证的一些常用的规则字段

required：是否为必填，用于验证字段内容是否为空
type：数据类型，默认是string。常见的类型有number、boolean、integer整数、float浮点数、array、date、email、array必须是数组，通过Array.isArray判断、object是对象且不为数组、method必须上function、enum值必须出现在enmu枚举值中、date合法的日期，使用Date判断、url、hex16进制等
枚举：{ type: 'enum', enum: ['admin', 'user', 'guest'] }
pattern：属性代表需要符合的正则
min和max：对于string和数组来说，min和max表示最小和最大的长度；对于数字number来说，表示限制值大小
trigger：触发验证的条件，blur、change
validator：自定义校验

const changeAge = (rule, value, callback) { 
	if(value) {
        callback()
	} else {
        callback(new Error('错误提示'))
	}
	// 其中value就是触发验证事件时当前输入的value，通过对value的监听，可以自己验证value是否符合要求。如果符合要求，直接callback()，即表示验证通过，可以继续进行下一步了；否则，验证不通过，调用callback(new Error('填写错误原因'))，这样验证错误后，错误的原因显示和之前一样。
}

transform：验证之前钩子函数，一般会配合pattern正则规则使用

{
    pattern: /^[a-z]+$/,
    transform(value) {
      return value.trim();
    },
    message: '请以字母开头'
}