搜索

首页 >web前端 >js教程 >jQuery autoform脚本轻松表单自动完成

jQuery autoform脚本轻松表单自动完成

Lisa Kudrow
Lisa Kudrow原创
2025-03-01 08:43:09722浏览

jQuery autoform脚本轻松表单自动完成

厌倦了填写网络表格？测试Web表单的堆并继续失去默认值，因为您必须清除cookie？好吧，我为你有待遇！我写了这个名为jquery autoform的jQuery脚本，它的作用很简单 - 它自动为您填充了您的网络表格 。它适用于任何表格，注册表格，注册表格，联系表格，基本上是基于浏览器的表单。适用于重复的表单测试，节省了您的发展时间。由于大多数表格都有不同的名称，例如“名称”，“ fullname”，“ fullname”等……它可以处理此功能，并且对于每种类型的表单字段都可以完全自定义。

钥匙要点

  • > jQuery自动型脚本为自动填充Web表单提供快速且可自定义的解决方案，支持各种表单字段，并自动将日期字段更新为当前日期。
    • 该脚本很容易集成到Web项目中，允许通过书签快速设置，用户可以在任何页面上单击自动填充表单。
  • > 尽管具有多功能性，但JQuery Autoform不支持​​嵌入IFRAMES或弹出窗口中的表格，并且仅适用于具有“名称”属性的字段。
  • jQuery自动型特征

fast - 填充1秒钟以下的表格

    稳定 - 在任何浏览器上工作
    • >可访问 - 可以采用浏览器书签的形式，以便于使用
  • >
    • >可自定义 - 您可以添加任何名称/任何值的输入。>
  • 智能 - 日期不过期，它自动将日期填充到当前日期。
    • > jQuery自动型示例
    • 这是一种包含一些标准字段的表格。








>





创建自己的自动型

  1. >下载jquery4u.util.autoform.js
  2. >自定义您的姓名，电子邮件和其他表格字段
  3. 编辑输入字段名称以匹配特定表单
  4. obfuscate（可选但不错）
  5. >预处理“ JavaScript：”对您的混淆代码，并创建一个新的书签
  6. 访问表格，只需单击书签

> jQuery自动型完整脚本

<span>(function($) {
</span> 
<span>;var JQUERY4U = {};
</span> 
<span>;JQUERY4U.UTIL =
</span><span>{
</span> 
    <span>name: 'JQUERY4U.UTIL',
</span> 
    <span>autoForm: function ()
</span>    <span>{
</span>        <span>/* field values fill forms */
</span>        <span>var formValues  = [];
</span>        formValues<span>['firstname'] = 'jQuery';
</span>        formValues<span>['middlename'] = '4u';
</span>        formValues<span>['lastname'] = 'Blog';
</span>        formValues<span>['mobile'] = '0416425699';
</span>        formValues<span>['email'] = 'email@domain.com';
</span>        formValues<span>['house'] = '123';
</span>        formValues<span>['street'] = 'Bank Street';
</span>        formValues<span>['city'] = 'Sunnybank';  
</span>        formValues<span>['country'] = 'Australia';
</span>        formValues<span>['postcode'] = '4109';
</span>        formValues<span>['message'] = 'This is the demo example of jQuery AutoForm.';
</span>        formValues<span>['emailnewsletter'] = true;
</span>     
        <span>/* field name mappings */
</span>        formValues<span>['newsletter'] = formValues['emailnewsletter'];
</span>        formValues<span>['housenumber'] = formValues['house'];
</span>        formValues<span>['name'] = formValues['firstname'] + ' ' + formValues['middlename'] + ' ' + formValues['lastname'];
</span>        formValues<span>['fullname'] = formValues['name'];
</span>        formValues<span>['phone'] = formValues['mobile'];
</span>        formValues<span>['suburb'] = formValues['city'];
</span>        formValues<span>['address1'] = formValues['housenumber'] + ' ' + formValues['street'];
</span>        formValues<span>['address2'] = formValues['suburb'];
</span>        formValues<span>['address3'] = formValues['country'] + ' ' + formValues['postcode'];
</span>        <span>/* enter more field mappings here */
</span>
        <span>/* date functions */
</span>        <span>function twodigits(digits) {
</span>            <span>return (digits > 9) ? digits : '0' + digits;
</span>        <span>}
</span>        <span>var fullDate = new Date();
</span>        <span>var twoDigitDays = twodigits(fullDate.getDate());
</span>        <span>var twoDigitMonth = twodigits(fullDate.getMonth() + 1);
</span>        <span>var date = twoDigitDays + "/" + twoDigitMonth + "/" + fullDate.getFullYear();
</span>        fullDate<span>.setDate(fullDate.getDate()+7);
</span>        formValues<span>['date'] = date;  
</span>     
        <span>/*serialize every input field on page */
</span>        <span>var fields = $("input, select, textarea").serializeArray();
</span>     
        <span>/* init - special input type fixes */
</span>        <span>$('input[type=checkbox], input[type=radio]').attr('checked', true);
</span>     
        jQuery<span>.each(fields, function(i<span>, field</span>){
</span>            <span>/* check if field has a value in array */
</span>            <span>if (formValues[field.name] !== 'undefined') {
</span>                <span>$('input[name='+field.name+']').val(formValues[field.name]); /* generic inputs */
</span>                <span>$('textarea[name='+field.name+']').val(formValues[field.name]); /* textarea */
</span>                <span>$('select[name='+field.name+']').attr('selectedIndex', 1); /* select */
</span>                <span>$('input[name='+field.name+']').attr('checked', formValues[field.name]); /* checkbox/radio */
</span>            <span>}
</span>        <span>});
</span>    <span>}
</span><span>};
</span><span>JQUERY4U.UTIL.autoForm();
</span> 
<span>})(jQuery);</span>

