表单字段的校验

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/sinat_42338962/article/details/88052000

今天做了vue一个表单字段的校验
比如:我现在有一个输入框,我要判断该框必填

<Form  ref="importForm" >
	<Input v-model="name" clearable/>
</Form>

在这里我用到了一个标签叫做FormItem:

 <Form  ref="importForm" :rules="rule" >
	<FormItem prop="name">
		 <Input v-model="importSenderForm.name" clearable/>
	</FormItem>
</Form>

就相当于监控起来它包含的内容,然后我们只需要在data里边定义规则就可以啦

rule: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" }
        ]
      }
rule     : 这个名是和你表单上那个rules属性对应的
name     : 是FormItem 的prop属性绑定的名字
required : 属性规定必需在提交之前填写输入字段。如果使用该属性，则字段是必填（或必选）的。
message  : 是提示内容,就是当你监控这个框为空时,的placehoder
trigger  : 什么时候触发校验

获取监控内容:

that.$refs.importForm.validate(valid => {
        if (valid) {
        //当校验通过的时候,执行方法
          nameErr = 0;
        } else {
        //当校验不通过的时候,执行方法
          noticeWarning(that, "保存信息有误,请确保必填字段格式正确");
        }
      });
valid :是对所有规则校验的总结果,返回true或false

这就是一整套完整的校验了…