精华内容
下载资源
问答
  • vue中post请求使用form表单格式发送数据
    万次阅读
    2019-04-28 13:53:43

    这一篇是原生vuepost请求使用form表单格式发送数据,里面还掺杂了一些关于算签名业务。可能看起来比较繁琐,不过注释还写的挺全的,可以供大家参考。
    html:

    <div id="app">
        用户名:<input type="text" style="width: 200px" name="username" v-model="user.username"/>
        密  码:<input type="password" style="width: 200px" name="password" v-model="user.password"/>
        <!--<input type="submit" name="submit" value="登录"/>-->
        <button style="width: 50px;height: 30px;" @click="login()">登录</button>
    </div>
    

    js:

    new Vue({
        el: '#app',
        data: {
            user: {},
            result: {}
        },
        // 发送post请求时,不能发送 Content-Type: application/json;charset=UTF-8 这个格式,因为后台过滤器要进行处理签名
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',   // 设置请求头为form表单格式
            // 'Content-Type': 'application/json;charset=UTF-8'
        },
        methods: {
            login: function () {
                var _this = this;
                axios({
                    method: 'post',
                    url: '/noauth/login' + getSign("username=" + _this.user.username + "&password=" + _this.user.password),
                    data: {
                        username: _this.user.username,
                        password: _this.user.password
                    },
                    transformRequest: [function (data) {  // 将{username:111,password:111} 转成 username=111&password=111
                        var ret = '';
                        for (var it in data) {
                            // 如果要发送中文 编码
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret.substring(0,ret.length-1)
                    }],
                }).then(function (response) {
                 	// 拿到data
                    _this.result = response.data;
                    console.info(_this.result.message);
    				// 将验证信息放入缓存                
    				localStorage.setItem("sbkjauth",response.headers["sbkjauth"]);
                    if (_this.result.status == "0201") {
                        var url = "/html/index.html";
                        axios({
                            method:"get",
                            url:url+getSign(),
                            headers:{
                                "sbkjauth":localStorage.getItem("sbkjauth")
                            },
                        }).then(function (resp) {
                            console.info(resp.data);
                        })
                    }
                }).catch(function (reason) {
                    console.error(reason)
                })
            },
        created: function () {  
            console.info("页面尚未加载完成!")
        }
    });
    

    其中里面的getSign(“username=” + _this.user.username + “&password=” + _this.user.password),代表的是算签名,会在下一篇博文讲。
    如果发现什么问题请留言,毕竟代码都是人写的难免会出错。

    更多相关内容
  • 现在基本项目都以框架为主react和vue之类,这也就导致很多人对原生js的操作变得生疏,甚至有些工作几年的前端...// 获取制定form中的所有表单元素 const getFormElements = (formId) => { const form = document

    现在基本项目都以框架为主react和vue之类,这也就导致很多人对原生js的操作变得生疏,甚至有些工作几年的前端基础还是一知半解,问起框架来还能侃侃而谈,面对原生js就吞吞吐吐了。
    优秀的框架总能吸引一大堆爱好者的追随,但是原生的魅力也需要我们来了解,框架固然好用但是基础知识也要跟上才行,同样是话不多说直接上代码:
    serialize.js

    // 获取制定form中的所有表单元素
    const getFormElements = (formId) => {
      const form = document.getElementById(formId);
      const tagElements = form.querySelectorAll('input,select,textarea');
      if (tagElements.length > 0) {
        return Array.from(tagElements);
      }
      try {
        console.error(new Error('当前form没有表单内容,请检查后再试'));
      } catch (error) {
        console.log(error);
      }
      return false;
    }
    // 获取单选多选 选择的值
    const getInputSelector = (ele) => {
      if (ele.checked) {
        return [ele.name, ele.value];
      }
    }
    // 获取input数据
    const getInputData = (ele) => {
      const type = ele.type.toLowerCase();
      if (['text', 'password', 'number', 'file', 'color', 'hidden', 'date','search','email','tel','url']) {
        return [ele.name, ele.value];
      } else if (['checkbox', 'radio'].includes(type)) {
        return getInputSelector(ele);
      }
      return false;
    }
    // 整理数据
    const serializeFormData = (ele) => {
      let result = [];
      if (['select', 'textarea'].includes(ele.tagName.toLowerCase())) {
        result = [ele.name, ele.value];
      } else {
        result = getInputData(ele);
      }
      if (result && result[0]) {
        return result;
      }
      return false;
    }
    // 获取数据方法
    const serializeForm = (formId) => {
      const eles = getFormElements(formId);
      const results = {};
      if (!eles) return results;
      for (let i = 0; i < eles.length; i++) {
        const tempData = serializeFormData(eles[i]);
        if (tempData) {
          const key = tempData[0];
          const value = tempData[1];
          if (results[key]) {
            if (typeof results[key] === 'object') {
              results[key].push(value);
            } else {
              results[key] = [results[key], value];
            }
          } else {
            results[key] = value;
          }
        }
      }
      return results;
    }
    

    使用例子html代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>原生js获取form数据</title>
      <style>
        pre {
          outline: 1px solid #ccc;
          padding: 5px;
          margin: 5px;
          background-color: #f5f5f5;
        }
    
        .string {
          color: green;
        }
    
        .number {
          color: darkorange;
        }
    
        .boolean {
          color: blue;
        }
    
        .null {
          color: magenta;
        }
    
        .key {
          color: red;
        }
      </style>
    </head>
    
    <body>
      <form id="loginForm">
        用户名1:
        <input type="text" name="username"><br />
        用户名2:
        <input type="text" name=""><br />
        密码:
        <input type="password" name="password"><br />
        性别:
        <label><input type="radio" name="sex" value="nan"></label>
        <label><input type="radio" name="sex" value="nv"></label><br />
        爱好:
        <label><input type="checkbox" name="hobby" value="baseball">篮球</label>
        <label><input type="checkbox" name="hobby" value="football">足球</label>
        <label><input type="checkbox" name="hobby" value="pingbang">乒乓球</label><br />
        城市:
        <select name="city">
          <option value="zhengzhou">郑州</option>
          <option value="luoyang">洛阳</option>
          <option value="nanjing">南京</option>
          <option value="shanghai">上海</option>
        </select><br />
        生日:
        <input type="date" name="birthday"><br />
        喜欢颜色:
        <input type="color" name="color"><br />
        上传照片:
        <input type="file" name="file"><br />
        内容:
        <textarea name="content" cols="30" rows="10"></textarea>
        <br />
        <!-- 隐藏信息 -->
        <input type="hidden" name="phone" value="12345678901">
        <input type="button" onclick="submitFormData()" value="提交">
      </form>
      <!--  -->
      form表单内容:
      <pre id="formData">
      </pre>
    </body>
    <script src="./serializeForm.js"></script>
    <script>
      //高亮美化JSON输出展示
      function syntaxHighlight(json) {
        // 带锁进格式化JSON
        if (typeof json != 'string') {
          json = JSON.stringify(json, undefined, 2);
        }
        // 给JSON字符串增加展示样式
        json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
          var cls = 'number';
          if (/^"/.test(match)) {
            if (/:$/.test(match)) {
              cls = 'key';
            } else {
              cls = 'string';
            }
          } else if (/true|false/.test(match)) {
            cls = 'boolean';
          } else if (/null/.test(match)) {
            cls = 'null';
          }
          return '<span class="' + cls + '">' + match + '</span>';
        });
      }
      function submitFormData() {
        const formData = serializeForm('loginForm');
        console.log('当前form数据信息', formData);
        if (formData) {
          document.getElementById('formData').innerHTML = syntaxHighlight(formData);
        }
      }
    </script>
    
    </html>
    

    高亮美化输出JSON

    // 高亮美化JSON输出展示
      function syntaxHighlight(json) {
        // 带锁进格式化JSON
        if (typeof json != 'string') {
          json = JSON.stringify(json, undefined, 2);
        }
        // 给JSON字符串增加展示样式
        json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
          var cls = 'number';
          if (/^"/.test(match)) {
            if (/:$/.test(match)) {
              cls = 'key';
            } else {
              cls = 'string';
            }
          } else if (/true|false/.test(match)) {
            cls = 'boolean';
          } else if (/null/.test(match)) {
            cls = 'null';
          }
          return '<span class="' + cls + '">' + match + '</span>';
        });
      }
    

    如果不想美化,只用这一行就好

    JSON.stringify(json, undefined, 2);
    

    我这博客的特点是,废话少信息都在代码里,如有疑问可以留言,也可以到QQ群一起探讨:
    QQ群1: 657011407, QQ群2: 492593055,也可以到微信找我 shenzhipeng1023

    展开全文
  • 主要介绍了vue表单验证你真的会了吗?vue表单验证(form)validate,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue实战:form表单验证

    2020-12-18 13:38:52
    Form组件提供了表单验证功能,只要通过rules属性传入1约定的验证规则,并将Form-Item的prop属性设置为需要校验的字段名即可。 1.验证长度为3-5的字符串 <template> <div> <el-form :model=...

    学习Element-UI自带表单验证功能

    Form组件提供了表单验证功能,只要通过rules属性传入1约定的验证规则,并将Form-Item的prop属性设置为需要校验的字段名即可。

    1.验证长度为3-5的字符串

    <template>
      <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item label="name:" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <script>
    export default {
      data(){
        return{
            ruleForm:{
                  name:'',
            },
             rules: {
             name:[
               {required:true,message:'请输入部门名称',trigger:'blur'},
               {min:3,max:5,message:"长度输入到3-5个字符",trigger:'blur'}
             ]
           }
        }
      }
    }
    </script>

     

    2.验证手机号

     

    3.验证是否为0或1

     

     

    展开全文
  • 为el-form表单添加:rules 在data中定义规则 将定义的规则绑定在el-form-item 代码如下: <!--登录表单区域--> <el model=loginForm label-width=0px class=login_form rules=loginFormRules> <!--...
  • 本篇文章主要介绍了Vue from-validate 表单验证的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 使用Vue动态生成form表单

    千次阅读 2018-04-25 18:23:00
    form-create 表单生成器具有数据收集、校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,...
    form-create 表单生成器

    具有数据收集、校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,文件/图片上传等功能组件。

    详细查看: github地址 npm地址 文档地址

    如果对您有帮助,您可以在Github点右上角 "Star" 支持一下 谢谢!
    演示项目: 开源的高品质微信商城


     

    示例

    https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg

    1.2 版本重大更新

    • 内部结构优化
    • 新增 规则生成器$formCreate.maker
    • 新增 滑块、评分组件
    • 优化 文件上传组件
    • 修复 上传组件无法验证等问题

     

    安装

    npm install form-create

    OR

    git clone https://github.com/xaboy/form-create.git
    cd form-create
    npm install

    引入

    <!-- import Vue -->
    <script src="node_modules/vue/dist/vue.min.js"></script>
    
    <!-- import iview -->
    <link rel="stylesheet" href="node_modules/iview/dist/styles/iview.css">
    <script src="node_modules/iview/dist/iview.min.js"></script>
    
    <!-- 省市区三级联动json数据 -->
    <script src="/district/province_city_area.js"></script>
    
    <!-- 模拟数据 -->
    <script src="mock.js"></script>
    
    <!-- import formCreate -->
    <script src="dist/form-create.min.js"></script>

    注意! iview版本为2.13.0,Vue版本为2.5.*

     

    使用

    let rules = window.mock;
    new Vue({
      mounted:function(){
        let $f = this.$formCreate(mock,
                {
                    onSubmit:function (formData) {
                        console.log(formData);
                        $f.submitStatus({loading:true});
                }
            });
            //动态添加表单元素
            $f.append($r,'goods_name');
        }
    })

    $formCreate 参数

    • rules 表单生成规则 [inputRule,selectRule,...]
    • options 初始化配置参数 (详细见底部 createOptions)

    $formCreate.maker 组件规则生成器

    除hidden外,其他配置方式全部相同.详细参考表单元素规则

    props,event,slot传入参数为对象,例({key:value,...})

    validate,options参入参数为数组,例([options,options,..])

    • hidden 生成隐藏字段
    $formCreate.maker.hidden(field,value)
    • input 生成input输入框
    $formCreate.maker.input(title,field,value)
    • radio 生成单选框
    • checkbox 生成复选框
    • select 生成select选择器
    • switch 生成switch开关
    • datepicker 生成日期选择器组件,别名date
    • timepicker 生成时间选择器组件,别名time
    • inputnumber 生成数字输入框,别名number
    • colorpicker 生成颜色选择器组件,别名color
    • cascader 生成多级联动组件
    • upload 生成上传组件
    • rate 生成评分组件
    • slider 生成滑块组件

     

    $f 实例方法

    • formData() 获取表单的value
    • getValue(field) 获取指定字段的value
    • changeField(field,value) 修改指定字段的value
    • resetFields() 重置表单
    • destroy() 销毁表单
    • removeField(field) 删除指定字段
    • fields() 获得表单所有字段名称
    • submit() 表单验证通过后提交表单,触发onSubmit事件
    • validate(successFn,errorFn) 表单验证,如果验证通过执行successFn,未通过则执行errorFn
    • validateField(field,callback) 表单验证指定字段
     $f.validateField(field,(errMsg)=>{
            if(errMsg){
                //TODO 验证未通过
            }else{
                //TODO 验证通过
            }
        });
    • prepend(rule,field = undefined) 在field的字段之前输入指定表单元素,不传入field默认在第一个
    $f.prepend({
           type:"input",
           title:"商品简介",
           field:"goods_info",
           value:"",
           props: {
               "type": "text",
               "placeholder": "请输入商品简介",
           },
           validate:[
               { required: true, message: '请输入商品简介', trigger: 'blur' },
           ],
       });
    • append(rule,field = undefined) 在field的字段之前输入指定表单元素,不传入field默认在最后一个
    $f.append({
           type:"input",
           title:"商品简介",
           field:"goods_info",
           value:"",
           props: {
               "type": "text",
               "placeholder": "请输入商品简介",
           },
           validate:[
               { required: true, message: '请输入商品简介', trigger: 'blur' },
           ],
        });
    • submitStatus(props) 修改表单提交按钮状态
    $f.submitStatus({
            //按钮类型,可选值为primary、ghost、dashed、text、info、success、warning、error或者不设置
            type:"primary",
            //按钮大小,可选值为large、small、default或者不设置
            size:"large",
            //按钮形状,可选值为circle或者不设置
            shape:undefined,
            //开启后,按钮的长度为 100%
            long:true,
            //设置button原生的type,可选值为button、submit、reset
            htmlType:"button",
            //设置按钮为禁用状态
            disabled:false,
            //设置按钮的图标类型
            icon:"ios-upload",
            //按钮文字提示
            innerText:"提交",
            //设置按钮为加载中状态
            loading:false
        })
    • btn.loading() 让表单提交按钮进入loading状态
    • btn.finish() 让表单提交按钮恢复正常状态

    rules 表单元素规则

    hidden 隐藏字段

    hiddenRule:
    {
      type:"hidden",//必填!
      //字段名称
      field:"id", //必填!
      //input值
      value:"14" //必填!
    }

    input 输入框

    inputRule :
    {
            
            type:"input",//必填! 
            //label名称
            title:"商品名称",//必填!
            //字段名称
            field:"goods_name",//必填!
            //input值
            value:"iphone 7",
            props: {
                
                //输入框类型,可选值为 text、password、textarea、url、email、date
                "type": "text", //必填!
                //是否显示清空按钮
                "clearable":false, 
                //设置输入框为禁用状态
                "disabled": false, 
                //设置输入框为只读
                "readonly": false,
                //文本域默认行数,仅在 textarea 类型下有效
                "rows": 4, 
                //自适应内容高度,仅在 textarea 类型下有效,可传入对象,如 { minRows: 2, maxRows: 6 }
                "autosize": false, 
                //将用户的输入转换为 Number 类型
                "number": false, 
                //自动获取焦点
                "autofocus": false, 
                //原生的自动完成功能,可选值为 off 和 on
                "autocomplete": "off", 
                //占位文本
                "placeholder": "请输入商品名称", 
                //输入框尺寸,可选值为large、small、default或者不设置
                "size": "default",
                //原生的 spellcheck 属性
                "spellcheck": false,
            },
            event:{
                //按下回车键时触发
                enter:(event)=>{},
                //设置 icon 属性后,点击图标时触发
                click:(event)=>{},
                //数据改变时触发
                change:(event)=>{},
                //输入框聚焦时触发
                focus:(event)=>{},
                //输入框失去焦点时触发
                blur:(event)=>{},
                //原生的 keyup 事件
                keyup:(event)=>{},
                //原生的 keydown 事件
                keydown:(event)=>{},
                //原生的 keypress 事件
                keypress:(event)=>{},
            },
            validate:[
                { required: true, message: '请输入goods_name', trigger: 'blur' },
            ],
        }

    validate 表单验证规则,具体配置查看 : https://github.com/yiminghe/async-validator

    radio 单选框

    radioRule :
    {
            type:"radio",//必填!
            //label名称
            title:"是否包邮",//必填!
            //字段名称
            field:"is_postage",//必填!
            //input值
            value:"0",
            //可选参数
            options:[
                {value:"0",label:"不包邮",disabled:false},
                {value:"1",label:"包邮",disabled:true},
            ],//必填!
            props: {
                //可选值为 button 或不填,为 button 时使用按钮样式
                "type":undefined, 
                //单选框的尺寸,可选值为 large、small、default 或者不设置
                "size":"default", 
                //是否垂直排列,按钮样式下无效
                "vertical":false, 
            },
            event:{
                //在选项状态发生改变时触发,返回当前状态。通过修改外部的数据改变时不会触发
                change:(...arg)=>{},
            },
            validate:[],
        }

    checkbox 复选框

    checkboxRule :
    {
            
            type:"checkbox",//必填!
            //label名称
            title:"标签",//必填!
            //字段名称
            field:"label",//必填!
            //input值
            value:[
                "1","2","3"
            ],
            //可选参数
            options:[
                {value:"1",label:"好用",disabled:true},
                {value:"2",label:"方便",disabled:false},
                {value:"3",label:"实用",disabled:false},
                {value:"4",label:"有效",disabled:false},
            ],//必填!
            props: {
                //多选框组的尺寸,可选值为 large、small、default 或者不设置
                "size":"default", 
            },
            event:{
                //只在单独使用时有效。在选项状态发生改变时触发,通过修改外部的数据改变时不会触发
                change:(...arg)=>{},
            },
            validate:[],
        }

    select 选择器

    selectRule :
    {
            
            type: "select",//必填!
            field: "cate_id",//必填!
            title: "产品分类",//必填!
            //input值
            value: ["104","105"],
            //可选参数
            options: [
                {"value": "104", "label": "生态蔬菜", "disabled": false},
                {"value": "105", "label": "新鲜水果", "disabled": false},
            ],//必填!
            props: {
                    //是否支持多选
                "multiple": true, 
                //是否可以清空选项,只在单选时有效
                "clearable": false,
                //是否支持搜索
                "filterable": true, 
                
                // 暂不支持远程搜索
                // "remote": false, //是否使用远程搜索
                // "remote-method":Function, //远程搜索的方法
                // "loading": false, //当前是否正在远程搜索
                // "loading-text": "加载中", //远程搜索中的文字提示
                //选择框大小,可选值为large、small、default或者不填
                "size":"default", 
                //选择框默认文字
                "placeholder": "请选择", 
                 //当下拉列表为空时显示的内容
                "not-found-text": "无匹配数据",
                //弹窗的展开方向,可选值为 bottom 和 top
                "placement": "bottom", 
                //是否禁用
                "disabled": false, 
            },
            event:{
                //选中的Option变化时触发,返回 value
                change:(checked)=>{},
                //搜索词改变时触发
                'query-change':(keyword)=>{},
            },
            validate:[],
        }

    switch 开关

    switchRule :
    {
            
            type:"switch",//必填!
            //label名称
            title:"是否上架",//必填!
            //字段名称
            field:"is_show",//必填!
            //input值
            value:"1",
            props: {
                //开关的尺寸,可选值为large、small、default或者不写。建议开关如果使用了2个汉字的文字,使用 large。
                "size":"default", 
                //禁用开关
                "disabled":false,
                //选中时的值,当使用类似 1 和 0 来判断是否选中时会很有用
                "trueValue":"1", 
                //没有选中时的值,当使用类似 1 和 0 来判断是否选中时会很有用
                "falseValue":"0", 
            },
            slot: {
                //自定义显示打开时的内容
                open:"上架", 
                //自定义显示关闭时的内容
                close:"下架", 
            },
            event:{
                //开关变化时触发,返回当前的状态 0 | 1
                change:(bool)=>{},
            },
            validate:[],
        }

    DatePicker 日期选择器

    DatePickerRule :
    {
            
            type: "DatePicker",//必填!
            field: "section_day",//必填!
            title: "活动日期",//必填!
            //input值, type为daterange,datetimerange value为数组 [start_value,end_value]
            value: ['2018-02-20', new Date()], 
            props: {
                
                //显示类型,可选值为 date、daterange、datetime、datetimerange、year、month
                "type": "datetimerange",//必填!
                //展示的日期格式
                "format": "yyyy-MM-dd HH:mm:ss", 
                //日期选择器出现的位置,可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
                "placement": "bottom-start", 
                //占位文本
                "placeholder":"请选择获得时间", 
                //是否显示底部控制栏,开启后,选择完日期,选择器不会主动关闭,需用户确认后才可关闭
                "confirm":false, 
                //尺寸,可选值为large、small、default或者不设置
                "size":"default", 
                //是否禁用选择器
                "disabled":false, 
                //是否显示清除按钮
                "clearable":true, 
                //完全只读,开启后不会弹出选择器
                "readonly":false, 
                //文本框是否可以输入
                "editable":false, 
            },
            event:{
                //日期发生变化时触发,已经格式化后的日期,比如 2016-01-01
                change:(value)=>{},
                //弹出日历和关闭日历时触发 true | false
                'open-change':(bool)=>{},
                //在 confirm 模式或 clearable = true 时有效,在清空日期时触发
                clear:(...arg)=>{},
            },
            validate:[],
        }

    TimePicker 时间选择器

    TimePickerRule :
    {
            
            type: "TimePicker",//必填!
            field: "section_time",//必填!
            title: "活动时间",//必填!
            //input值, type为timerange value为数组 [start_value,end_value]
            value: [], 
            props: {
                //显示类型,可选值为 time、timerange
                "type": "timerange", //必填!
                //展示的时间格式
                "format": "HH:mm:ss", 
                //下拉列表的时间间隔,数组的三项分别对应小时、分钟、秒。例如设置为 [1, 15] 时,分钟会显示:00、15、30、45。
                "steps": [], 
                //时间选择器出现的位置,可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
                "placement": "bottom-start", 
                //占位文本
                "placeholder":"请选择获得时间", 
                //是否显示底部控制栏,开启后,选择完日期,选择器不会主动关闭,需用户确认后才可关闭
                "confirm":false, 
                //尺寸,可选值为large、small、default或者不设置
                "size":"default",
                //是否禁用选择器
                "disabled":false, 
                //是否显示清除按钮
                "clearable":true, 
                //完全只读,开启后不会弹出选择器
                "readonly":false, 
                //文本框是否可以输入
                "editable":false, 
            },
            event:{
                //时间发生变化时触发 已经格式化后的时间,比如 09:41:00
                change:(checked)=>{},
                //弹出浮层和关闭浮层时触发 true | false
                'open-change':(bool)=>{},
                //在清空日期时触发
                clear:(...arg)=>{},
            },
            validate:[],
        }

    InputNumber 数字输入框

    InputNumberRule :
    {
            
            type: "InputNumber",//必填!
            field: "sort",//必填!
            title: "排序",//必填!
            //input值
            value: 1,
            props: {
                //最大值
                "max": undefined, 
                //最小值
                "min": undefined, 
                //每次改变的步伐,可以是小数
                "step": 1, 
                //输入框尺寸,可选值为large、small、default或者不填
                "size":"default", 
                //设置禁用状态
                "disabled":false, 
                //是否设置为只读
                "readonly":false, 
                //是否可编辑
                "editable":true, 
                //数值精度
                "precision":0, 
            },
            event:{
                //数值改变时的回调,返回当前值
                change:(value)=>{},
                //聚焦时触发
                focus:(event)=>{},
                //失焦时触发
                blur:(event)=>{},
            },
            validate:[],
        }

    ColorPicker 颜色选择器

    ColorPickerRule :
    {
    
            type: "ColorPicker",//必填!
            field: "color",//必填!
            title: "颜色",//必填!
            //input值
            value: '#ff7271', 
            props: {
                //是否支持透明度选择
                "alpha": false, 
                //是否支持色彩选择
                "hue": true, 
                //是否显示推荐的颜色预设
                "recommend": false, 
                //尺寸,可选值为large、small、default或者不设置
                "size":"default", 
                //自定义颜色预设
                "colors":[], 
                //颜色的格式,可选值为 hsl、hsv、hex、rgb,开启 alpha 时为 rgb,其它为 hex
                "format":"hex", 
            },
            event:{
                //当绑定值变化时触发,返回当前值
                change:(color)=>{},
                //聚焦时触发 面板中当前显示的颜色发生改变时触发
                'active-change':(color)=>{},
            },
            validate:[],
        }

    Cascader 多级联动

    CascaderRule:
    {
            
            type:"cascader",//必填!
            title:"所在区域",//必填!
            field:"address",//必填!
            //input值
            value:['陕西省','西安市','新城区'],
            props:{
                //可选项的数据源,格式参照示例说明
                data:window.province || [],//必填!
                //选择后展示的函数,用于自定义显示格式
                renderFormat:label => label.join(' / '),
                //是否禁用选择器
                disabled:false,
                //是否支持清除
                clearable:true,
                //输入框占位符
                placeholder:'请选择',
                //次级菜单展开方式,可选值为 click 或 hover
                trigger:'click',
                //当此项为 true 时,点选每级菜单选项值都会发生变化,具体见上面的示例
                changeOnSelect:false,
                //输入框大小,可选值为large和small或者不填
                size:undefined,
                //动态获取数据,数据源需标识 loading
                loadData:()=>{},
                //是否支持搜索
                filterable:false,
                //当搜索列表为空时显示的内容
                notFoundText:'无匹配数据',
                //是否将弹层放置于 body 内,在 Tabs、带有 fixed 的 Table 列内使用时,建议添加此属性,它将不受父级样式影响,从而达到更好的效果
                transfer:false,
            },
            event:{
                //选择完成后的回调,返回值 value 即已选值 value,selectedData 为已选项的具体数据
                change:(value, selectedData)=>{},
                //展开和关闭弹窗时触发
                'visible-change':bool=>{}
            },
            validate:[],
    
        }

    Upload 上传

    UploadRule :
    {
            
            type: "Upload",//必填!
            field: "pic",//必填!
            title: "轮播图",//必填!
            //input值,当maxLength等与1时值为字符串,大于1时值为数组
            value: ['http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg','http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'], //input值
            props: {
                //上传控件的类型,可选值为 select(点击选择),drag(支持拖拽)
                "type":"select", //必填!
                //上传文件类型,可选值为 image(图片上传),file(文件上传)
                "uploadType":"image", //必填!
                //上传的地址
                "action": "", //必填! 
                //上传的文件字段名
                "name":"", 
                //上传时附带的额外参数
                "data":{}, 
                //设置上传的请求头部
                "headers": {}, 
                //是否支持多选文件
                "multiple": true,
                //支持发送 cookie 凭证信息
                "withCredentials":false, 
    
                //不支持
                // "showUploadList":false, //是否显示已上传文件列表
                // "defaultFileList":[], // 默认已上传的文件列表
                
                //接受上传的文件类型
                "accept":"",
                //支持的文件类型,与 accept 不同的是,format 是识别文件的后缀名,accept 为 input 标签原生的 accept 属性,会在选择文件时过滤,可以两者结合使用
                "format":[], 
                //文件大小限制,单位 kb
                "maxSize":undefined, 
                //可上传文件数量
                "maxLength":1,
                //上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传
                "beforeUpload":()=>{}, 
                //文件上传时的钩子,返回字段为 event, file, fileList
                "onProgress":()=>{}, 
                //文件上传成功时的钩子,返回字段为 response, file, fileList,若需有把文件添加到文件列表中,在函数值返回即可
                "onSuccess":function () {
                    return 'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg';
                }, //必填!
                //文件上传失败时的钩子,返回字段为 error, file, fileList
                "onError":(error, file, fileList)=>{}, 
                //点击已上传的文件链接时的钩子,返回字段为 file, 可以通过 file.response 拿到服务端返回数据
                "onPreview":()=>{}, 
                //文件列表移除文件时的钩子,返回字段为 file, fileList
                "onRemove":()=>{}, 
                //文件格式验证失败时的钩子,返回字段为 file, fileList
                "onFormatError":()=>{}, 
                //文件超出指定大小限制时的钩子,返回字段为 file, fileList
                "onExceededSize":()=>{}, 
                //辅助操作按钮的图标 ,设置为false将不显示
                handleIcon:'ionic',
                //点击辅助操作按钮事件
                onHandle:(src)=>{},
                //是否可删除,设置为false是不显示删除按钮
                allowRemove:true,
            },
        }

    accept 文件类型: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept

    全局配置 createOptions

    {
    
        //插入节点,默认document.body
        el:null,
        //form配置
        form:{
        
            //是否开启行内表单模式
            inline:false,
            //表单域标签的位置,可选值为 left、right、top
            labelPosition:'right',
            //表单域标签的宽度,所有的 FormItem 都会继承 Form 组件的 label-width 的值
            labelWidth:125,
            //是否显示校验错误信息
            showMessage:true,
            //原生的 autocomplete 属性,可选值为 off 或 on
            autocomplete:'off',
        },
        //文件上传全局配置
        upload:{
        
            //上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传
            beforeUpload:()=>{},
            //文件上传时的钩子,返回字段为 event, file, fileList
            onProgress:(event, file, fileList)=>{},
            //文件上传成功时的钩子,返回字段为 response, file, fileList,若需有把文件添加到文件列表中,在函数值返回即可
            onSuccess:(response, file, fileList)=>{
                // return 'filePath';
            },
            //文件上传失败时的钩子,返回字段为 error, file, fileList
            onError:(error, file, fileList)=>{},
            //点击已上传的文件链接时的钩子,返回字段为 file, 可以通过 file.response 拿到服务端返回数据
            onPreview:(file)=>{},
            //文件列表移除文件时的钩子,返回字段为 file, fileList
            onRemove:(file, fileList)=>{},
            //文件格式验证失败时的钩子,返回字段为 file, fileList
            onFormatError:(file, fileList)=>{},
            //文件超出指定大小限制时的钩子,返回字段为 file, fileList
            onExceededSize:(file, fileList)=>{},
            //辅助操作按钮的图标 ,设置为false将不显示
            handleIcon:'ios-eye-outline',
            //点击辅助操作按钮事件
            onHandle:(src)=>{},
            //是否可删除,设置为false是不显示删除按钮
            allowRemove:true,
        },
        
        //表单提交事件
        onSubmit:(formData)=>{},
        
        //提交按钮配置,设置为false时不显示按钮
        submitBtn:{
        
            //按钮类型,可选值为primary、ghost、dashed、text、info、success、warning、error或者不设置
            type:"primary",
            //按钮大小,可选值为large、small、default或者不设置
            size:"large",
            //按钮形状,可选值为circle或者不设置
            shape:undefined,
            //开启后,按钮的长度为 100%
            long:true,
            //设置button原生的type,可选值为button、submit、reset
            htmlType:"button",
            //设置按钮为禁用状态
            disabled:false,
            //设置按钮的图标类型
            icon:"ios-upload",
            //按钮文字提示
            innerText:"提交",
            //设置按钮为加载中状态
            loading:false,
        }
    }

    转载于:https://www.cnblogs.com/xaboy/p/8946411.html

    展开全文
  • 问题解析: 原因:传值方式是request payload 解决办法: 1:后端使用@RequestBody注解 2:在前端将json序列化(推荐) 这样的好处是后端接收参数比较方便,不需要加什么注解,也不需要对json做什么处理 ...
  • VUE--Form表单

    万次阅读 2019-04-18 16:49:50
    表单内容 1、写在data内验证: ... model:表单数据对象 是绑定我们form表单中需要提交给后台的一个对象 -> label-width:表单域标签的宽度,作为 Form 直接子元素的 form-item 会继承该值 -...
  • vue中有时候可能想像使用jq一样给某个元素添加属性,如 $('#select1').attr('disabled','disabled') ...disabled是表单元素的原生属性,可以直接使用属性绑定的语法 :disabled 来绑定,然后加上一个条件就可以
  • 本文实例讲述了vue实现form表单与table表格的数据关联功能。分享给大家供大家参考,具体如下:content="width=device-width, user-scalable=no, initial-scale...www.jb51.net vue form表单数据关联*{margin: 0;padd...
  • 本文从零开始实现一个自定义的vue2.x表单组件my-form,组件使用体验类似element-ui 实现过程涉及到的知识点 自定义事件 事件的广播与派发 v-mode语法糖原理 $attrs,参考https://cn.vuejs.org/v2/api/#vm-attrs ...
  • 具有数据收集、校验和提交功能的表单生成器,包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展。欢迎大家star学习交流:github地址...
  • 文章开始之前,如果使用过AntD框架form表单的同学我觉得阅读应该不成问题,其他同学也还可以(废话)。文章从下边开始☟☟☟☟☟☟前端的Form 表单主要用于解决数据获取、数据校验、数据赋值 这三大类问题。这篇文章...
  • vue 阻止form表单提交

    2021-02-05 00:09:35
    在网上查了一些,有些是在form表单添加 @submit.prevent="submit"但是没有成功,在点击注册的时候是函数都没有进去,同时还有一个问题,因为采用的是element ui 框架,select选择器选取内容无法进行获取获取到的都...
  • vue父子组件传值(form表单

    千次阅读 2021-07-08 09:23:21
    // 父组件 监听子组件的input... {form.materials[i] = $event}** <ipc-list v-for="(material, i) in form.materials" :value="material" :dataSource="form.dataSource" :index="i" :materialsLength="for
  • 一.form表单字段验证 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可 1.form中的rules属性绑定rules 2.form-item中的prop绑定对应...
  • Vue监视数据的原理: vue会监视data中所有层次的数据。 如何监测对象中的数据? 通过setter实现监视,且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性,Vue默认不做响应式处理 (2).如需给后添加的...
  • form表单提交数据

    2020-04-26 17:14:54
    form表单提交数据 ...form> 每出现一次,Form 对象就会被创建,Form 对象的方法: ...如果原生form表单只有一个input输入框,并且没给form表单设置action地址,那么input输入框输入内容之后回车,页面会刷...
  • vue3+ts+elementPlus 自定义生成封装form表单组件
  • @[TOC]欢迎来到 vue-form 表单提交演示间, 你有更好的建议,请告知楼主额!1. 客户端 htmlTitle欢迎来到 vue-form 表单提交演示间, 你有更好的建议,请告知楼主额!boxnewrankdesctitle{{v.box}}{{v.new}}{{v.rank}}...
  • Vue学习-iView组件-Form表单

    千次阅读 2019-10-29 23:47:33
    文章目录Form表单#1 环境#2 原生form#3 iView组件#3.1 添加字段校验 Form表单 #1 环境 "view-design": "^4.0.0", "vue": "^2.5.2", #2 原生form <template> <div> <form> <input type=...
  • mui、vue 开发原生App表单验证 最近开发app遇到了表单验证的问题,在网上找了半天,都不是想要的东西。下面是自己写的验证,比较简单,还没有完善。 <div class="form-group"> <h5 class="mui-content-...
  • 环境:项目通过VUE CLI3 搭建。请求为axios在本地的文件下载:将文件传至工程中默认的 public 文件夹中href="/file/文件名.xlsx"download="自定义文件名.xlsx">点击下载请求后端,转换后台你返回的二进制流:HTML:...
  • 工作中经常会遇到下载文件的需求,前面讲过通过创建a标签下载,今天来讲一下通过form表单直接从后台获取数据下载的实例。 html代码: <form ref="req_form" method="post" action=""> <input type=...
  • <template> <div style="min-height: 450px;"> <div style="width: 100%;...table align="center" width="100%" class="table xunw_table_form" border="0"> <tbody> &l
  • Vue-From表单校验步骤以及规则

    千次阅读 2021-04-19 15:10:24
    Vue-From表单校验步骤以及规则 文章目录前言一、表单校验的步骤二、代码演示1....给表单设置model属性传入表单数据 给表单中的元素(Form-Item )设置 prop 属性,其值为设置为需校验的字段名 手动兜底

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,005
精华内容 2,002
关键字:

vue获取原生form表单数据