> jQuery autoform脚本（书签混淆的缩小版本）

> 完成自动填充字段的任何自定义名称时，您的最终脚本应该看起来像下面的代码。将其转换为书签简单的预登录“ JavaScript：”。 
var _0xdd45=["x55x54x49x4C","x4Ax51x55x45x52x59x34x55x2Ex55x54x49x4C","x66x69x72x73x74x6Ex61x6Dx65","x6Ax51x75x65x72x79","x6Dx69x64x64x6Cx65x6Ex61x6Dx65","x34x75","x6Cx61x73x74x6Ex61x6Dx65","x42x6Cx6Fx67","x6Dx6Fx62x69x6Cx65","x30x34x31x36x34x32x35x36x39x39","x65x6Dx61x69x6C","x65x6Dx61x69x6Cx40x64x6Fx6Dx61x69x6Ex2Ex63x6Fx6D","x68x6Fx75x73x65","x31x32x33","x73x74x72x65x65x74","x42x61x6Ex6Bx20x53x74x72x65x65x74","x63x69x74x79","x53x75x6Ex6Ex79x62x61x6Ex6B","x63x6Fx75x6Ex74x72x79","x41x75x73x74x72x61x6Cx69x61","x70x6Fx73x74x63x6Fx64x65","x34x31x30x39","x6Dx65x73x73x61x67x65","x54x68x69x73x20x69x73x20x74x68x65x20x64x65x6Dx6Fx20x65x78x61x6Dx70x6Cx65x20x6Fx66x20x6Ax51x75x65x72x79x20x41x75x74x6Fx46x6Fx72x6Dx2E","x65x6Dx61x69x6Cx6Ex65x77x73x6Cx65x74x74x65x72","x6Ex65x77x73x6Cx65x74x74x65x72","x68x6Fx75x73x65x6Ex75x6Dx62x65x72","x6Ex61x6Dx65","x20","x66x75x6Cx6Cx6Ex61x6Dx65","x70x68x6Fx6Ex65","x73x75x62x75x72x62","x61x64x64x72x65x73x73x31","x61x64x64x72x65x73x73x32","x61x64x64x72x65x73x73x33","x30","x67x65x74x44x61x74x65","x67x65x74x4Dx6Fx6Ex74x68","x2F","x67x65x74x46x75x6Cx6Cx59x65x61x72","x73x65x74x44x61x74x65","x64x61x74x65","x73x65x72x69x61x6Cx69x7Ax65x41x72x72x61x79","x69x6Ex70x75x74x2Cx20x73x65x6Cx65x63x74x2Cx20x74x65x78x74x61x72x65x61","x63x68x65x63x6Bx65x64","x61x74x74x72","x69x6Ex70x75x74x5Bx74x79x70x65x3Dx63x68x65x63x6Bx62x6Fx78x5Dx2Cx20x69x6Ex70x75x74x5Bx74x79x70x65x3Dx72x61x64x69x6Fx5D","x75x6Ex64x65x66x69x6Ex65x64","x76x61x6C","x69x6Ex70x75x74x5Bx6Ex61x6Dx65x3D","x5D","x74x65x78x74x61x72x65x61x5Bx6Ex61x6Dx65x3D","x73x65x6Cx65x63x74x65x64x49x6Ex64x65x78","x73x65x6Cx65x63x74x5Bx6Ex61x6Dx65x3D","x65x61x63x68","x61x75x74x6Fx46x6Fx72x6D"];(function (_0x65dfx1){;;var _0x65dfx2={};;;_0x65dfx2[_0xdd45[0]]={name:_0xdd45[1],autoForm:function (){var _0x65dfx3=[];_0x65dfx3[_0xdd45[2]]=_0xdd45[3];_0x65dfx3[_0xdd45[4]]=_0xdd45[5];_0x65dfx3[_0xdd45[6]]=_0xdd45[7];_0x65dfx3[_0xdd45[8]]=_0xdd45[9];_0x65dfx3[_0xdd45[10]]=_0xdd45[11];_0x65dfx3[_0xdd45[12]]=_0xdd45[13];_0x65dfx3[_0xdd45[14]]=_0xdd45[15];_0x65dfx3[_0xdd45[16]]=_0xdd45[17];_0x65dfx3[_0xdd45[18]]=_0xdd45[19];_0x65dfx3[_0xdd45[20]]=_0xdd45[21];_0x65dfx3[_0xdd45[22]]=_0xdd45[23];_0x65dfx3[_0xdd45[24]]=true;_0x65dfx3[_0xdd45[25]]=_0x65dfx3[_0xdd45[24]];_0x65dfx3[_0xdd45[26]]=_0x65dfx3[_0xdd45[12]];_0x65dfx3[_0xdd45[27]]=_0x65dfx3[_0xdd45[2]]+_0xdd45[28]+_0x65dfx3[_0xdd45[4]]+_0xdd45[28]+_0x65dfx3[_0xdd45[6]];_0x65dfx3[_0xdd45[29]]=_0x65dfx3[_0xdd45[27]];_0x65dfx3[_0xdd45[30]]=_0x65dfx3[_0xdd45[8]];_0x65dfx3[_0xdd45[31]]=_0x65dfx3[_0xdd45[16]];_0x65dfx3[_0xdd45[32]]=_0x65dfx3[_0xdd45[26]]+_0xdd45[28]+_0x65dfx3[_0xdd45[14]];_0x65dfx3[_0xdd45[33]]=_0x65dfx3[_0xdd45[31]];_0x65dfx3[_0xdd45[34]]=_0x65dfx3[_0xdd45[18]]+_0xdd45[28]+_0x65dfx3[_0xdd45[20]];function _0x65dfx4(_0x65dfx5){return (_0x65dfx5>9)?_0x65dfx5:_0xdd45[35]+_0x65dfx5;} ;var _0x65dfx6= new Date();var _0x65dfx7=_0x65dfx4(_0x65dfx6[_0xdd45[36]]());var _0x65dfx8=_0x65dfx4(_0x65dfx6[_0xdd45[37]]()+1);var _0x65dfx9=_0x65dfx7+_0xdd45[38]+_0x65dfx8+_0xdd45[38]+_0x65dfx6[_0xdd45[39]]();_0x65dfx6[_0xdd45[40]](_0x65dfx6[_0xdd45[36]]()+7);_0x65dfx3[_0xdd45[41]]=_0x65dfx9;var _0x65dfxa=_0x65dfx1(_0xdd45[43])[_0xdd45[42]]();_0x65dfx1(_0xdd45[46])[_0xdd45[45]](_0xdd45[44],true);jQuery[_0xdd45[54]](_0x65dfxa,function (_0x65dfxb,_0x65dfxc){if(_0x65dfx3[_0x65dfxc[_0xdd45[27]]]!==_0xdd45[47]){_0x65dfx1(_0xdd45[49]+_0x65dfxc[_0xdd45[27]]+_0xdd45[50])[_0xdd45[48]](_0x65dfx3[_0x65dfxc[_0xdd45[27]]]);_0x65dfx1(_0xdd45[51]+_0x65dfxc[_0xdd45[27]]+_0xdd45[50])[_0xdd45[48]](_0x65dfx3[_0x65dfxc[_0xdd45[27]]]);_0x65dfx1(_0xdd45[53]+_0x65dfxc[_0xdd45[27]]+_0xdd45[50])[_0xdd45[45]](_0xdd45[52],1);_0x65dfx1(_0xdd45[49]+_0x65dfxc[_0xdd45[27]]+_0xdd45[50])[_0xdd45[45]](_0xdd45[44],_0x65dfx3[_0x65dfxc[_0xdd45[27]]]);} ;} );} };_0x65dfx2[_0xdd45[0]][_0xdd45[55]]();} )(jQuery);
[/cc]

进一步说明

  • >将无法在iFrame嵌入式表单或弹出窗口上使用。
    • >
  • >只会填充“名称”属性的字段。
    • >
  • 日期不到期 - 它自动将日期填充到当前日期。
经常询问有关jQuery autoform

的问题

>如何在我的html代码中实现jQuery自动型？

>在您的html代码中实现jQuery自动型是一个简单的过程。首先，您需要在HTML文件中包含jQuery库。您可以通过在html文件的头部部分中添加以下脚本标签来做到这一点：

以上是jQuery autoform脚本轻松表单自动完成的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript json jquery ajax html Boolean Object if for select checkbox date include Error auto using class Attribute JS symbol function default dom this alert input windows https iframe Newsletter Other
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：10 Funny and Entertaining JavaScript Effects下一篇：jQuery AJAX Differences Between GET vs POST

相关文章

查看更多