web表单注册验证过程及源码_注册表单里面性别代码怎么写-程序员宅基地

技术标签： 李炎恢老师知问表单注册登录源码  前端注册表单速成  前端表单完整注册和登录过程  求知  

效果图：

     

     

     

 




第一部分：

学习要点：
1.核心方法
2.option 参数
3.工具方法

传统的表单提交，需要多次跳转页面，极大的消耗资源也缺乏良好的用户体验。而这款form.js 表单的 Ajax 提交插件将解决这个问题。

一．核心方法
官方网站：http://malsup.com/jquery/form/
form.js 插件有两个核心方法：ajaxForm()和 ajaxSubmit()，它们集合了从控制表单元素到决定如何管理提交进行的功能。

[java]  view plain  copy
  1. //ajaxForm 提交方式  
  2. $('#reg').ajaxForm(function () {  
  3. alert('提交成功！');  
  4. });  
注意：使用 ajaxForm()方法，会直接实现 ajax 提交。自动阻止了默认行为，而它提交的默认页面是 form 控件的 action 属性的值。提交的方式是 method 属性的值。

[java]  view plain  copy
  1. //ajaxSubmit()提交方式  
  2. $('#reg').submit(function () {  
  3. $(this).ajaxSubmit(function () {  
  4. alert('提交成功！');  
  5. });  
  6. return false;  
  7. });  
注意： ajaxForm()方法，是针对 form 直接提交的， 所以阻止了默认行为。而 ajaxSubmit()方法，由于是针对 submit()方法的，所以需要手动阻止默认行为。而使用了 validate.js 验证插件，那么 ajaxSubmit()比较适合我们。
二．option 参数
option 参数是一个以键值对传递的对象，可以通过这个对象，设置各种 Ajax 提交的功能。
[java]  view plain  copy
  1. $('#reg').submit(function () {  
  2.     $(this).ajaxSubmit({  
  3.     url : 'test.php', //设置提交的 url，可覆盖 action 属性  
  4.     target : '#box', //服务器返回的内容存放在#box 里  
  5.     type : 'POST', //GET,POST  
  6.     dataType : null, //xml,json,script，默认为 null  
  7.     clearForm : true, //成功提交后，清空表单  
  8.     resetForm : true, //成功提交后，重置表单  
  9.     data : { //增加额外的数据提交  
  10.     aaa : 'bbb',  
  11.     ccc : 'ddd'.  
  12. },  
  13. beforeSubmit : function (formData, jqForm, options) {  
  14.     alert(formData[0].name); //得到传递表单元素的 name  
  15.     alert(formData[0].value); //得到传递表单元素的 value  
  16.     alert(jqForm); //得到 form 的 jquery 对象  
  17.     alert(options); //得到目前 options 设置的属性  
  18.     alert('正在提交中！ ！ ！');  
  19.     return true;  
  20. },  
  21. success : function (responseText, statusText) {  
  22.     alert(responseText + statusText); //成功后回调  
  23. },  
  24. error : function (event, errorText, errorType) { //错误时调用  
  25.     alert(errorText + errorType);  
  26. },  
  27. });  
  28.     return false;  
  29. });  

三．工具方法
form.js 除了提供两个核心方法之外，还提供了一些常用的工具方法。这些方法主要是在提交前或后对数据或表单进行处理的。
//表单序列化
alert($('#reg').formSerialize());
//序列化某一个字段
alert($('#reg #user').fieldSerialize());
//得到某个字段的 value 值
alert($('#reg #user').fieldValue());
//重置表单
$('#reg').resetForm()
//清空某个字段
$('#reg #user').clearFields();


第二部分：

学习要点：

1.创建数据库
2.Loading 制作

3.Ajax 提交

运用两大表单插件，完成数据表新增的工作。

一．创建数据库
创建一个数据库，名称为：zhiwen。表为：id、user、pass、email、sex、birthday、date。所需的 PHP 文件：config.php、add.php、is_user.php。

