精华内容
下载资源
问答
  • 表单验证table表格添加数据

    千次阅读 2018-01-07 16:57:31
     alert("输入信息有误!");  } else{  $("table").append("<tr><td><input type=\"checkbox\" name=\"ck\"/></td><td>"+uname+"</td><td>"+sex+"</td><td>"+bir+"</td><td>"+sheng+"-"+city+"</td><td>(this)\...
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            
            <script src="js/jquery-1.11.1.js"></script>
            <script>
                
                function chan(){
                    $("#cityz").siblings().remove();
                    
                    var shi=[["西二旗","海淀区"],["承德市","邯郸市"]];
                    var sheng=$("#sheng").val();
                    var city=$("#city");
                    for (var i=0;i<shi[sheng].length;i++) {
                        city.append("<option>"+shi[sheng][i]+"</option>");
                    }
                }
                
                function add () {
                    var uname=$("#uname").val();
                    var sex=$("#sex option:selected").text();
                    var bir=$("#bir").val();
                    var sheng=$("#sheng option:selected").text();
                    var city=$("#city option:selected").val();
                    if (uname.length<3 || uname.length>20 || sex=="" || bir=="" || sheng=="请选择" || city=="请选择") {
                        alert("输入信息有误!");
                    } else{
                        $("table").append("<tr><td><input type=\"checkbox\" name=\"ck\"/></td><td>"+uname+"</td><td>"+sex+"</td><td>"+bir+"</td><td>"+sheng+"-"+city+"</td><td><button οnclick=\"del(this)\">删除</button></td></tr>");
                    }
                }
                
                function del(e){
                    e.parentNode.parentNode.remove();
                }
                
                function delall(){
                    var checks=$(":checked[name=ck]");
                    if (checks.length==0) {
                        alert("请至少选择一条删除!");
                        return;
                    }
                    
                    for(var i in checks){
                        checks[i].parentNode.parentNode.remove();
                    }
                }
                
                function xuan(e){
                    var ckss=$("input[name=ck]");
                    for (var i in ckss) {
                        ckss[i].checked=e.checked;
                    }
                }
                
                function xuanall(){
                    var ckss=$("input[name=ck]")
                    for(var i in ckss) {
                        if (ckss[i].checked==false) {
                            ckss[i].checked=true;
                        } else{
                            ckss[i].checked=false;
                        }
                    }
                }
            </script>
        </head>
        
        <body>
            
            姓名:<input id="uname" />
            性别:<select id="sex"><option>男</option><option>女</option></select>
            生日:<input id="bir" type="date" />
            住址:<select id="sheng" οnchange="chan()">
                    <option>请选择</option>
                    <option value="0">北京</option>
                    <option value="1">河北</option>
                 </select>
                
                 <select id="city">
                     <option id="cityz">请选择</option>
                 </select><br />
                
            <button οnclick="add()">添加</button>
            <button οnclick="xuanall()">全选/反选</button>
            <button οnclick="delall()">批量删除</button>
            
            <table width="400" cellspacing="0" border="1">
                <tr style="background-color: #999999;">
                    <th><input type="checkbox" id="cks" οnchange="xuan(this)"/></th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>生日</th>
                    <th>住址</th>
                    <th>删除 </th>
                </tr>
                
            </table>
        </body>
    </html>


    展开全文
  • 在实际使用经常会遇到需要在From表单使用table表格进行表单提交,同时又需要对From表单的字段进行校验,效果如图所示: 这个校验,最关键的问题在于如何给el-form-item 动态绑定prop。 好了,话不多说直接...

    在实际使用中经常会遇到需要在From表单中使用table表格进行表单提交,同时又需要对From表单中的字段进行校验,效果如图所示:
    在这里插入图片描述
    这个校验中,最关键的问题在于如何给el-form-item 动态绑定prop。
    好了,话不多说直接上代码(html)

    <template>
     <div class="app-container">
       <div class="filter-container">
         <el-button type="primary" @click="init()" icon="el-icon-circle-plus">add</el-button>
       </div>
       <el-dialog title="表单Table" :visible.sync="dialogFormVisible">
         <el-form :model="fromData" ref="from">
           <el-table :data="fromData.domains">
             <el-table-column label="姓名">
               <template slot-scope="scope">
                 <el-form-item :prop="'domains.'+scope.$index+'.name'" :rules="fromaDataRules.name">
                   <el-input v-model="scope.row.name"></el-input>
                 </el-form-item>
               </template>
             </el-table-column>
             <el-table-column label="地址">
               <template slot-scope="scope">
                 <el-form-item :prop="'domains.'+scope.$index+'.desc'" :rules="fromaDataRules.desc">
                   <el-input v-model="scope.row.desc"></el-input>
                 </el-form-item>
               </template>
             </el-table-column>
           </el-table>
         </el-form>
         <el-button type="warning" @click="submit('from')">submit</el-button>
       </el-dialog>
     </div>
    </template>
    

    js代码如下:

    <script>
      export default {
        data() {
          return {
            dialogFormVisible:false,
            fromData:{
              domains:undefined
            },
            fromaDataRules:{
              name:[{ required: true, message: '请输入活动名称', trigger: 'blur' }],
              desc:[ { required: true, message: '请填写活动形式', trigger: 'blur' }]
            },
            domains:[],
          }
        },
        mounted(){
          this.initDomains()
        },
        methods:{
          initDomains(){
            this.domains=[
              {
                name: undefined,
                desc: undefined
              },
              {
                name:undefined,
                desc:undefined
              }
            ]
          },
          init(){
            this.dialogFormVisible = true
            this.$set(this.fromData,'domains',this.domains)
          },
          submit(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                alert('submit!');
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          }
        }
      }
    </script>
    

    上述代码中比较关键的部分有一下两点:
    1、:prop="‘domains.’+scope.$index+’.name’" ,用于动态绑定prop到el-form-item;

    2、this.$set(this.fromData,‘domains’,this.domains) ,用于为fromData设置domains这个节点。

    展开全文
  • 项目开发,经常会遇到在场景:对table表格的输入项字段进行校验,同时提交时整体校验,效果如图所示: Table: !!这个校验的实现,主要思路是:1.From表单嵌套使用table表格,用表单的校验机制实现校验; ...

    项目开发中,经常会遇到的场景:对table表格的输入项字段进行校验,同时提交时整体校验。

    这个坑真的爬了好久,几个需求做完了,校验也没实现,挫败!后来看到一个博主Element UI from实现校验的思路,觉得View UI也可以尝试下, 分享下实现过程。

    写了个简单的demo演示, 效果如图所示,Table:

    !!这个校验的实现,主要思路是:
    1. From表单中嵌套使用table表格,用表单的校验机制实现校验;

    2.  ivu-form-item 元素,绑定动态prop;

    html代码如下,本次项目里样式用了 View UI ,element其他,也可以尝试这个校验思路:

    <template>
      <div class="wrapper">
        <h3>Vue中  对Table表格中的输入项添加校验</h3>
        <Form :model="fromData" ref="tableFrom" >
          <Table  ref="myTable"  :columns="columns"  :data="fromData.list"  >
            <template slot='ip' slot-scope="{ row, index }">
                <FormItem :prop="'list.'+index+'.ip'" :rules="fromaRules.ip">
                  <Input v-model="fromData.list[index].ip"  placeholder="ip地址" style="width:250px;" />
                </FormItem>
            </template>
            <template slot='port' slot-scope="{ row, index }">
                <FormItem :prop="'list.'+index+'.port'" :rules="fromaRules.port">
                  <Input v-model="fromData.list[index].port"  placeholder="端口" style="width:250px;"/>
                </FormItem>
            </template>
          </Table>
        </Form>
        <!-- 提交按钮 -->
        <Button type="primary"   @click="submit">提交</Button>
         
      </div>
    </template>

    js代码如下:

    <script>
    export default {
      name:'',
      components:{},
      props:{},
      data(){
        return {
          fromData:{
            list:[]
          },
          list:[
            {name:'test',ip:'',port:''},
            {name:'test1',ip:'',port:''},
            {name:'test2',ip:'',port:''}
          ],
          columns:[
             {
                title: '名称',
                key: 'name',
                width:200
              },
             {
                title: 'ip地址',
                key: 'ip',
                slot: 'ip',
              },
              {
                title: '端口',
                key: 'port',
                slot: 'port',
              }
          ],
          fromaRules:{
            port:[
              { required: true, transform: value => value ? value.trim() : '', message: '端口不能为空', trigger: 'blur' }
            ],
            ip: [
              { required: true, transform: value => value ? value.trim() : '', type: 'string', message: 'IP地址不能为空', trigger: 'blur' },
            ]
          }
        }
      },
      mounted(){
         this.$set(this.fromData,'list',this.list)
      },
      methods:{
        submit(){
            this.$refs['tableFrom'].validate((valid) => {
              if (valid) {
                 //执行保存方法
                 console.log(this.fromData.list)
              }
            })
        }
      }
    }
    </script>

    !!!代码中比较关键的部分:

    1. :prop="'list.'+index+'.ip'" ,用于动态绑定prop到ivu-form-item 元素 ;

    2.:rules="fromaRules.ip",添加校验规则;

    3. this.$set(this.fromData,'list',this.list),用于为fromData设置list这个节点。

    如果有更好的实现思路,欢迎一起探讨学习!

     

    展开全文
  • iview中table,校验输入值并且计算

    千次阅读 2019-03-08 16:55:00
  • 昨天写了个table中放入input的小例子,今天闲暇之余又琢磨了下带有验证的。 主要注意两个地方就行,动态生成 el-form-item的 prop 以及给el-form-item设置rules属性。 话不多说,直接上代码! html部分 <el-form ...
  • 针对el-table中每一行的输入框进行表单验证(校验非空以及重复的值等) 最近遇到一个需求,针对于一个表格,可以点击增加按钮在表格插入输入框,输入相应的值点击确定以增加表格的一行,需要对表格里的输入框进行...
  • element ui在table中放入input且实现验证

    万次阅读 2018-12-29 12:47:16
    <template> <div class="app-container" style="overflow: auto;"> <el-table :data="list" size="small" element-loading-text="Loading" border highlight-c...
  • SPSS篇—回归分析

    万次阅读 多人点赞 2019-08-20 09:29:06
    之前跟大家介绍了一款做数据分析的利器—SPSS,不知道大家...上图就是本次需要进行回归分析的数据,之前有跟大家说过,SPSS Statistics的界面跟EXCEL是相似的,如果数据量比较小的时候我们可以直接输入数据视图...
  • vxe-table border show-overflow ref="xTable" --------------------------------------------------------------------------------------------可根据此变量控制表格内容 class="vxe-table-element" height=...
  • HTML5-输入验证

    千次阅读 2016-08-22 14:40:29
    下述内容主要讲述了《HTML5权威指南》第14章关于“其他表单元素及输入验证”。 一、使用其他表单元素1. 生成选项列表select元素可以用来生成一个选项列表供用户选择。 size属性用来设定要显示给用户的选项数目; ...
  • Spring MVC框架的数据验证

    千次阅读 2019-03-24 10:25:47
    在Spring MVC框架有两种方法可以验证输入数据,一种是利用Spring自带的验证框架,另一种是利用JSR 303实现。在这里只介绍Spring的验证体系的使用。 数据验证分为客户端验证和服务端验证,客户端验证主要是过滤正常...
  • 测试开发笔记

    万次阅读 多人点赞 2019-11-14 17:11:58
    测试开发笔记 第一章 测试基础 7 什么是软件测试: 7 ★软件测试的目的、意义:(怎么做好软件测试) 7 3.软件生命周期: 7 ...5.各阶段输入、输出标准以及入口、出口准则:(测试阶段过程要素) 1...
  • 在实际使用经常会遇到需要在Form表单使用table表格进行表单提交,同时又需要对table的字段进行校验,效果如图所示: 这个校验,最关键的问题在于如何给el-form-item 动态绑定prop。 :prop="'tableData.' + ...
  • 最近录制的ajax从基础到实战的视频,包含原生ajax jquery的ajax 以及ajax接口获取数据等 Ajax前端开发、项目实战、从零基础到精通、接口数据调用-学习视频教程-腾讯课堂 红色为常见面试题 =======================...
  • 数据库面试

    千次阅读 多人点赞 2019-02-13 09:03:42
    数据定义DDL:Create Table,Alter Table,Drop Table, Create/Drop Index等 数据操纵DML:Select ,insert,update,delete, 数据控制DCL:grant,revoke 2. 内联接,外联接区别? 内连接是保证两个表所有的行都要满足...
  • VueForm表单校验以及对Table的校验

    千次阅读 2019-12-13 14:59:58
    this.$message.error('表单验证不通过,请检查核对相应字段') } }) }, 二、对Table的校验 对Table的校验,仍然需要包裹一个 标签,最关键的问题在于如何给 动态绑定prop <el-table :key="tableKey...
  • Bootstrap Table数据表格的使用指南

    千次阅读 多人点赞 2020-02-03 18:22:29
    对表格记录的查询、分页、排序等处理是非常常见的,在Web开发,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,Bootstrap-Table是一款非常好用的开源表格插件,在很多项目广泛的应用。...
  • Bootstrapinput输入框完整数据验证

    千次阅读 2020-03-18 19:43:33
    输入中文、数字、英文: <input οnkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')"> 输入数字和字母: <input onKeyUp="value=value.replace(/[\W]/g,'')"> 输入大小写字母、数字、下划线: ...
  • post调用后台接口 呈现效果: ...< template>... return 定义 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item la
  • C#基础教程-c#实例教程,适合初学者

    万次阅读 多人点赞 2016-08-22 11:13:24
    ReadLine表示从输入设备输入数据,WriteLine则用于在输出设备上输出数据。 如果在电脑上安装了Visual Studio.Net,则可以在集成开发环境直接选择快捷键或菜单命令编译并执行源文件。如果您不具备这个条件,那么...
  • 【数据库学习】数据库总结

    万次阅读 多人点赞 2018-07-26 13:26:41
    1,数据库 1)概念 ...数据库是长期存储在...(数据的最小存取单位是数据项) ②数据库系统的特点 数据结构化 数据的共享性,冗余度,易扩充 数据独立性高 逻辑数据独立性(logical data...
  • 因为很多使用layui插件做的表格都需要用到layui的表格编辑事件,但是编辑事件是可以随意输入值的,但是如果当我们的字段为数量的时候,又需要获取到数量传进控制器进行数据处理的时候,而控制器接收的数量为int类型...
  • 测试开发需要学习的知识结构

    万次阅读 多人点赞 2018-04-12 10:40:58
    努力成为一个优秀的测试开发从业者,加油!... - 假装在测试的回答 - 知乎白盒与黑盒测试什么区分1、黑盒测试 黑盒测试也称功能测试或数据驱动测试,它是在已知产品所应具有的功能,通过测试来检...
  • laravel 数据验证规则

    千次阅读 2019-06-20 15:19:00
    1.已支持的 return [ 'accepted' => '必须为yes,on,1,true', 'active_url' => '是否是一个合法的url,基于PHP的checkdnsrr函数,因此也... '验证字段必须是给定日期后的值,比如required|date|after:tomo...
  • antd pro项目遇到弹框嵌套表单的需求,并获取其中的数据, 在官方提供的Form表单API有一个出发表单验证的方法validateFields 触发表单验证 类型: (nameList?: NamePath[]) => Promise 如下为项目使用 //此为...
  • 我们要想使django的表单验证前端传入的数据是否正确,我们需要用到Django的forms。 常用的Field: 使用Field可以是对数据验证的第一步。你期望这个提交上来的数据是什么类型,那么就使用什么类型的Field。 1. ...
  • 基于51单片机的RFID智能门禁系统

    万次阅读 多人点赞 2019-04-20 22:47:57
    当射频卡进入读卡器接受范围后,如果接收到读卡器发出的射频信号,就能凭借产生的感应电流所获得的能量发送出存储在卡片的信息,通过读卡器的处理,将信息送至信息管理系统进行有关数据处理。 b.MFRC522射频模块...
  • 表格输入信息很常见,因此表格的验证也很必要,el-form提供了输入框验证.可以和表格结合起来用,使用效果 HTML: <div class="table_box"> <el-button type="primary" class="submit_btn" @...
  • 2021【软件测试】面试题合集大放送

    万次阅读 多人点赞 2019-09-10 18:04:37
    又到了金九银十跳槽求职旺季。...以下是“大佬”本人从乐搏学院VIP学员面试经验收集的,然后分门别类整理了这套面试题,很具备参考性,毕竟都是企业真实面试题目。 接下来,针对以下知识类型列出具体的面试点(其中...
  • // validator 为自定义校验 ...数据" key="tableData"&gt; {getFieldDecorator('tableData', { rules: [ { required: true }, { validator: checkData, trigger: 'blu...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 115,413
精华内容 46,165
关键字:

验证table中输入的数据