表单字段的校验

逃离我推掉我的手 2022-03-15 06:36 326阅读 0赞

今天做了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

这就是一整套完整的校验了…  
![哈哈哈][006JLln2ly1g0kzyqpuuyj30zk0lo7az.jpg]

[006JLln2ly1g0kzyqpuuyj30zk0lo7az.jpg]: /images/20220315/24eb5e96302c4a4b9b4add142b7329bc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，326人围观）

还没有评论，来说两句吧...

相关阅读

相关隐藏表单字段_像Pro一样构建OctoberCMS表单字段小部件

隐藏表单字段 ![OctoberCMS logo][] Creating your business website with any CMS requires you t

川长思鸟来/ 2022年12月03日 09:27/ 0 赞/ 137 阅读

相关 JS_表单字段验证常用正则表达式

function checkPhone(phone){ if(!(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567

拼搏现实的明天。/ 2022年10月20日 13:52/ 0 赞/ 120 阅读

相关 html特定字段表紅,如何通过HTML访问Django表单字段

添加name并传递modelname，像这样的变化. 然后提交你的表格。在例如，假设注册表格：表单.py， ^\{pr2\}$ 视图.py，def signu

ゞ浴缸里的玫瑰/ 2022年10月05日 12:48/ 0 赞/ 103 阅读

相关 django模型字段和表单字段对应

<table style="border-spacing:0px;max-width:100%;background-color:rgb(238,238,238);width:

男娘i/ 2022年05月28日 09:23/ 0 赞/ 134 阅读

相关 FormData表单字段数据对象

FormData接口提供了一种方法，可以轻松地构造一组表示表单字段及其值的键/值对，然后使用xmlsend.send()方法轻松地发送这些值。如果将编码类型设置为“多部分/表单

ゝ一世哀愁。/ 2022年05月13日 09:12/ 0 赞/ 171 阅读

相关 vue如何使用rules对表单字段进行校验

基于element-ui 1、在代码中，添加属性：rules <el-form :model="form" :rules="rules" ref="form" la

蔚落/ 2022年05月12日 11:54/ 0 赞/ 195 阅读

相关在vue中使用rules对表单字段进行验证

> vue 中表单字段验证的写法和方式有多种，本博客介绍三种较为常用的验证方式。 1. 写在 data 中验证表单内容  <e

偏执的太偏执、/ 2022年03月29日 02:46/ 0 赞/ 872 阅读

相关后台单字段修改，更新

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

╰半橙微兮°/ 2022年03月21日 13:38/ 0 赞/ 143 阅读

相关表单字段的校验

今天做了vue一个表单字段的校验比如:我现在有一个输入框,我要判断该框必填 <Form ref="importForm" > <Input v-mo

逃离我推掉我的手/ 2022年03月15日 06:36/ 0 赞/ 327 阅读

相关 vuex 表单字段映射工具 vuex-map-fields

vuex在处理表单的时候显得很麻烦，要一个字段一个字段的去写set和get还有mutation，字段多的话带来的工作量将是非常巨大的。vuex-map-fields

╰半夏微凉°/ 2021年10月01日 04:44/ 0 赞/ 344 阅读