[java]  view plain  copy
  1. //config.php  
  2. <?php  
  3. header('Content-Type:text/html; charset=utf-8');  
  4. define('DB_HOST', 'localhost');  
  5. define('DB_USER', 'root');  
  6. define('DB_PWD', '123456');  
  7. define('DB_NAME', 'zhiwen');  
  8. $conn = @mysql_connect(DB_HOST, DB_USER, DB_PWD) or die('数据库链接失  
  9. 败：'.mysql_error());  
  10. @mysql_select_db(DB_NAME) or die('数据库错误：'.mysql_error());  
  11. @mysql_query('SET NAMES UTF8') or die('字符集错误：'.mysql_error());  
  12. ?>  
  13. //add.php  
  14. <?php  
  15. require 'config.php';  
  16. $query = "INSERT INTO user (user, pass, email, sex, birthday, date)  
  17. VALUES ('{$_POST['user']}', sha1('{$_POST['pass']}'), '{$_POST['email']}',  
  18. '{$_POST['sex']}', '{$_POST['birthday']}', NOW())";  
  19. mysql_query($query) or die('新增失败！'.mysql_error());  
  20. echo mysql_affected_rows();  
  21. mysql_close();  
  22. ?>  
  23. //is_user.php  
  24. <?php  
  25. require 'config.php';  
  26. $query = mysql_query("SELECT user FROM user WHERE user='{$_POST['user']}'")  
  27. or die('SQL 错误！');  
  28. if (mysql_fetch_array($query, MYSQL_ASSOC)) {  
  29. echo 'false';  
  30. } else {  
  31. echo 'true';  
  32. }  
  33. mysql_close();  
  34. ?>  
二．Loading 制作
在提交表单的时候，用于网络速度问题，可能会出现不同时间延迟。所以，为了更好的用户体验，在提交等待过程中，设置 loading 是非常有必要的。

[java]  view plain  copy
  1. //采用对话框式  
  2. $('#loading').dialog({  
  3. modal : true,  
  4. autoOpen : false,  
  5. closeOnEscape : false, //按下 esc 无效  
  6. resizable : false,  
  7. draggable : false,  
  8. width : 180,  
  9. height: 50,  
  10. }).parent().parent().find('.ui-widget-header').hide(); //去掉 header 头  
  11. //CSS 部分  
  12. #loading {  
  13. background:url(../img/loading.gif) no-repeat 20px center;  
  14. line-height:25px;  
  15. font-size:14px;  
  16. font-weight:bold;  
  17. text-indent:40px;  
  18. color:#666;  
  19. }  
三．Ajax 提交

最后，我们需要采用 form.js 插件对数据进行提交。而且在其他部分需要做一些修改。

[java]  view plain  copy
  1. submitHandler : function(form){  
  2.             $(form).ajaxSubmit({  
  3.                 url : 'add.php',  
  4.                 type : 'post',  
  5.                 beforeSubmit : function(form){  
  6.                     $('#loading').dialog('open');  
  7.                     $('#reg').dialog('widget').find('button').eq(1).button('disable');  
  8.                 },  
  9.                 success : function(responseText,statusText){  
  10.                     $('#reg').dialog('widget').find('button').eq(1).button('enable');  
  11.                     if(responseText){  
  12.                         $('#loading').css('background','url(img/success.gif) no-repeat 15px 10px').html('数据提交成功...');  
  13.                         setTimeout(function(){  
  14.                             $('#loading').dialog('close');  
  15.                             $('#loading').css('background','url(url(img/loading.gif) no-repeat 15px 10px)').html('数据正在交互之中...');  
  16.                             $('#reg').dialog('close');  
  17.                             $('#reg').resetForm();  
  18.                             $('#reg span.star').html('*').removeClass('success');  
  19.                         },1000)  
  20.                     }  
  21.                 }  
  22.             });  
  23.         },  


下面是实施的全部代码：

1、先导入jquery.form.js文件

index.html:

