精华内容
下载资源
问答
  • 纯JavaScript表单发送者 frontend.html <!-- you can set the action and method that will be used --> <form id="form-identifier" action="backend.php" method="POST"> <!-- the status ...
  • 纯js 表单控件

    2013-06-13 18:19:00
    需求、目的:1、在前台网页,使用js自动创建表单2、可以控制表单里的控件类型,比如文本框、下拉列表框、在线编辑器等。3、可以获取用户输入的数据,可以进行验证4、可以进行排版5、修改数据时,可以把原有数据绑定...
    js属于初学,代码还很简陋,大家见笑了。现在是越学习js,越是感到js的强大!
    需求、目的:
    1、在前台网页,使用js自动创建表单
    2、可以控制表单里的控件类型,比如文本框、下拉列表框、在线编辑器等。
    3、可以获取用户输入的数据,可以进行验证
    4、可以进行排版
    5、修改数据时,可以把原有数据绑定到表单。
    实现方式:
    1、js+json+第三方js脚本、控件
    2、json对表单进行描述,比如标题、控件类型、控件大小、下拉列表框的item如何填充等。
    3、第三方脚本实现复杂功能,比如选择日期、在线编辑、数据验证等。
    4、Js脚本根据json的描述,创建表单(table形式),创建表单里面的控件(比如文本框),然后对表单和控件进行修饰。
    5、提取用户输入的数据,然后进行验证。然后可以用ajax的方式提交给服务器。(提交部分表单控件不负责)。
    思路:
    1、对表单进行归纳总结,抽象出来几种情况。比如有多少种控件、表格有几种表现形式。
    其他的还没想好怎么表达出来。
    使用方式:
    使用就很简单了,因为俺比较懒,所以我做的东东,第一目标就是——用着省事。
    1、引用一堆js,其中自己的只有两个,一个创建控件,一个创建表单,还有一个验证数据。
    2、写一段“引导”脚本。这个基本是c#风格,当然也可以写成js风格。看个人喜好了。
    varNature={};Nature.Controls={};varform;//表单控件functioncreate(){$("#divForm").html("");//创建表单varformEvent={divID:"divForm",callback:formCallback//回调函数};form=newNature.Controls.Form(formEvent);form.create();$("#divButton").show();}functionformCallback(formState){switch(formState){case401://查看break;case402://添加break;case403:case408://修改break;}}//获取用户输入的信息functiongetValue(){//验证数据varre=checkData();if(!re){return;}//获取用户输入的信息,json格式,然后可以ajax提交到数据库varvalue=form.getValue("dataForm");//下面仅在演示时用,显示用户输入了啥。varmeta=eval("("+$("#json").val()+")");varcontrolInfo=meta.controlInfo;varre="";for(varkeyinvalue){varid=key.substring(1,key.length);re+=controlInfo[id].ColName+":\t"+value[key]+"\n";}$("#msg").val(re);}functioncheckData(){//自带的验证功能。varre=CheckForm();if(re==true){//验证通过,查看是否有自定义的js文件的验证if(typeof(cuscheck)!="undefined"){//有自定义的验证,执行re=cuscheck();}}returnre;}
    问与答:
    问:为啥重复制造轮子?
    答:搜索了一下js表单控件,没有发现特出名的。当然了肯定有做好的,只是我没有发现。再有也不是完全自己写的,有很多第三方现成的js拿来用的,比如my97。
    问:写这个json也太复杂了,还不如自己做个表单方便。
    答:这个json确实挺复杂的,但是他不是手动写出来的,而是自动生成的。原理类似于代码生成器。所以用起来还是挺方便的。
    问:一个页面能放几个表单控件?
    答:大于等于一个。因为是new出来的,所以每个表单控件都可以互补干扰。只要属性没有设置错误就可以区分开。
    问:还有其他的功能吗?
    答:当然还有其他的功能,比如设置文本框只读(readonly),设置默认值,设置帮助信息,表单布局等,这些都可以通过修改json的属性值来实现。
    问:json的结构到底是啥样的?
    答:这个可以看在线演示,还可以修改值来看看变化。
    附:第三方js
    1、jQuery。这个就不多说了。
    2、my97。选择日期的,很好很强大
    3、kindereditor。选择他是因为可以直接在页面里使用。因为是纯js的表单控件,所以服务器控件形式的在线编辑器是不好用了。
    4、数据验证。这个好像有很多已经很成熟的了,只是一直没时间研究。目前用的是一个比较古老的js脚本,出处已经不记得了。<wbr></wbr>
    展开全文
  • 轻巧,易于使用的表单验证工具,完全用JavaScript编写,没有库依赖性。 另外,一项工作仍在进行中。 安装 使用NPM安装 $ npm install salvation 安装凉亭 $ bower install Salvation 用法 使用救助很容易,只需很少...
  • a lightweight pure javascript form validator 遵循ecmascript5,兼容IE9+,配合jQuery可以兼容IE6+。 ##用法 首先为需要添加验证规则的dom元素添加自定义属性rg-rule,属性值为**|**分隔开的规则名称。 如果想设置...
  • 我们在做增删改查的时候,必可避免的要...想了好久也没想到如何提高效率,最后改成了纯js版的。  js属于初学,代码还很简陋,大家见笑了。现在是越学习js,越是感到js的强大! 需求、目的:1、 在前台网页,使...

      我们在做增删改查的时候,必可避免的要做表单,那么表单是怎么弄出来的呢?拖拽控件、手写、js创建还是第三方控件(包括js版)? 以前用服务器控件写了一套表单控件,用起来感觉也挺方便的,只是效率太低,太占用服务器的资源。想了好久也没想到如何提高效率,最后改成了纯js版的。

      js属于初学,代码还很简陋,大家见笑了。现在是越学习js,越是感到js的强大!

     

    需求、目的:
    1、 在前台网页,使用js自动创建表单
    2、 可以控制表单里的控件类型,比如文本框、下拉列表框、在线编辑器等。
    3、 可以获取用户输入的数据,可以进行验证
    4、 可以进行排版
    5、 修改数据时,可以把原有数据绑定到表单。


    实现方式:
    1、 js + json + 第三方js脚本、控件
    2、 json对表单进行描述,比如标题、控件类型、控件大小、下拉列表框的item如何填充等。
    3、 第三方脚本实现复杂功能,比如选择日期、在线编辑、数据验证等。
    4、 Js脚本根据json的描述,创建表单(table形式),创建表单里面的控件(比如文本框),然后对表单和控件进行修饰。
    5、 提取用户输入的数据,然后进行验证。然后可以用ajax的方式提交给服务器。(提交部分表单控件不负责)。


    思路:
    1、 对表单进行归纳总结,抽象出来几种情况。比如有多少种控件、表格有几种表现形式。
    其他的还没想好怎么表达出来。


    使用方式:
    使用就很简单了,因为俺比较懒,所以我做的东东,第一目标就是——用着省事。
    1、 引用一堆js,其中自己的只有两个,一个创建控件,一个创建表单,还有一个验证数据。

    2、 写一段“引导”脚本。这个基本是c#风格,当然也可以写成js风格。看个人喜好了。

            var Nature = {};
            Nature.Controls = {};
            
            var form;   //表单控件
            
            function create() {
                $("#divForm").html("");
                //创建表单
                var formEvent = {
                    divID: "divForm",
                    callback: formCallback   //回调函数
                };
                form = new Nature.Controls.Form(formEvent);
                form.create();
    
                $("#divButton").show();
    
            }
            
            function formCallback(formState) {
                switch (formState) {
                case 401:
                    //查看
                     
                    break;
                case 402:
                    //添加
                     
                    break;
                case 403:
                case 408:
                    //修改
                  
                    break;
    
                }
                
            }
    
            //获取用户输入的信息
            function getValue() {
                //验证数据
                var re = checkData();
    
                if (!re) {
                    return;
                }
                
                //获取用户输入的信息,json格式,然后可以ajax提交到数据库
                var value = form.getValue("dataForm");
               
                //下面仅在演示时用,显示用户输入了啥。
                var meta = eval("(" + $("#json").val() + ")");
                var controlInfo = meta.controlInfo;
                
                var re = "";
                for (var key in value) {
                    var id = key.substring(1, key.length);
                    re += controlInfo[id].ColName + ":   \t" + value[key] + "\n";
                }
    
                $("#msg").val(re);
            }
    
            function checkData() {
                //自带的验证功能。
                var re = CheckForm();
    
                if (re == true) {
                    //验证通过,查看是否有自定义的js文件的验证
                    if (typeof (cuscheck) != "undefined") {
                        //有自定义的验证,执行
                        re = cuscheck();
                    }
                }
                return re;
            }

     


    问与答:
    问:为啥重复制造轮子?
    答:搜索了一下js表单控件,没有发现特出名的。当然了肯定有做好的,只是我没有发现。再有也不是完全自己写的,有很多第三方现成的js拿来用的,比如my97。

    问:写这个json也太复杂了,还不如自己做个表单方便。
    答:这个json确实挺复杂的,但是他不是手动写出来的,而是自动生成的。原理类似于代码生成器。所以用起来还是挺方便的。

    问:一个页面能放几个表单控件?
    答:大于等于一个。因为是new出来的,所以每个表单控件都可以互补干扰。只要属性没有设置错误就可以区分开。

     

    问:还有其他的功能吗?
    答:当然还有其他的功能,比如设置文本框 只读(readonly),设置默认值,设置帮助信息,表单布局等,这些都可以通过修改json的属性值来实现。

    问:json的结构到底是啥样的?
    答:这个可以看在线演示,还可以修改值来看看变化。

     

    附:第三方js
    1、 jQuery。这个就不多说了。
    2、 my97。选择日期的,很好很强大
    3、 kindereditor。选择他是因为可以直接在页面里使用。因为是纯js的表单控件,所以服务器控件形式的在线编辑器是不好用了。
    4、 数据验证。这个好像有很多已经很成熟的了,只是一直没时间研究。目前用的是一个比较古老的js脚本,出处已经不记得了。

    在线演示:
    js版的表单控件 : http://www.naturefw.com/demo/jsform.htm  (下面是一个iframe。好像有缓存。)
     
     
    不知道大家是怎么处理表单的,有兴趣的话,欢迎一起聊聊!
     
     

    转载于:https://www.cnblogs.com/jyk/archive/2013/05/17/3083781.html

    展开全文
  • 下面小编就为大家带来一篇JavaScript 基础表单验证示例(纯Js实现)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了纯JS实现表单验证实例,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 在浏览器或服务器上,用纯JavaScript填写PDF表单。 pdfform.js可以与稍微定制的版本。 但是,由于PDF.js(1600KB +)的大小和范围,默认情况下使用内置的PDF库(称为minipdf)。 演示了这两种方法(在实际生产中...
  • 漂亮的纯javascript弹出框验证表单,很实用,支持ajax
  • 如何通过纯javascript实现表单提交

    万次阅读 2018-01-07 09:39:22
    如何通过纯javascript实现表单提交通常,如果是POST方法,一般使用vuejs+axios,或使用Jquery实现表单提交。有些地方,我想使用纯JS实现,比方简单的登陆跳转。话不多说,看原代码,laravel中的HTML部分,如果不是...

    如何通过纯javascript实现表单提交

    通常,如果是POST方法,一般使用vuejs+axios,或使用Jquery实现表单提交。有些地方,我想使用纯JS实现,比方简单的登陆跳转。话不多说,看原代码,

    laravel中的HTML部分,如果不是laravel,去掉 {{csrf_field()}}这一行即可

    <form class="form-signin" id="myform">
        {{csrf_field()}}            
        .........此处省略若干......
        <h2 class="form-signin-heading">请登录</h2>            
        <label for="inputName" class="sr-only">用户名</label>
        <input name="name" id="inputName" class="form-control" placeholder="Login Name / 登陆名" required autofocus="" type="text">
        <label for="inputPassword" class="sr-only">密码</label>
        <input name="password" value="" id="inputPassword" class="form-control" placeholder="Password / 密码" required type="password">
        <button class="btn btn-lg btn-primary btn-block" type="submit">登陆</button>
    </form>
    

    题外话:如果是正常的表单提交,不使用JS,一般第一行得这样写

    <form class="form-signin" id="myform" method="POST" action="/admin/login">

    这里因为使用JS,所以删除了method="POST" action="/admin/login" 跳转及方法信息。

    回归正题,再看JS

    <script type="text/javascript">
        //拿到form
        var form = document.getElementById("myform")
    
        function submitFormData(){
            var myFD = new FormData(form)
    
            // 这里可以对form进行操作,使用ajax XMLHttpRequest,axios等发送
            console.dir(myFD)        
            console.dir(form)
    
            alert("submitted")
        }
    
        form.addEventListener("submit", function (event) {      
            event.preventDefault();   // 取消按键的原始提交行为
            submitFormData();         //启动监听提交按钮
        });
    
    </script>

    嗯,简单吧!

    展开全文
  • 当焦点离开时调用验证函数,验证后修改第三栏文字,显示符合/不符合并返回true/false实现代码:index.html雇员编号雇员姓名雇员职位雇员日期基本工资佣金FormVapdation.js// 日期选择function layDate() {}// 验证...

    验证思路

    26468036b12a5aa43673710d4310e061.png

    监听每个input控件的焦点离开(onblue),当焦点离开时调用验证函数,验证后修改第三栏文字,显示符合/不符合并返回true/false

    0c348c95db9be36a07c8951aae3730af.png

    实现代码:

    index.html

    雇员编号
    雇员姓名
    雇员职位
    雇员日期
    基本工资
    佣金

    FormVapdation.js

    // 日期选择

    function layDate() {

    }

    // 验证雇员编号,4位纯数字编号

    function vapdateEmpnb() {

    return vapdateRegexp("empnb", /^\d{4}$/);

    }

    // 验证雇员姓名,不为空

    function vapdateEname() {

    return vapdateNull("ename");

    }

    // 验证雇员职位,不为空

    function vapdateEpost() {

    return vapdateNull("epost");

    }

    // 验证雇员日期

    function vapdateEdate() {

    return vapdateRegexp("edate", /^\d{4}-\d{2}-\d{2}$/)

    }

    // 验证基本工资

    function vapdateEsalary() {

    return vapdateRegexp("esalary", /^\d+(\.\d{1,2})?$/)

    }

    // 验证佣金

    function vapdateEbrok() {

    return vapdateRegexp("ebrok", /^\d+(\.\d{1,2})?$/)

    }

    // 提交时全部重新验证

    function vapdate() {

    return vapdateEmpnb() && vapdateEname() && vapdateEpost() && vapdateEdate() && vapdateEsalary() && vapdateEbrok();

    }

    // 正则表达式验证

    function vapdateRegexp(elemName, regexp) {

    var elem = document.getElementById(elemName);

    var msg = document.getElementById(elemName + 'Msg')

    console.log(regexp);

    console.log(elem.value);

    if (regexp.test(elem.value)) {

    msg.innerHTML = 'ok';

    msg.style.color = 'green';

    return true;

    } else {

    msg.innerHTML = '您的输入不符合规则';

    msg.style.color = 'red';

    return false;

    }

    }

    // 不为空验证

    function vapdateNull(elemName) {

    var elem = document.getElementById(elemName);

    var msg = document.getElementById(elemName + 'Msg');

    console.log(elem.value);

    console.log(msg);

    if (elem.value == '' || elem.value == ' ') {

    msg.innerHTML = '您的输入不能为空';

    msg.style.color = 'red';

    return false;

    } else {

    msg.innerHTML = 'ok';

    msg.style.color = 'green';

    return true;

    }

    }

    css.css

    html {

    font-size: 14px;

    }

    .table {

    border: 1px grey sopd;

    }

    .table tr {

    height: 2rem;

    }

    .table td {

    width: 15rem;

    }

    以上这篇JavaScript 基础表单验证示例(纯Js实现)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    展开全文
  • 简单表单验证纯JS

    2021-05-25 15:44:26
    最近写后台表单太多需要验证,与时写了一个简单的表单验证JS //表单验证 function fromVerify() { this.verify=function () { var object=[]; var v_data=[]; var input=document.getElementsByTagName("input...
  • validate.js是一款强大的纯javascript表单验证插件。该表单验证插件提供跨框架和跨语言的数据验证方式,验证条件可以写在JSON数据中,被服务器和客户端共享。它支持日期时间的验证,并提供自定义的验证接口。
  • 纯js开发的表单设计器

    热门讨论 2010-01-28 17:11:27
    全部是用js实现 表单的动态定义 生成xml文件
  • 下面小编就为大家带来一篇纯JS实现可拖拽表单的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 只是有时候并不想使用额外的库,所以就琢磨着自己写,用纯js来实现异步提交表单 实现如下(本例用POST方式提交,用php作为服务器脚本) HTM L文件:test <html> <head> [removed][removed] </head&...
  • 纯JS回显form各种表单数据

    千次阅读 2016-07-08 20:52:26
    获取和设定表单数据有各种方法,比如借助DWR,jQuery等JS库或者框架等。 下面通过原生的JS代码来实现。 [html] view plain copy html>  head>  meta http-equiv="Content-Type"...
  • var errorTip = { show:(ele,text)=> { if(ele && text){ var mustEle = document.getElementById(ele+""); if(mustEle){ console.log('已找到该节点',mustEle) mustEle.innerHTML = '' ...
  • 有些地方,我想使用纯JS实现,比方简单的登陆跳转。话不多说,看原代码, laravel中的HTML部分,如果不是laravel,去掉 {{csrf_field()}}这一行即可 打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,305
精华内容 14,522
关键字:

纯js表单