精华内容
下载资源
问答
  • 针对el-table中每一行输入框进行表单验证(校验非空以及重复值等) 最近遇到一个需求,针对于一个表格,可以点击增加按钮在表格插入输入框,输入相应值点击确定以增加表格一行,需要对表格里输入框进行...

    针对el-table中每一行的输入框进行表单验证(校验非空以及重复的值等)

    最近遇到一个需求,针对于一个表格,可以点击增加按钮在表格插入输入框,输入相应的值点击确定以增加表格的一行,需要对表格里的输入框进行表单校验,以及确定的提交校验。大概效果图如下:
    在这里插入图片描述
    具体思路:1、由于确定按钮的校验是针对每一行的表单,所以el-form的ref值需要为动态的值,每次确定的校验也只校验当前行的结果。2、对于是否存在重复的值的校验,需要将当前正处于编辑状态的行与其他的行数据进行匹配,所以在自定义的校验函数里需要传入当前行的信息进行判断。
    代码如下:

    <template>
      <div class="formData">
          <el-table :data="list" style="width: 100%">
            <el-table-column prop="key" label="键" min-width="180">
              <template slot-scope="{row}">
                <div v-if="!row.isModified">
                  {{row.key}}
                </div>
                <el-form 
                	v-else
                	:ref="'keyForm'+row.id" 
                	label-width="0px" 
                	:class="(row.isKeyValid || row.isValueValid) ? 'demo-ruleForm' : '' "  
                	:model="row"
                >
                  <el-form-item 
                  	prop="key" 
                  	:rules="[{ validator: validateKey, trigger: ['blur','change'], id: row.id }]"
                  >
                    <el-input v-model="row.key" placeholder="请输入内容"></el-input>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column prop="value" label="值" min-width="180">
              <template slot-scope="{row}">
                <div v-if="!row.isModified">
                  {{row.value}}
                </div>
                <el-form 
                	:ref="'valueForm'+row.id" 
                	label-width="0px" 
                	:class="(row.isKeyValid || row.isValueValid) ? 'demo-ruleForm' : '' " 
                	v-else 
                	:model="row"
                >
                  <el-form-item 
                  	prop="value" 
                  	:rules="[{ validator: validateValue, trigger: ['blur','change'], id: row.id }]"
                  >
                    <el-input v-model="row.value" placeholder="请输入内容"></el-input>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="{row}">
                <div v-if="!row.isModified">
                  <el-button type="text" size="small" @click="deleteKey(row.id)">删除</el-button>
                  <el-button type="text" size="small" @click="editKey(row.id)">编辑</el-button>
                </div>
                <div v-else>
                  <el-button type="text" size="small" @click="confirm(row.id)">确认</el-button>
                  <el-button type="text" size="small" @click="cancel(row.id)">取消</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        <el-button @click="addKey">增加</el-button>
      </div>
    </template>
    
    <script>
    export default {
      name: "formData",
      data() {
        return {
          list: [
            {
              key: "vue",
              value: "2.21",
              isModified: false,
              isKeyValid: false,
              isValueValid: false,
              id: 0
            },
            {
              key: "react",
              value: "16.2",
              isModified: false,
              isKeyValid: false,
              isValueValid: false,
              id: 1
            }
          ]
        };
      },
      computed: {
        existKeys() {
        //过滤出已经存在的key
          return this.list.filter( item => !item.isModified ).map(item => item.key)
        },
        existValues() {
        //过滤出已经存在的value
          return this.list.filter( item => !item.isModified ).map(item => item.value)
        }
      },
      methods: {
        deleteKey(index) {
          this.list.splice(index, 1)
        },
        editKey(index) {
          this.list[index].isModified = true
        },
        addKey() {
          this.list.push(
            {
              key: "",
              value: "",
              isModified: true, //切换编辑状态的标志位
              isKeyValid: false, //判断Key的校验结果
              isValueValid: false,	//判断value的校验结果
              id: this.list.length
            }
          )
        },
        promiseValidate(key) {
          return new Promise((resolve, reject) => {
            try {
              this.$refs[key].validate(isValid => {
                resolve(isValid)
              })
            } catch (err) {
              reject(err)
            }
          })
        },
        async confirm(index) {
          const validates = await Promise.all([ 
          	this.promiseValidate("keyForm" + index), 		
          	this.promiseValidate("valueForm" + index) 
          ])
          if(validates.every(item => item)) {
            this.list[index].isModified = false;
          }
        },
        validateKey(rule, value, callback) {
          if (value === '') {
            this.list[rule.id].isKeyValid = true
            callback(new Error('请输入Key'));
          } else if ( this.existKeys.includes(value) ) {
            this.list[rule.id].isKeyValid = true
            callback(new Error('Key的值已经重复'));
          } else {
            callback();
          }
        },
        validateValue(rule, value, callback) {
          if (value === '') {
            this.list[rule.id].isValueValid = true
            callback(new Error('请输入Value'));
          } else if ( this.existValues.includes(value) ) {
            this.list[rule.id].isValueValid = true
            callback(new Error('value的值已经重复'));
          } else {
            callback();
          }
        }
      }
    };
    </script>
    
    <style>
      .formData {
        padding: 20px;
      }
      .el-form-item {
        margin-bottom: 0;
      }
      .demo-ruleForm {
        margin: 20px 0;
      }
    </style>
    
    

    关键代码解析:

    1. 绑定动态样式
     :class="(row.isKeyValid || row.isValueValid) ? 'demo-ruleForm' : '' " 
    

    当触发校验错误结果文字提示的时候,可能会只出现输入框边框变红,看不到文字提示信息,如下图
    在这里插入图片描述
    这时只需要给el-form一个向下的margin值即可将文字展示出来,所以通过key与value的校验结果动态绑定这个class,当校验结果都正确,则表格行的高度恢复正常即可。

    1. 绑定动态的ref
    :ref="'keyForm'+row.id" 
    

    确认按钮的校验都是通过ref来进行校验,所以每一行的ref都应该不同,此处直接拼接上行的id,确定的时候传入行的id即可只校验当前行的结果。

    1. 给rules传入当前行的参数校验重复的内容
    :rules="[{ validator: validateValue, trigger: ['blur','change'], id: row.id }]"
    

    此处主要是如何将行的信息传入自定义的校验函数中,当时尝试过改造validator函数,写法如下

    :rules="[{ validator: (rule, value, callback,row) => { validateValue(rule, value, callback.row) }]"
    

    但是这样不知为啥,在自定义的校验函数中无法拿到row的值,所以直接在rules中自定义一个属性即可获取当前行的信息,以判断当前行与其他行的关系,进行自定义校验。

    展开全文
  • 以及生成控件的大小控制,输入数据的验证等 有时根据选择不同的数据表,要生成不同的输入页面,这些数据表的结构各不相同,这时就要动态输出控件组成输入页面了,把这些表的结构放在一个专门的TYPE表里,如英文...

    ASP.NET动态生成输入页面,以及生成控件的大小控制,输入数据的验证等

            有时根据选择不同的数据表,要生成不同的输入页面,这些数据表的结构各不相同,这时就要动态输出控件组成输入页面了,把这些表的结构放在一个专门的TYPE表里,如中英文字段名称,类型,大小,中英文表名称等。
            首先在页面上放置一个TABLE控件,放置一个DropDownList控件,DropDownList绑定数据库中要生成输入页面的表名称。
        生成页面代码如下:
    cnn.open();
       int cellw;
       string type;
       string Sql =select CHINANAME,HOW,TYPE from Type where OWNER =' + DropDownList1.SelectedValue +';
       OleDbDataAdapter myDa =new OleDbDataAdapter();
       myDa.SelectCommand =new OleDbCommand(Sql,cnn);
       DataSet myDs =new DataSet();
       myDa.Fill(myDs,Type);
       for(int i=0; i<myDs.Tables[0].Rows.Count; i++)

     

    {
        TableRow newrow=new TableRow();
        TableCell newcell1=new TableCell();
        TableCell newcell2=new TableCell();
        TableCell newcell3=new TableCell();

     

        Label myLab =new Label();
        myLab.ID = Labe + i.ToString();
        myLab.Text = +myDs.Tables[0].Rows[i].ItemArray.GetValue(0).ToString()+:;
        myLab.EnableViewState =true;
        myLab.Width = 100;

        TextBox myTxt =new TextBox();
        myTxt.ID = Txt + i.ToString();
        myTxt.EnableViewState=true;
        type = myDs.Tables[0].Rows[i].ItemArray.GetValue(2).ToString();

        cellw = int.Parse(myDs.Tables[0].Rows[i].ItemArray.GetValue(1).ToString());
       
        if(cellw<=50)
        {
         myTxt.Height = 24;
         myTxt.Width = 400;
        }
        if(cellw>50&&cellw<=100)
        {
         myTxt.Height = 50;
         myTxt.Width = 400;
         myTxt.TextMode = TextBoxMode.MultiLine;
        }
        if(cellw>100&&cellw<=200)
        {
         myTxt.Height = 60;
         myTxt.Width = 400;
         myTxt.TextMode = TextBoxMode.MultiLine;
        }
        if(cellw>200&&cellw<=500)
        {
         myTxt.Height = 80;
         myTxt.Width = 400;
         myTxt.TextMode = TextBoxMode.MultiLine;
        }

        newcell1.Controls.Add(myLab);
        newrow.Cells.Add(newcell1);
        newcell2.Controls.Add(myTxt);
        newrow.Cells.Add(newcell2);

        if(type==decimal)
        {
         RegularExpressionValidator rev =new RegularExpressionValidator();
         rev.ID = rev + i.ToString();
         rev.ErrorMessage = 本行只能填写数字,请从新输入! ;
         rev.ControlToValidate = Txt+i.ToString()+;
         rev.ValidationExpression = @/d+(/./d+)?$;
         rev.Width = 250;
         newcell3.Controls.Add(rev);
         newrow.Cells.Add(newcell3);
        }

        Table1.Rows.Add(newrow);
       
       }
       myDs.Clear();
       cnn.Close();

       把生成页面输入的数据保存到数据库:
       string strsql =insert into +bm+ (;
       try
       {
        for(int i=0; i<myDs.Tables[0].Rows.Count; i++)
        {
         strsql = strsql + myDs.Tables[0].Rows[i].ItemArray.GetValue(1).ToString() +,;
        }
        strsql = strsql.Substring(0,strsql.Length-1) +) values (;
        for(int i=0; i<myDs.Tables[0].Rows.Count; i++)
        {
         TextBox myTxt = (TextBox)Table1.FindControl(Txt+i.ToString());
         strsql = strsql + ' + myTxt.Text.Replace(','')  + ',;
             }
        strsql = strsql.Substring(0,strsql.Length-1) +);

        OleDbCommand myCommand=new OleDbCommand(strsql,cnn);
        myCommand.ExecuteNonQuery();

       }
       catch
       {


       }

    展开全文
  • // validator 为自定义校验 ...数据" key="tableData"&gt; {getFieldDecorator('tableData', { rules: [ { required: true }, { validator: checkData, trigger: 'blu...

     

    // validator 为自定义校验
    <FormItem label="数据" key="tableData">
        {getFieldDecorator('tableData', {
             rules: [
             { required: true  },
             { validator: checkData, trigger: 'blur'}
             ],
             initialValue: sData.refTable,
            })(
              <Input style={{width: 260, marginLeft: 4}} onPressEnter={this.searchDs} />)}
    </FormItem>
    // 自定义校验方法, 输入框不能输入汉字
        const checkData =  (rule, value, callback) => {
          if (value) {
            if (/[\u4E00-\u9FA5]/g.test(value)||/^[0-9]+.?[0-9]*$/g.test(value)) {
              callback(new Error('只可输入字母、不能输入汉字!'));
            } else {
              callback(
                setFieldsValue({
                  // 自动转成大写
                  refTable: value.toUpperCase(),
                })
              );
            }
          }
          callback();
        };

     

    展开全文
  •  时间:2017-08-07    思路分析:当我点击添加的时候,第一步先验证验证通过后,才通过操作dom将数据添加到table表格中展示  1.先完成js验证 ...通过dom给table中添加我们输入的数据  -->
    <!DOCTYPE html>
    <html>
        <head>
            <!--
                作者:1102780712@qq.com
                时间:2017-08-07
                
                思路分析:当我点击添加的时候,第一步先验证,验证通过后,才通过操作dom将数据添加到table表格中展示
                1.先完成js验证
                2.通过dom给table中添加我们输入的数据
            -->
            
            <script type="text/javascript">
                function add(){
                    clearSpan();
                    //给定一个标识符
                    var flag = true;
                    //获取名称中的值,判断是否为空
                    var nameValue = document.getElementById("iname").value;
                    var priceValue = document.getElementById("iprice").value;
                    var countValue = document.getElementById("icount").value;
                    
                    //判断名称是否为空
                    if(nameValue == null || nameValue.trim()== "" ){
                        flag = false;//如果验证失败,第一:flag 设置为false 第二给span中给提示
                        document.getElementById("sname").innerHTML = "<font color='red'>不能为空</font>";
                    }
                    
                    //价格在30-60
                    if(!(priceValue >= 30 && priceValue <=60)){
                        flag = false;//如果验证失败,第一:flag 设置为false 第二给span中给提示
                        document.getElementById("sprice").innerHTML = "<font color='red'>价格必须在30-60之间</font>";
                    }
                    
                    //场次不能为空
                    if(countValue == null || countValue.trim()== ""  ){
                        flag = false;//如果验证失败,第一:flag 设置为false 第二给span中给提示
                        document.getElementById("scount").innerHTML = "<font color='red'>场次不能为空</font>";
                    }
                    
                    /*
                      思路:
                      我们调用add方法会返回一个boolean值,如果是true,则通过验证,
                      如果是false则没有通过验证;  通过验证的我们在table中才添加,不通过验证,我们不做任何事情,他本身有红色的错误提示
                 */
                    if(flag){
                    //1.创建tr
                    var tr = document.createElement("tr");
                    //2.创建4个td
                    var td1 = document.createElement("td");
                    td1.innerHTML= document.getElementById("iname").value;
                    var td2 = document.createElement("td");
                    td2.innerHTML= document.getElementById("iprice").value;
                    var td3 = document.createElement("td");
                    td3.innerHTML= document.getElementById("icount").value;
                    var td4 = document.createElement("td");
                    var date = new Date();
                    td4.innerHTML= date.toLocaleString();
                    
                    //把td放到父节点tr中
                    tr.appendChild(td1);
                    tr.appendChild(td2);
                    tr.appendChild(td3);
                    tr.appendChild(td4);
                    
                    //tr放到父节点table中
                    document.getElementById("tab").appendChild(tr);
                }
                }
                
                //清除span标签里面的数据
                function clearSpan(){
                        var arr = document.getElementsByTagName("span");
                        for(var i = 0; i < arr.length; i++){
                            arr[i].innerHTML = "";
                        }
                    }
                
                
                
                
                
            </script>
        </head>
        <body>
            <table align="center" >
                <tr>
                    <td>
                        名称:<input type="text" id="iname" name="uname" />
                        <span id="sname" ></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        价格:<input type="text" id="iprice" name="uprice" />
                        <span id="sprice"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                    场次:<input type="text" id="icount" name="ucount" />
                    <span id="scount"></span>
                    </td>
                    
                </tr>
                <tr align="center">
                    <td colspan="2">
                    <input type="button" value="添加" οnclick="add()"  />
                    </td>
                </tr>
                
            </table >
            
            <hr width="35%"/>
            <table align="center" width="30%" cellspacing="0" border="1px" id="tab">
                <tr>
                    <th>名称</th>
                    <th>价格</th>
                    <th>场次</th>
                    <th>日期</th>
                </tr>
            </table>
            
        </body>
    </html>

    展开全文
  • 但是并不确定一组方案有几个子方案,所以,这里我用JS进行添加删除子方案,并要对方案输入的正确性加以判断,并且通过json传输写入数据库,这里我们主要写如果添加删除一组子项目和如果给每个文本框添加验证。...
  • 行为:当用户输入ID后,会使用Ajax将信息提交到服务器上进行验证,如果此ID没有被人使用,则提示可以使用。如果被人使用了,则提示错误信息。 2 建立database和user表 并插入数据: create database mld;  create ...
  • 指定表格的数据源 dataSource 为一个数组,配置相关属性json; <template> <div> <span>本地测试引入表格组件库开发</span> <br /> <TableList border :options="options" ...
  • kylin sql查询验证

    千次阅读 2018-09-25 15:50:54
    SQL查询验证(Insight) ... beta版,SQL在cube无法找到的数据将不会重定向到Hive   SQL查询验证 选择窗口最上方的Insight标签,输入SQL语句查询上面步骤创建的Streaming Table,点击S...
  • 我想在页面提交前,验证里面的表单中的数据,但是不能完成验证,给点提示: *" pageEncoding="UTF-8"%> String path = request.getContextPath(); String basePath = request.getScheme() + "://" + ...
  • JAVA_API1.6文档(中文)

    万次下载 热门讨论 2010-04-12 13:31:34
    java.sql 提供使用 JavaTM 编程语言访问并处理存储在数据源(通常是一个关系数据库)中的数据的 API。 java.text 提供以与自然语言无关的方式来处理文本、日期、数字和消息的类和接口。 java.text.spi java.text ...
  • book_cover_reader 这是Tu Libro a Ciegas项目内部工具,用于使用Google Cloud Platform and Books API管理可用图书库存。 在Google Storage管理书籍照片 ...book_table:用于记录成功处理书籍
  • span3.innerHTML = "你输入的姓名有误,请检查后输入"; return false; } return true; } //验证昵称,不为空 function checknickname() { //获得昵称文本值 var nickname = document....
  • 什么是哈希哈希hash又称为散列、杂凑等,是将任意长度的输入通过散列...什么是哈希表哈希表hash table是为了将数据映射到数组某个位置,通过数组下标访问元素以提高数据的查询速度,这种查询平均期望时间复杂度...
  • JDBC中的SQL注入问题:

    2011-03-15 14:22:07
    JDBC中的SQL注入问题: SQL注入是利用某些系统没有对用户输入数据进行充分的验证的情况下,用户输入了恶意SQL命令,导致数据库完成了错误命令,或者导致数据库崩溃方法。 下面是一个实例: String sql = &...
  • 使ALV控件中的内容可编辑

    千次阅读 2011-11-08 12:14:38
    但是经常需要验证输入的数据,所以还是需要从事件开始谈起。 想使一列可以被编辑只需在field catalog把edit字段设为’X’即可。如果设置了可编辑的字段那么alv便会添加相应的编辑按钮。如果不需要这些按钮那么...
  • c#连接sql 2014登录界面及密码验证

    千次阅读 2017-06-01 15:07:05
    直接上图才是王道:   看完了图,就来聊聊正事,如果不会做窗体控件的可以看看我上篇博客(有详细的介绍);...第一张图是图形登录界面框...连接数据库就必须要有自己的数据源,先设计account表create table acc
  • 但是经常需要验证输入的数据,所以还是需要从事件开始谈起。想使一列可以被编辑只需在field catalog把edit字段设为’X’即可。如果设置了可编辑的字段那么alv便会添加相应的编辑按钮。如果不需
  • //在DataGridView显示导入的数据 //dgv.Columns.Clear(); //dgv. = tb; for (int curRow = 1; curRow ; curRow++) { dgv.Rows.Add(1); for (int curCol = 0; curCol ; curCol++) { dgv.Rows[curRow - 1]...
  • JSp+ajax用户登录验证

    2013-08-14 20:09:21
    输入正确也是闪一下就重置页面.账号验证没问题,就是登录有问题,但是搞不定,大侠们看看吧! login.jsp [code="java"] <table border="0"> 角色类型: <td><select name=...
  • // 清除下拉框中的数据 function clearDivData(){ var tbody = document.getElementById("wordsListTbody"); var trs = tbody.getElementsByTagName("tr"); for(var i=trs.length-1;i>0;i--){ tbody...
  • 该库接受MySQL CREATE TABLE语句,并返回表示其定义表的数据结构。 支持MySQL语法。 该库不会尝试验证输入-目标是解构有效的CREATE TABLE语句。 安装 您可以使用composer安装此软件包。 要将其添加到您的composer....
  • 发现问题:前台输入一个 sql ,后台直接验证sql后数据库查询,将查询到的数据table的形式前端显示。 某用户通过不同条件获取到的数据字段数不相同,不完整。 查询原因:mybatis 默认情况下,配置文件setting 有...
  • //对得到的数据进行转码 byte [] bytes1 = name.getBytes("iso-8859-1"); String merchantName = new String(bytes1,"GBK"); String merchantCall = request.getParameter("call"); String ...
  • 工程师通过技术手段读取将数据都恢复为可以读的数据,数据恢复不是靠一两种软件就可以完成,往往需要数个工程师靠经验不同的方式才能恢复数据,当然数据库恢复还包括各种操作系统:除普通的WINDOWS外,还有Unix、...
  • Java 1.6 API 中文 New

    2013-10-26 14:08:22
    java.sql 提供使用 JavaTM 编程语言访问并处理存储在数据源(通常是一个关系数据库)中的数据的 API。 java.text 提供以与自然语言无关的方式来处理文本、日期、数字和消息的类和接口。 java.text.spi java.text ...
  • JavaAPI中文chm文档 part2

    2011-08-19 08:58:42
    java.sql 提供使用 JavaTM 编程语言访问并处理存储在数据源(通常是一个关系数据库)中的数据的 API。 java.text 提供以与自然语言无关的方式来处理文本、日期、数字和消息的类和接口。 java.text.spi java.text ...
  • JavaAPI1.6中文chm文档 part1

    热门讨论 2011-08-19 08:33:34
    java.sql 提供使用 JavaTM 编程语言访问并处理存储在数据源(通常是一个关系数据库)中的数据的 API。 java.text 提供以与自然语言无关的方式来处理文本、日期、数字和消息的类和接口。 java.text.spi java.text ...
  • MYSQL中文手册

    2013-03-11 21:21:34
    7.4.2. 使你的数据尽可能小 7.4.3. 列索引 7.4.4. 多列索引 7.4.5. MySQL如何使用索引 7.4.6. MyISAM键高速缓冲 7.4.7. MyISAM索引统计集合 7.4.8. MySQL如何计算打开的表 7.4.9. MySQL如何打开和关闭表 7.4...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 147
精华内容 58
关键字:

验证table中输入的数据