[java]  view plain  copy
  1. <!DOCTYPE>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  5.     <script type="text/javascript" src="js/jquery.js"></script>  
  6.     <script type="text/javascript" src="js/jquery-ui.js"></script>  
  7.     <script type="text/javascript" src="js/jquery.validate.js"></script>  
  8.     <script type="text/javascript" src="js/jquery.form.js"></script>  
  9.     <script type="text/javascript" src="js/index.js"></script>  
  10.     <link rel="stylesheet" type="text/css" href="css/jquery-ui.css"></link>  
  11.     <link rel="stylesheet" type="text/css" href="css/style.css"></link>  
  12.     <script type="text/javascript">  
  13.     </script>  
  14. </head>  
  15. <body>  
  16.     <div id="header">  
  17.         <div class="header_main">  
  18.             <h1>知问</h1>  
  19.             <div class="header_search">  
  20.                 <input type="text" class="search" name="search"/>  
  21.             </div>  
  22.             <div class="header_button">  
  23.                 <input type="button" id="search_button" value="查询"/>  
  24.             </div>  
  25.             <div class="header_member">  
  26.                 <a href="###" id="reg_a">注册 </a> 
                    <a href="###" id="member">用户</a> 
                    |
                    <a href="###" id="login_a">登录 </a>
                    <a href="###" id="logout_a">退出</a>
  27.         </div>  
  28.         </div>          
  29.     </div>  
  30.     <form id="reg" title="知问注册">  
  31.         <ol class="reg_error"></ol>  
  32.         <p>  
  33.             <label for="user">账号：</label>  
  34.             <input type="text" name="user" class="text"></input>  
  35.             <span class="star">*</span>  
  36.         </p>  
  37.         <p>  
  38.             <label for="pass">密码：</label>  
  39.             <input type="text" name="pass" class="text" id="pass" />  
  40.             <span class="star">*</span>  
  41.         </p>  
  42.         <p>  
  43.             <label for="email">邮箱：</label>  
  44.             <input type="text" name="email" class="text" id="email" />  
  45.             <span class="star">*</span>  
  46.         </p>  
  47.         <p>  
  48.             <label>性别：</label>  
  49.             <input type="radio" name="sex" id="male" checked="checked"><label  
  50.             for="male">男</label></input><input type="radio" name="sex" id="female"><label  
  51.             for="female">女</label></input>  
  52.         </p>  
  53.         <p>  
  54.             <label for="date">生日：</label>  
  55.             <input type="text" name="date" readonly="readonly" class="text" id="date" />  
  56.         </p>  
  57.     </form>  
  58.     <div id="loading">数据正在交互之中...</div>  
  59. </body>  
  60. </html>  

style.css:

[java]  view plain  copy
  1. body{  
  2.     margin:0;  
  3.     padding:0;  
  4.     font-size:15px;  
  5.     font-family:'宋体';  
  6.     background:#fff;  
  7. }  
  8. #header{  
  9.     width:100%;  
  10.     height:40px;  
  11.     background:url(../img/header_bg.png);  
  12.     position:absolute;  
  13.     top:0px;  
  14. }  
  15. #header .header_main{  
  16.     width:800px;  
  17.     height:40px;  
  18.     margin:0 auto;  
  19. }  
  20. #header .header_main h1{  
  21.     font-size:20px;  
  22.     margin:0;  
  23.     padding:0;  
  24.     color:#666;  
  25.     height:40px;  
  26.     line-height:40px;  
  27.     padding:0 10px;  
  28.     float:left;  
  29. }  
  30. #header .header_search{  
  31.     padding:6px 0;  
  32.     float:left;  
  33. }  
  34. #header .header_search .search{  
  35.     width:300px;  
  36.     height:24px;  
  37.     border:1px solid #ccc;  
  38.     background:#fff;  
  39.     color:#666;  
  40.     font-size:14px;  
  41.     text-indent:5px;  
  42. }  
  43. #header .header_button {  
  44.     padding:0 5px;  
  45.     float:left;  
  46. }  
  47. #header .header_member{  
  48.     float:right;  
  49.     height:40px;  
  50.     line-height:40px;  
  51.     color:#555;  
  52.     font-size:14px;  
  53. }  
  54. #header .header_member a{   
  55.     text-decoration:none;  
  56.     color:#555;  
  57.     font-size:14px;  
  58. }  
  59.   
  60. #reg{  
  61.     padding:15px 0 0 15px;  
  62. }  
  63. #reg p {  
  64. margin:10px 0;  
  65. padding:0;  
  66. }  
  67.   
  68. #reg p label {  
  69.     font-size:14px;  
  70.     color:#666;  
  71. }  
  72. #reg p .star{  
  73.     color:red;  
  74. }  
  75. #reg p .success {  
  76.     display:inline-block;  
  77.     width:28px;  
  78.     background:url(../img/reg_succ.png) no-repeat;  
  79. }  
  80. #reg ol{  
  81.     margin:0;  
  82.     padding:0 0 0 20px;  
  83.     color:maroon;  
  84. }  
  85. #reg ol li {  
  86.     height:20px;  
  87. }  
  88. #reg .text{  
  89.     border-radius:4px;  
  90.     border:1px solid #ccc;  
  91.     background":#fff;  
  92.     height:25px;  
  93.     width:200px;  
  94.     text-indent:5px;  
  95.     color:#666;  
  96. }  
  97. #loading{  
  98.     background : url(../img/loading.gif) no-repeat 15px 10px;  
  99.     line-height : 25px;  
  100.     font-size:14px;  
  101.     font-weight:bold;  
  102.     text-indent:40px;  
  103.     color:#666;  
  104. }  
  105. .ui-tooltip {  
  106. color:red;  
  107. }  
  108. .ui-menu-item a.ui-state-focus {  
  109.     background:url(../img/ui_header_bg.png);  
  110. }  

