精华内容
下载资源
问答
  • 今天给大家分享一下,修真院官网js(职业)任务十,深度思考中的知识点——有哪些常见的验证表单方式,他们各自的优缺点是什么? 1.背景介绍 表单验证是javascript中的高级选项之一。   表单数据一般都通过...

      大家好,我是IT修真院武汉分院web第17期的学员吴三水,一枚正直纯洁善良的web程序员。
    今天给大家分享一下,修真院官网js(职业)任务十,深度思考中的知识点——有哪些常见的验证表单方式,他们各自的优缺点是什么?

    1.背景介绍

    表单验证是javascript中的高级选项之一。

      表单数据一般都通过浏览器端的Javascript 验证。浏览器端的验证速度快,若有不符合要求的输入,响应信息快速的返回给用户。由于验证数据不需要提交给服务器,不会加重服务器的负载。

    2.知识剖析

    什么是表单验证?表单验证的作用

      访问任何一个带注册表单的网站,你都会发现,当你提交没有输入任何信息的表单时,注册页面都会给你提交一个反馈,它告诉你提交了错误的数据,这些信息可能看起来像下面这样的:

    1. “该字段是必填的”(该字段不能留空)
    2. “请输入你的电话号码,它的格式是:xxx-xxxx”(它要求你输入的数据格式为三个数字接一个横杠,然后再接着是四个数字)
    3. “请输入一个合法的邮箱地址”(如果你输入的数据不具有“somebody@example.com“的邮箱格式)
    4. “你的密码长度应该是8至30位的,并且至少应该包含一个大写字母、一个符号以及一个数字”

      这就是表单验证 —— 当你向 Web 应用提交数据时,应用会校验你输入的数据是否是正确的。如果验证通过,则这些数据可能会被保存至数据库中(通常都是这样的)或者执行下一步操作,如果校验未通过,则 Web 应用会提示你有错误的数据,并且一般都会明确的告诉你错误发生在哪里。表单验证可以通过许多不同的方式实现。

    3.常见问题

    常见的表单验证方式

    1.输入时进行实时验证(.KEYDOWN)

    2.离开(失去)焦点时验证(.ONBLUR)

    3.提交表单时验证

    4.解决方案

    5.代码实战

    1.输入时进行实时验证

    <form name="a">
          <input type="text" name="b" placeholder="不超过5个字符" onkeydown="keydown()">
    </form>
    

    2.离开(失去)焦点时验证

    <form name="c">
         <input type="text" name="d" placeholder="不超过5个字符" onblur="onBlur()">
     </form>
    
    

    3.是否填写以及长度限制

    <form name="e" onsubmit="return test()">
        <input type="text" name="f" placeholder="不超过5个字符">
      <br>
        <input type="submit" name="Submit" value="提交">
      <br>
    </form>
    

    6.拓展思考

    这些验证的优缺点各是什么?

    1.输入时进行实时验证(.keydown)**

    优点: 只要有输入就会开始进行验证,随着输入的实时给予用户验证反馈,反应速度快。

    ​缺点:影响一些性能,比如正在输入验证码或者检测是否重名等,频繁出现的验证错误影响用户体验。

    适用于检测数据类型,比如注册页面的密码项

    2.失去焦点验证(.onBlur)

    优点: 用户体验好比第一种要好一点

    ​缺点:必须输入框失去焦点(即鼠标点击别处,或tab键)后才能知道结果

    常见于输入验证码,注册等功能

    3.提交时验证

    优点: 性能上更好,可以降低服务器压力

    缺点:如果输入项过多的话,用户体验会很差

    适合登陆账号时检测输入内容是否合法

    7.参考文献

    有哪些常见的验证表单方式,他们各自的优缺点是什么?
    表单数据校验

    8.更多讨论

    鸣谢

    展开全文
  • 【JS-TASK10】有哪些常见的验证表单方式,他们各自的优缺点是什么? 目录 1.背景介绍 2.知识剖析 3.常见问题 4.解决方案 5.编码实战 6.扩展思考 7.参考文献 8.更多讨论 1.背景介绍 JavaScript 可在数据被送往服务器前...

    【JS-TASK10】有哪些常见的验证表单方式,他们各自的优缺点是什么?

    目录

    1.背景介绍
    2.知识剖析
    3.常见问题
    4.解决方案
    5.编码实战
    6.扩展思考
    7.参考文献
    8.更多讨论

    1.背景介绍

    JavaScript 可在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。以减轻后台数据传送压力,提高数据传送的质量和效率。

    2.知识剖析

    如何使用表单验证

    原生js:获取input内容,if/switch判断,配合正则dom操作等实现目标

    优点:灵活,减少加载时间;缺点:代码量大

    js第三方插件:例如Bootstrap Validator

    优点:代码量少;缺点:需要加载第三方js,样式比较固定

    3.常见问题

    表单验证有哪几种方式

    1.实时判断

    2.离开焦点

    3.提交时验证

    4.解决方案

    5.代码实战

    JS表单验证
    <p>是否填写以及长度限制</p>
    <form name="a" onsubmit="return test()"><!--onsubmit表示表单提交时执行一段js代码,当该事件触发的函数中返回false时,表单就不会被提交,不能掉了return,否则表单永远会提交。-->
        <input type="text" name="b" placeholder="不超过5个字符"  onkeyup="keyUp()" >
        <br>
        <input type="submit" name="Submit" value="check">
    </form>
    
      function test() {
            if (document.a.b.value == null || document.a.b.value == "") {
                console.log("请输入字符");
                return false;
            }
            if (document.a.b.value.length > 5) {
                console.log("不能超过5个字符!");
                return false;
            }
        }
    function onBlur() {//失去焦点
        if (document.a.b.value == null || document.a.b.value == "") {
            console.log("请输入字符");
            return false;
        }
        if (document.a.b.value.length > 5) {
            console.log("不能超过5个字符!");
            return false;
        }
    }
    
    function keyUp() {//按键后判断
        if (document.a.b.value == null || document.a.b.value == "") {
            console.log("请输入字符");
            return false;
        }
        if (document.a.b.value.length > 5) {
            console.log("不能超过5个字符!");
            return false;
        }
    
    }
    

    6.扩展思考

    他们的优缺点

    提交时验证:

    优点:性能上更好;缺点:假如输入项过多的话,会影响用户体验

    适合登陆账号时检测输入内容是否合法

    onBlur:

    优点:用户体验好;缺点:必须鼠标点击别处后才能知道结果

    常见于输入验证码,注册等功能

    onKeyup:

    优点:反应迅速,体验佳;缺点:用在某些地方可能看起来很蠢或影响性能,比如正在输入验证码或者检测是否重名等

    适用于检测数据类型,比如注册页面的密码项

    7 .参考文献

            <p>https://www.oschina.net/translate/angularjs-form-validation</p>
    

    8.更多讨论

    还有那些常见的判断方式?

    Q:现在一般企业用的是什么类型的表单验证?

    A:腾讯阿里百度都是用的失去焦点验证,京东是实时验证

    Q:防点击如何实现的,他有什么作用?

    A:在angular中ng-disable为true的时候就会无法点击,所以我们需要与表单验证绑定起来再做一个取反判断即可,它可以更加人性化,使用户免于多余操作

    Q:为什么要永novalidate

    是在自己编写表单验证插件的时候(如jquery.validate,angular),为了避免和默认的表单验证冲突,

    展开全文
  • 在ASP中,我们通常把表单提交到另外一个页面(接受数据页面)。但是在ASP.NET中,服务端表单通常都是提交到本页面,如果我设置 form1.action="test.aspx"; 那么就会导致视图验证错误错误,因为Asp.net安全机制...

    在ASP中,我们通常把表单提交到另外一个页面(接受数据页面)。但是在ASP.NET中,服务端表单通常都是提交到本页面的,如果我设置

    form1.action="test.aspx";

    那么就会导致视图验证错误的错误,因为Asp.net安全机制引起的。我们也可以关闭这个验证,在接受页面中(test.aspx)头部加上

    <%@ Page EnableViewStateMac="false" %>

    但这样做不是很安全,其实asp.net 2.0 还提供了一种方式提交到其他页面,服务器按钮控件提供了一个属性:PostBackUrl,这样写
    button1.PostBackUrl="test.aspx";

    转载于:https://www.cnblogs.com/mxk-star/p/7678200.html

    展开全文
  • 作为一名web开发,页面的表单处理是常见的,尤其是表单的验证和异步提交表单往往携手并进,对于表单数据有效性验证确实是棘手的问题,每次异步提交前都是 if ( !$('#name‘).val() ) { alert('请输入姓名'); }等等一...

    概述

    作为一名web开发,页面的表单处理是常见的,尤其是表单的验证异步提交表单往往携手并进,对于表单数据有效性验证确实是棘手的问题,每次异步提交前都是 if ( !$('#name‘).val() ) { alert('请输入姓名'); }等等一大堆这种最low的写法,并且异步提交还在使用Jquery原始的$.ajax()方式,虽然不过时可是有更好的代替者。今天给大家介绍Jquery的两款插件Jquery ValidataJquery Form。有了它俩便可以安心的用面向对象的思想解决“表单验证且异步提交”的问题了。

    一、介绍

    Jquery Validata官网(英文):https://jqueryvalidation.org/
    中文教程推荐:“菜鸟教程”:https://www.runoob.com/jquery/jquery-plugin-validate.html

    Jquery Form官网-有点卡(英文):https://plugins.jquery.com/form/

    两款插件可以去官网自行下载。

    最后一节将两个插件结合起来使用。

    二、表单验证Jquery Validata

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。

    你可以将该本地化信息文件 dist/localization/messages_zh.js 引入到页面:

    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

    验证规则

    属性 默认值 类型 说明
    required false boolean 是否必填
    remote - string 使用 ajax 方法调用 check.php 验证输入值。
    email - boolean 电子邮箱格式校验。
    url - boolean 网址格式校验。
    date - boolean 日期格式校验 ie6 出错,慎用。
    dateISO - boolean 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
    number - boolean 校验数字(负数,小数)。
    digits - boolean 校验整数。
    creditcard - boolean 校验信用卡号。
    equalTo - string 如:"#password"。输入值必须和 #password 相同,通常用于密码验证。
    accept - string 输入拥有合法后缀名的字符串(常用来校验上传的文件格式)。
    min - number 如:10,输入值不能小于 10。
    minlength - number 如:10,输入长度最小是 10 的字符串(汉字算一个字符)。
    max - number 如:5,输入值不能大于 5。
    maxlength - number 如:5,输入长度最多是 5 的字符串(汉字算一个字符)。
    range - array 如:[5,10],输入值必须介于 5 和 10 之间。
    rangelength - array 如:[5,10],输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。

    还有大量的API建议去官网或者菜鸟教程的地址先去学习,由于菜鸟教程上已经很详细了,此处省略(其实是偷懒了)。

    三、异步提交表单Jquery Form

    插件优点

    1. 简简单单几句代码,我们就可以实现表单的提交,并且可灵活通过ajaxSubmit()函数基于任何事件的触发实现表单异步提交。
    2. 支持文件上传功能,并在新浏览器中支持进度条更新。
    3. 与jQuery库完美结合,支持jQuery.ajax()函数触发的各种事件,支持jQuery.ajax()中所传递的参数。

    使用方法

    插件提供ajaxSubmit()和ajaxForm()两种表单提交的方式,注意:不要对同一个表单同时使用两种方式。

    $("form").ajaxSubmit(options) 是表单的提交动作

    ajaxSubmit是jQuery表单插件核心函数。非常灵活,因为它依赖于事件机制,只要有事件触发就能使用ajaxSubmit()提交表单,eg:超链接、图片、按钮的click事件。

    $("form").ajaxSubmit(options) 内部直接或模拟jQuery.ajax(options)异步提交,所以也直接支持jQuery.ajax(options)所能处理的参数,并且支持jQuery.ajax(options)过程中所触发的5个局部事件及6个全局事件。

    options相关参数:ajaxSubmit和ajaxForm都适用

    键名 描述
    type (默认为表单的method属性值,若未设置取GET)请求的类型,例如:POST、GET、PUT及PROPFIND。大小写不敏感。
    url (默认取表单的action属性值,若未设置默认取window.location.href)请求的URL地址,可以为绝对地址也可以为相对地址。
    data (对象成员必须包含name和value属性)提供额外数据对象,通过$.param()函数返回序列化后的字符串,稍后会拼接到表单元素序列化的字符串之后。
    error 如果提交错误的回调函数
    dataType 期望服务器返回对象的类型:‘xml’, 'json', 'script'。
    seccess 表单成功提交后调用的回调函数,函数签名:function (data, statusText, xhr, jquery-wrapped), 第一个参数是服务器返回的结果,第二个参数是异步提交是否成功(success/error)
    delegation (适用于ajaxForm)ajaxForm支持Jquery插件的委托方式(需要Jqueryv1.7+),所以当你调用ajaxForm的时候其表单form不一定存在,但动态构建的form会在适当的时候调用ajaxSubmit。
    replaceTarget (默认:false)与target参数共同起作用,True则执行replaceWirh()函数,false则执行html()函数
    target 提供一个Html元素,在请求“成功”并且未设置dataType参数,则将返回的数据replaceWith()或html()掉对象原来的内容,再遍历对象调用success回调函数。
    includeHidden 在请求成功后,若设置执行clearForm()函数清空表单元素则会根据includeHidden设置决定如何清空隐藏域元素。
    1. 1) 传递true,表示清空表单的所有隐藏域元素。
    2. 2) 传递字符串,表示清空特殊匹配的隐藏域表单元素,eg: $('#myForm').clearForm('.special:hidden'),清空class属性包含special值的隐藏域
    clearForm 请求成功时触发(同success),并用options. includeHidden做为回调函数参数。
    回调函数:$form.clearForm(options.includeHidden);
    resetForm 请求成功时触发(同success)。
    回调函数:$form.resetForm()
    semantic 布尔值,指示表单元素序列化时是否严格按照表单元素定义顺序。
    在序列化只有<input type="image" />元素会放在序列化字符串的最后,若semantic=true,则会按照它的定义顺序进行序列化。
    若你服务器严格要求表单序列化字符串的顺序,则使用此参数进行控制。
    iframe (默认:false)若有文件上传'input[type=file]:enabled[value!=""]',指示是否应该使用<iframe>标签(在支持html5文件上传新特性的浏览器中不会使用iframe模式)
    iframeTarget 指定一个现有的<iframe>元素,否则将自动生成一个<iframe>元素以及name属性值。若现有的<iframe>元素没有设置name属性,则会自动生成一个name值
    iframeSrc 为<iframe>元素设定src属性值
    提交前回调函数
    beforeSerialize

    提供在将表单元素序列化为字符串之前,处理表单元素的回调函数。签名:function(form,options)函数说明:当前表单对象、options参数集合返回值:返回false,表示终止表单提交操作。

    beforeSubmit 提供在执行表单提交之前,处理数据的回调函数。
    签名:function(arr, $ form, options)
    函数说明:通过formToArray(options.semantic, elements)返回的表单元素数组、当前表单对象、options参数集合
    返回值:返回false,表示终止表单提交操作。

    $("form").ajaxSubmit(options) 内部将内部直接调用jQuery.ajax(options)返回的jqxhr对象或模拟的jqxhr对象进行了缓存,所以我们可以通过$(“#form”).data(‘jqxhr’)获取到本次提交生成的jqxhr对象。

    ajaxSubmit函数处理流程:

    1. 根据<form action="" method="">处理url、type参数以及success、iframeSrc等参数。
    2. 触发beforeSerialize()回调函数
    3. 序列化data参数和表单元素
    4. 触发beforeSubmit()回调函数
    5. 根据type参数处理options.data和options.url参数
    6. 注册resetForm()和clearForm()回调函数
    7. 注册将返回数据加载到options.target指定的元素上的回调函数
    8. 注册success回调函数,若有options.target则循环该元素,并为每个子元素注册success回调函数
    9. 处理<input type="file" />文件上传元素
      1. 不包含文件元素,直接调用jQuery.ajax()函数。
      2. 包含文件元素,并且不支持XMLHttpRequest Level 2提供的文件上传新特性window.FormData。则通过IFrame模拟表单异步提交。
        1. 调用fileUploadIframe()函数。
        2. 根据options. iframeTarget设置决定是创建一个<iframe>元素还是使用现有的<iframe>元素
        3. 模拟xhr对象以及jQuery.ajax()过程,以支持xhr对象返回和ajax事件触发
        4. 设置<form>的target指向<iframe>元素、encoding和enctype为"multipart/form-data"、method为"post"值等
        5. 处理options.extraData为<input type="hidden" />元素并添加到<form>元素中。
        6. 调用<form>的submit()事件。(同步提交,但因为<form>的target指向<iframe>标签,所以刷新的是<iframe>中的内容,以此模拟异步提交)
      3. 包含文件元素,并且支持XMLHttpRequest Level 2提供的新特性,则调用fileUploadXhr()函数,通过FormData()对象将数据传递给options.data参数,再调用jQuery.ajax(options)函数异步提交表单。并且XMLHttpRequest Level 2的新特性还支持进度条提示功能。
    10. 将内部jqxhr缓存起来,以供访问。$form.removeData('jqxhr').data('jqxhr', jqxhr);
    11. 返回表单元素本身,以便符合jQuery的链式操作模式。

    $("form").ajaxForm(options) 是对原始表单进行接管

    是对$(“any”).ajaxSubmit(options)函数的一个封装,适用于表单提交的方式(注意,主体对象是<form>),会帮你管理表单的submit和提交元素([type=submit],[type=image])的click事件。在出发表单的submit事件时:阻止submit()事件的默认行为(同步提交的行为)并且内部调用$(this).ajaxSubmit(options)函数。

    ajaxForm支持Jquery插件的委托方式(需要Jquery v1.7+),所以当你调用ajaxForm的时候其表单form不一定存在,ajaxSubmit将在适当的时候调用。

    另外:如果你翻看原来码你可能会发现这样的绑定代码:.bind('submit.form-plugin', options, doAjaxSubmit),即submit事件名后面有个”. form-plugin”。这是jQuery事件命名空间语法,作用是方便事件的管理。

    文件上传示例

    <form id="form1" action="ajaxOperation.ashx?Action=formUpload" method="post" enctype="multipart/form-data">
    	<div>附件名字: <input type="text" name="fileName"></div>
    	<div>附件: <input type="file" name="document"></div>
    	<div><input type="submit" value="模拟iframe提交表单" /></div>
    </form>
    <script>
        $("#form1").ajaxForm({
            success : function () {
                alert("成功");
            }
        });
    </script>

     其他静态方法 

    $("form1").ajaxFormUnbind()
    取消$("").ajaxForm(options)函数对指定表单绑定的submit和click事件。

    $("form1").formToArray(semantic,elements)
    序列化当前表单元素到一个数组中,每个数组元素都是包含name和value属性的对象。返回值是内部构件的一个数组元素,而elements参数将包含除<input type=”image”>以外的所有表单元素。

    $("form1").formSerialize(semantic)
    将表当前单元素序列化为字符串形式。

    $("form1").fieldSerialize(successful) 
    序列化包含name属性的表单元素为一个字符串。Successful参数标识是否获取type为reset、button、checkbox、radio、submit、image值得元素以及<select>的值。返回$(el).val()。

    $("form1").fieldValue(successful) 或 $.fieldValue(element, successful)
    获取指定表单中的表单元素或指定表单元素的值。Successful参数标识是否获取type为reset、button、checkbox、radio、submit、image值得元素以及<select>的值。返回$(el).val()。

    $("form1").clearForm(includeHidden)
    清空当前表单中input、select、textarea元素的值。includeHidden设置决定如何清空隐藏域元素。

    • a) 传递true,表示清空表单的所有隐藏域元素。
    • b) 传递字符串,表示清空特殊匹配的隐藏域表单元素,eg: $('#myForm').clearForm('.special:hidden'),清空class属性包含special值的隐藏域

    $.("form1").clearFields(includeHidden) 和 $.("form1").clearInputs(includeHidden)
    作用相同,清空当前表单中所有表单元素的指。includeHidden设置决定如何清空隐藏域元素。

    • a)传递true,表示清空表单的所有隐藏域元素。
    • b)传递字符串,表示清空特殊匹配的隐藏域表单元素,eg: $('#myForm').clearForm('.special:hidden'),清空class属性包含special值的隐藏域

    $("form1").resetForm() 
    重置当前表单元素,导致所有表单元素重置到它的初始值,如果初始有值,则会为初始化的值,如果没有初始值,效果同cleanForm()。

    $("form1").selected(select) 
    将当前表单元素中所有checkbox、radio设置为select。select参数为布尔值。

    四、两款插件结合使用(重点)

    需求:页面有三个控件分别为id, name, age点击提交,请求后台“data”接口,并将三个值再返回前台,异步成功后在控制台打印name的值。

    在实际开发中验证和异步是需要同时进行的,这里介绍两种方法将两款插件结合使用

    4.1 (推荐)在验证通过的处理器中执行异步提交动作

    $("#myForm").validate({
        // 提交处理器 -> 验证通过时处理器(默认是执行form.submit()方法)
        submitHandler : function(form){
            $(form).ajaxSubmit({
                success:function (data) {
                    console.log(data.name);
                }
            });
        }
    });

    注意!

    1. 异步提交的选择器使用submitHandler方法中的参数“form”:$(form)作为异步方法的选择器。
    2. 一定要使用ajaxSubmit()提交异步表单,不能使用ajaxForm()提交。

    效果:直接点击“登录”,验证不通过,不做异步提交(控制台无输出)

    验证通过,则控制台输出

    因为这种写法比较符合顺序逻辑:先验证表单 -> 验证通过的话在提交处理器(submitHandler)中写异步的逻辑。

    4.2 验证是验证,异步是异步,分而治之

    $("#myForm").validate();
    $("#myForm").ajaxForm({
        beforeSubmit: function(arr, $form) {
            return $form.valid();
        },
        success:function (data) {
            console.log(data.name);
        }
    });

    这种写法将验证与异步提交分开来写,关键是异步提交前(beforeSubmit)通过返回验证判断的结果,来确定是否需要异步提交

    注意!

    1. 异步提交一定要使用ajaxForm(),不能使用ajaxSubmit(),因为如果使用ajaxSubmit方法页面加载就会发送异步请求。
    2. beforeSubmit方法中的第二个参数$form,本身就是jqery对象,可以直接调用是否验证通过$form.valid()的方法。

    效果:验证通过则异步提交

    全部前台代码,为了美观引入了Bootstrap.css:

    <!DOCTYPE>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Jquery</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
        <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
        <script src="/form.js"></script>
    </head>
    <body>
        <form id="myForm" class="form-horizontal" role="form" action="data" method="post">
            <div class="form-group">
                <label for="id" class="col-sm-2 control-label">id</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="id" name="id" required
                           placeholder="请输入id">
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                    <input type="text"  class="form-control" id="name" name="name" required minlength="2"
                           placeholder="请输入姓名">
                </div>
            </div>
            <div class="form-group">
                <label for="age" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="digits"  class="form-control" id="age" name="age" required maxlength="3"
                           placeholder="请输入年龄">
                </div>
            </div>
        
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">登录</button>
                </div>
            </div>
        </form>
    
    <script>
    
    $("#myForm").validate({
        submitHandler:function(form){
            $(form).ajaxSubmit({
                success:function (data) {
                    console.log(data.name);
                }
            });
        }
    });
    
    </script>
    
    </body>
    </html>

    总结:

    其实对于验证有很多框架都是类似的处理方式如:Bootstrap Validata等,只要掌握了其使用技巧,对于其他的框架一样可以手到渠成;而ajaxForm()只是jquery对表单提交和ajax()的高度封装,让异步提交表单如此简单。怎么样还不赶快来实际用一下?

    (完)

    展开全文
  • jQuery MiniUI开发系列之:数据验证

    千次阅读 2016-06-21 11:15:33
    jQuery MiniUI提供了比较完美的表单数据验证和错误显示的方式常见的表单控件,都有一个验证事件"validation"。 通过监听处理“validation”事件,我们可以自定义验证规则逻辑、是否验证通过、验证错误描述等...
  • 数据有效性验证方式 非空验证控件 验证控件拖放与基本属性设置 比较验证控件 控件拖放与基本属性 把占位设置为动态模式 范围验证控件 控件拖放与...
  • angularjs 内置已经支持了常见的验证方式,可以轻松实现表单验证。 1. 绑定 为了方便,我们在 $scope 上下文对象上创建一个 model 来表示我们编辑的内容。 $scope.model = { id : 8, name: "alice", ...
  • yii表单验证规则

    2016-03-29 16:52:16
    对yii深入了解总结出:希望对初学者有些帮助 Active Record (AR) 是一个流行的 对象... 常见的 CRUD 操作作为 AR 的方法实现。因此,我们可以以一种更加面向对象的方式访问数据。 例如,我们可以使用以下代码向 tbl_
  • 输入的表单数据可能用于创建或更新数据库条目、调用Web服务、或作为业务过程的输入。基于目前由Struts提供的表单验证框架,页面流提供了一种简单易用的服务端验证方式。 页面流验证提供以下功能:· 用户表单输入的...
  • Struts 页面流(Page flow)表单验证

    千次阅读 2009-04-03 11:33:00
    输入的表单数据可能用于创建或更新数据库条目、调用Web服务、或作为业务过程的输入。基于目前由Struts提供的表单验证框架,页面流提供了一种简单易用的服务端验证方式。 页面流验证提供以下功能:· 用户表单输入的...
  • xml实现登录表单验证

    2014-05-17 12:27:00
     XML(eXtended Markup Language,可扩展标记语言)提供了一套跨平台、跨网络、跨程序语言的数据描述方式,使用XML可以方便地实现数据交换、系统配置、内容管理等常见功能。 XML解析:  在XML文件中由于更多是...
  • Struts2三种数据转移方式

    千次阅读 2012-10-05 19:38:28
    下面通过一个最常见的 登录的例子来看下这三种数据转移方式。页面代码很简单,提交表单中包含有用户名和密码,在Action中得到这两个参数从而 验证用户是否登录成功。 一、JavaBean属性 ...
  • 对yii深入了解总结出:希望对初学者有些帮助 Active Record (AR) 是一个流行的 对象-关系映射 (ORM) 技术。... 常见的 CRUD 操作作为 AR 的方法实现。因此,我们可以以一种更加面向对象的方式访问数据。...
  • 1、常见的请求方式 默认页面请求都是get请求,常用的请求方式get和post: 1、get:默认是get请求,请求数据以明文形式放在路由上,get的格式是以?开头,键等于值的形式,以&来分割键值对,通常用于向服务器获取...
  • 在一些基本的操作的时候,能节省很多的麻烦,其中,在具体使用时,form表单数据提交是最频繁也最常见的前后数据交换方式,所以在前端对于form表单的处理要解决一些问题(数据的获取,表单验证,提交验证)。...
  • 表单校验

    2017-06-05 20:18:45
    1.表单校验的常见内容包括验证是否为空、验证...3.表单校验中常见的两个事件是onsubmit和onblur,常用来激发验证 4.使用正则表达式可验证用户输入的内容 5.定义正则表达式有两种构造形式,一种是普通方式,另一种是
  • flask 表单

    2019-03-03 22:40:00
    在Web程序中,表单时和用户交互最常见的方式之一。用户注册、登录、撰写文章、编辑设置,无一不用到表单。不过,表单的处理不简单。要创建表单验证用户输入的内容,向用户显示错误提示,还要获取并保存数据。 ...
  • Struts2数据校验

    2016-12-30 10:08:00
    Struts2数据校验 1.常见数据校验方法 ...后台校验:也称之为服务器端校验,这里指是使用Struts2通过xml配置的方式进行表单数据验证 Struts2也提供了数据校验的方式: Struts2数据校验通过拦截器完成: <int...
  • 来玩Play框架04 表单

    2017-08-02 09:48:11
    表单(form)是最常见的从客户往服务器传递数据方式。Play框架提供了一些工具。它们可以从表单中提取数据验证提交数据的合法性,或者在视图中显示表单。我先来介绍最简单的使用表单提交数据方式。    ...

空空如也

空空如也

1 2 3 4 5 6
收藏数 120
精华内容 48
关键字:

常见的表单数据验证方式