index.js:

[java]  view plain  copy
  1. $(function(){  
  2.     $('#search_button').button({  
  3.             icons : {  
  4.             primary : 'ui-icon-search',  
  5.         },  
  6.     });  
  7.     $('#reg_a').click(function(){  
  8.         $('#reg').dialog('open');  
  9.     });  
  10.     $('#loading').dialog({  
  11.         modal : true,  
  12.         autoOpen : false,  
  13.         closeOnEscape : false, //按下 esc 无效  
  14.         resizable : false,  
  15.         draggable : false,  
  16.         width : 210,  
  17.         height: 50,  
  18.     }).parent().find('.ui-widget-header').hide();//去掉 header 头  
  19.     $('#reg').dialog({  
  20.         autoOpen:false,  
  21.         modal:true,  
  22.         resizable:false,  
  23.         width:320,  
  24.         height:340,  
  25.         buttons:{  
  26.             '提交':function(){  
  27.                 $(this).submit();  
  28.             }  
  29.         }  
  30.     }).buttonset().validate({  
  31.       
  32.         submitHandler : function(form){  
  33.             $(form).ajaxSubmit({  
  34.                 url : 'add.php',  
  35.                 type : 'post',  
  36.                 beforeSubmit : function(form){  
  37.                     $('#loading').dialog('open');  
  38.                     $('#reg').dialog('widget').find('button').eq(1).button('disable');  
  39.                 },  
  40.                 success : function(responseText,statusText){  
  41.                     $('#reg').dialog('widget').find('button').eq(1).button('enable');  
  42.                     if(responseText){  
  43.                         $('#loading').css('background','url(img/success.gif) no-repeat 15px 10px').html('数据提交成功...');  
  44.                         
  45.                         //在用户登录后，引入cookie中存放的用户名
                                $.cookie('user',$('#user').val());
  46.                         setTimeout(function(){  
  47.                             $('#loading').dialog('close');  
  48.                             $('#loading').css('background','url(img/loading.gif) no-repeat 15px 10px').html('数据正在交互之中...');  
  49.                             $('#reg').dialog('close');  
  50.                             $('#reg').resetForm();  
  51.                             $('#reg span.star').html('*').removeClass('success');  
  52.                         },1000)  
  53.                     }  
  54.                 }  
  55.             });  
  56.         },  
  57.         showErrors : function(errorMap,errorList){  
  58.             var errors = this.numberOfInvalids();  
  59.             if(errors > 0){  
  60.                 $('#reg').dialog('option','height',errors * 20 + 340);  
  61.             }else {  
  62.                 $('#reg').dialog('option','height',340);  
  63.             }  
  64.             this.defaultShowErrors();  
  65.         },  
  66.         highlight : function(element,errorClass){  
  67.             $(element).css('border','1px solid #630');  
  68.             $(element).parent().find('span').html('*').removeClass('success');  
  69.         },  
  70.         unhighlight : function(element,errorClass){  
  71.             $(element).css('border','1px solid #ccc');  
  72.             $(element).parent().find('span').html(' ').addClass('success');  
  73.         },  
  74.         errorLabelContainer : 'ol.reg_error',  
  75.         wrapper : 'li',  
  76.         rules : {  
  77.             user : {  
  78.                 required : true,  
  79.                 minlength : 2,  
  80.             },  
  81.             pass : {  
  82.                 required : true,  
  83.                 rangelength : [6,12],  
  84.             },  
  85.             email : {  
  86.                 required :true,  
  87.                 email : true,  
  88.             }  
  89.         },  
  90.         messages : {  
  91.             user : {  
  92.                 required : '帐号不得为空！',  
  93.                 minlength : jQuery.format('帐号不得小于{0}位！'),  
  94.             },  
  95.             pass : {  
  96.                 required : '密码不能为空！',  
  97.                 rangelength : $.format('密码的长度在{0}-{1}位之间'),  
  98.             },  
  99.             email : {  
  100.                 required : '邮箱不能为空!',  
  101.                 email : '请输入正确的邮箱格式!',  
  102.             }  
  103.         }  
  104.     });  
  105.     $('#reg input[title]').tooltip({  
  106.         position : {  
  107.             my : 'left center',  
  108.             at : 'right+5 center'/*right加上5个像素*/  
  109.         },  
  110.     });  
  111.     $('#date').datepicker({  
  112.         dateFormat : 'yy-mm-dd',    
  113.         dayNames : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],    
  114.         dayNamesShort : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],    
  115.         dayNamesMin : ['日','一','二','三','四','五','六'],    
  116.         monthNames : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],    
  117.         monthNamesShort : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],    
  118.         showButtonPanel : true,    
  119.         closeText : '关闭',    
  120.         currentText : '今天',    
  121.         nextText : '下个月',    
  122.         prevText : '上个月',    
  123.         changeMonth : true,    
  124.         changeYear :true,    
  125.         yearRange : '1950:2050',    
  126.     });  
  127.     var srcArray=['[email protected]', '[email protected]', '[email protected]'];  
  128.     $('#email').autocomplete({  
  129.         delay:0,  
  130.         autoFocus : true,  
  131.         source:function(request,response){  
  132.              var hosts=['qq.com','163.com','126.com','gmail.com','hostmail.com'],  
  133.              term=request.term,//获取输入的内容  
  134.              name=term,  
  135.              host='',           //域名  
  136.              ix=name.indexOf('@'),//获取@的位置  
  137.              result=[];         //结果  
  138.              //结果第一条是自己输入  
  139.             result.push(term);  
  140.              if(ix>-1){  
  141.                 name=term.slice(0,ix);  
  142.                 host=term.slice(ix+1);  
  143.              }  
  144.              if(name){  
  145.                 //得到找到的域名  
  146.                 var findedHosts=(host ? $.grep(hosts,function(value,index){  
  147.                     return value.indexOf(host) > -1  
  148.                 }):hosts),  
  149.                 findedResults=$.map(findedHosts,function(value,index){  
  150.                     return name+"@"+value;  
  151.                 });  
  152.                 result=result.concat(findedResults);  
  153.              }  
  154.              response(result);  
  155.         },  
  156.     });  
  157. });$(function(){  
  158.     $('#search_button').button({  
  159.             icons : {  
  160.             primary : 'ui-icon-search',  
  161.         },  
  162.     });  
  163.     $('#reg_a').click(function(){  
  164.         $('#reg').dialog('open');  
  165.     });  
  166.     $('#loading').dialog({  
  167.         modal : true,  
  168.         autoOpen : false,  
  169.         closeOnEscape : false, //按下 esc 无效  
  170.         resizable : false,  
  171.         draggable : false,  
  172.         width : 210,  
  173.         height: 50,  
  174.     }).parent().find('.ui-widget-header').hide();//去掉 header 头  
  175.     $('#reg').dialog({  
  176.         autoOpen:false,  
  177.         modal:true,  
  178.         resizable:false,  
  179.         width:320,  
  180.         height:340,  
  181.         buttons:{  
  182.             '提交':function(){  
  183.                 $(this).submit();  
  184.             }  
  185.         }  
  186.     }).buttonset().validate({  
  187.       
  188.         submitHandler : function(form){  
  189.             $(form).ajaxSubmit({  
  190.                 url : 'add.php',  
  191.                 type : 'post',  
  192.                 beforeSubmit : function(form){  
  193.                     $('#loading').dialog('open');  
  194.                     $('#reg').dialog('widget').find('button').eq(1).button('disable');  
  195.                 },  
  196.                 success : function(responseText,statusText){  
  197.                     $('#reg').dialog('widget').find('button').eq(1).button('enable');  
  198.                     if(responseText){  
  199.                         $('#loading').css('background','url(img/success.gif) no-repeat 15px 10px').html('数据提交成功...'); 

  201.                         //在用户登录后，引入cookie中存放的用户名
                            $.cookie('user',$('#user').val()); 

  203.                         setTimeout(function(){  
  204.                             $('#loading').dialog('close');  
  205.                             $('#loading').css('background','url(img/loading.gif) no-repeat 15px 10px').html('数据正在交互之中...');  
  206.                             $('#reg').dialog('close');  
  207.                             $('#reg').resetForm();  
  208.                             $('#reg span.star').html('*').removeClass('success'); 
  209.                               
  1.                              //当用户提交注册表单加载完成后，隐藏登录与注册、显示用户名和退出按钮 
  2.                             $('#reg_a,#login_a').hide();   //隐藏登录与注册
  3.                             $('#member,#logout_a').show();  //显示用户名和退出
  4.                             $('#member').html($.cookie('user'));  //替换cookie中的用户名
  1.                         },1000)  
  2.                     }  
  3.                 }  
  4.             });  
  5.         },  
  6.         showErrors : function(errorMap,errorList){  
  7.             var errors = this.numberOfInvalids();  
  8.             if(errors > 0){  
  9.                 $('#reg').dialog('option','height',errors * 20 + 340);  
  10.             }else {  
  11.                 $('#reg').dialog('option','height',340);  
  12.             }  
  13.             this.defaultShowErrors();  
  14.         },  
  15.         highlight : function(element,errorClass){  
  16.             $(element).css('border','1px solid #630');  
  17.             $(element).parent().find('span').html('*').removeClass('success');  
  18.         },  
  19.         unhighlight : function(element,errorClass){  
  20.             $(element).css('border','1px solid #ccc');  
  21.             $(element).parent().find('span').html(' ').addClass('success');  
  22.         },  
  23.         errorLabelContainer : 'ol.reg_error',  
  24.         wrapper : 'li',  
  25.         rules : {  
  26.             user : {  
  27.                 required : true,  
  28.                 minlength : 2,  
  29.             },  
  30.             pass : {  
  31.                 required : true,  
  32.                 rangelength : [6,12],  
  33.             },  
  34.             email : {  
  35.                 required :true,  
  36.                 email : true,  
  37.             }  
  38.         },  
  39.         messages : {  
  40.             user : {  
  41.                 required : '帐号不得为空！',  
  42.                 minlength : jQuery.format('帐号不得小于{0}位！'),  
  43.             },  
  44.             pass : {  
  45.                 required : '密码不能为空！',  
  46.                 rangelength : $.format('密码的长度在{0}-{1}位之间'),  
  47.             },  
  48.             email : {  
  49.                 required : '邮箱不能为空!',  
  50.                 email : '请输入正确的邮箱格式!',  
  51.             }  
  52.         }  
  53.     });  
  54.     $('#reg input[title]').tooltip({  
  55.         position : {  
  56.             my : 'left center',  
  57.             at : 'right+5 center'/*right加上5个像素*/  
  58.         },  
  59.     });  
  60.     $('#date').datepicker({  
  61.         dateFormat : 'yy-mm-dd',    
  62.         dayNames : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],    
  63.         dayNamesShort : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],    
  64.         dayNamesMin : ['日','一','二','三','四','五','六'],    
  65.         monthNames : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],    
  66.         monthNamesShort : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],    
  67.         showButtonPanel : true,    
  68.         closeText : '关闭',    
  69.         currentText : '今天',    
  70.         nextText : '下个月',    
  71.         prevText : '上个月',    
  72.         changeMonth : true,    
  73.         changeYear :true,    
  74.         yearRange : '1950:2050',    
  75.     });  
  76.     var srcArray=['[email protected]', '[email protected]', '[email protected]'];  
  77.     $('#email').autocomplete({  
  78.         delay:0,  
  79.         autoFocus : true,  
  80.         source:function(request,response){  
  81.              var hosts=['qq.com','163.com','126.com','gmail.com','hostmail.com'],  
  82.              term=request.term,//获取输入的内容  
  83.              name=term,  
  84.              host='',           //域名  
  85.              ix=name.indexOf('@'),//获取@的位置  
  86.              result=[];         //结果  
  87.              //结果第一条是自己输入  
  88.             result.push(term);  
  89.              if(ix>-1){  
  90.                 name=term.slice(0,ix);  
  91.                 host=term.slice(ix+1);  
  92.              }  
  93.              if(name){  
  94.                 //得到找到的域名  
  95.                 var findedHosts=(host ? $.grep(hosts,function(value,index){  
  96.                     return value.indexOf(host) > -1  
  97.                 }):hosts),  
  98.                 findedResults=$.map(findedHosts,function(value,index){  
  99.                     return name+"@"+value;  
  100.                 });  
  101.                 result=result.concat(findedResults);  
  102.              }  
  103.              response(result);  
  104.         },  
  105.     });  
  106. });  
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35455142/article/details/79197684

智能推荐

攻防世界_难度8_happy_puzzle_攻防世界困难模式攻略图文-程序员宅基地

文章浏览阅读645次。这个肯定是末尾的IDAT了，因为IDAT必须要满了才会开始一下个IDAT，这个明显就是末尾的IDAT了。，对应下面的create_head()代码。，对应下面的create_tail()代码。不要考虑爆破，我已经试了一下，太多情况了。题目来源：UNCTF。_攻防世界困难模式攻略图文

达梦数据库的导出（备份）、导入_达梦数据库导入导出-程序员宅基地

文章浏览阅读2.9k次，点赞3次，收藏10次。偶尔会用到，记录、分享。1. 数据库导出1.1 切换到dmdba用户su - dmdba1.2 进入达梦数据库安装路径的bin目录，执行导库操作　　导出语句：./dexp cwy_init/[email protected]:5236 file=cwy_init.dmp log=cwy_init_exp.log　注释：　　 cwy_init/init_123..._达梦数据库导入导出

js引入kindeditor富文本编辑器的使用_kindeditor.js-程序员宅基地

文章浏览阅读1.9k次。1. 在官网上下载KindEditor文件，可以删掉不需要要到的jsp，asp，asp.net和php文件夹。接着把文件夹放到项目文件目录下。2. 修改html文件，在页面引入js文件：<script type="text/javascript" src="./kindeditor/kindeditor-all.js"></script><script type="text/javascript" src="./kindeditor/lang/zh-CN.js"_kindeditor.js

STM32学习过程记录11——基于STM32G431CBU6硬件SPI+DMA的高效WS2812B控制方法-程序员宅基地

文章浏览阅读2.3k次，点赞6次，收藏14次。SPI的详情简介不必赘述。假设我们通过SPI发送0xAA，我们的数据线就会变为10101010，通过修改不同的内容，即可修改SPI中0和1的持续时间。比如0xF0即为前半周期为高电平，后半周期为低电平的状态。在SPI的通信模式中，CPHA配置会影响该实验，下图展示了不同采样位置的SPI时序图[1]。CPOL = 0，CPHA = 1：CLK空闲状态 = 低电平，数据在下降沿采样，并在上升沿移出CPOL = 0，CPHA = 0：CLK空闲状态 = 低电平，数据在上升沿采样，并在下降沿移出。_stm32g431cbu6

计算机网络-数据链路层_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输-程序员宅基地

文章浏览阅读1.2k次，点赞2次，收藏8次。数据链路层习题自测问题1.数据链路(即逻辑链路)与链路(即物理链路)有何区别?“电路接通了”与”数据链路接通了”的区别何在?2.数据链路层中的链路控制包括哪些功能?试讨论数据链路层做成可靠的链路层有哪些优点和缺点。3.网络适配器的作用是什么?网络适配器工作在哪一层?4.数据链路层的三个基本问题(帧定界、透明传输和差错检测)为什么都必须加以解决？5.如果在数据链路层不进行帧定界，会发生什么问题？6.PPP协议的主要特点是什么？为什么PPP不使用帧的编号？PPP适用于什么情况？为什么PPP协议不_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输

软件测试工程师移民加拿大_无证移民，未受过软件工程师的教育（第1部分）-程序员宅基地

文章浏览阅读587次。软件测试工程师移民加拿大 无证移民，未受过软件工程师的教育(第1部分) (Undocumented Immigrant With No Education to Software Engineer(Part 1))Before I start, I want you to please bear with me on the way I write, I have very little gen...

随便推点

Thinkpad X250 secure boot failed 启动失败问题解决_安装完系统提示secureboot failure-程序员宅基地

文章浏览阅读304次。Thinkpad X250笔记本电脑，装的是FreeBSD，进入BIOS修改虚拟化配置（其后可能是误设置了安全开机），保存退出后系统无法启动，显示：secure boot failed ，把自己惊出一身冷汗，因为这台笔记本刚好还没开始做备份.....根据错误提示，到bios里面去找相关配置，在Security里面找到了Secure Boot选项，发现果然被设置为Enabled，将其修改为Disabled ，再开机，终于正常启动了。_安装完系统提示secureboot failure

C++如何做字符串分割（5种方法）_c++ 字符串分割-程序员宅基地

文章浏览阅读10w+次，点赞93次，收藏352次。1、用strtok函数进行字符串分割原型： char *strtok(char *str, const char *delim);功能：分解字符串为一组字符串。参数说明：str为要分解的字符串，delim为分隔符字符串。返回值：从str开头开始的一个个被分割的串。当没有被分割的串时则返回NULL。其它：strtok函数线程不安全，可以使用strtok_r替代。示例：//借助strtok实现split#include <string.h>#include <stdio.h&_c++ 字符串分割

2013第四届蓝桥杯 C/C++本科A组 真题答案解析_2013年第四届c a组蓝桥杯省赛真题解答-程序员宅基地

文章浏览阅读2.3k次。1 .高斯日记 大数学家高斯有个好习惯：无论如何都要记日记。他的日记有个与众不同的地方，他从不注明年月日，而是用一个整数代替，比如：4210后来人们知道，那个整数就是日期，它表示那一天是高斯出生后的第几天。这或许也是个好习惯，它时时刻刻提醒着主人：日子又过去一天，还有多少时光可以用于浪费呢？高斯出生于：1777年4月30日。在高斯发现的一个重要定理的日记_2013年第四届c a组蓝桥杯省赛真题解答

基于供需算法优化的核极限学习机(KELM)分类算法-程序员宅基地

文章浏览阅读851次，点赞17次，收藏22次。摘要：本文利用供需算法对核极限学习机(KELM)进行优化，并用于分类。

metasploitable2渗透测试_metasploitable2怎么进入-程序员宅基地

文章浏览阅读1.1k次。一、系统弱密码登录1、在kali上执行命令行telnet 192.168.26.1292、Login和password都输入msfadmin3、登录成功，进入系统4、测试如下：二、MySQL弱密码登录：1、在kali上执行mysql –h 192.168.26.129 –u root2、登录成功，进入MySQL系统3、测试效果：三、PostgreSQL弱密码登录1、在Kali上执行psql -h 192.168.26.129 –U post..._metasploitable2怎么进入

Python学习之路：从入门到精通的指南_python人工智能开发从入门到精通pdf-程序员宅基地

文章浏览阅读257次。本文将为初学者提供Python学习的详细指南，从Python的历史、基础语法和数据类型到面向对象编程、模块和库的使用。通过本文，您将能够掌握Python编程的核心概念，为今后的编程学习和实践打下坚实基础。_python人工智能开发从入门到精通pdf

推荐文章

热门文章

相关标签