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

智能推荐

c# 调用c++ lib静态库_c#调用lib-程序员宅基地

文章浏览阅读2w次，点赞7次，收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加 外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案，在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建：添加Visual C++ , Win32 项目这......_c#调用lib

deepin/ubuntu安装苹方字体-程序员宅基地

文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体，挺好看的。注重颜值的网站都会使用，例如知乎：font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang

html表单常见操作汇总_html表单的处理程序有那些-程序员宅基地

文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--action,当提交表单时，向何处发送表单中的数据，地址可以是相对地址也可以是绝对地址--><!--method将表单中的数据传送给服务器处理，get方式直接显示在url地址中，数据可以被缓存，且长度有限制；而post方式数据隐藏传输，_html表单的处理程序有那些

PHP设置谷歌验证器（Google Authenticator）实现操作二步验证_php otp 验证器-程序员宅基地

文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证（即Google Authenticator服务）后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器

【Python】matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距-程序员宅基地

文章浏览阅读4.3k次，点赞5次，收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距

docker — 容器存储_docker 保存容器-程序员宅基地

文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节，实现了多层数据的堆叠，为用户 提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制（CoW）策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的，不建议用于生成环境。_docker 保存容器

随便推点

网络拓扑结构_网络拓扑csdn-程序员宅基地

文章浏览阅读834次，点赞27次，收藏13次。网络拓扑结构是指计算机网络中各组件（如计算机、服务器、打印机、路由器、交换机等设备）及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式，也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn

JS重写Date函数，兼容IOS系统_date.prototype 将所有 ios-程序员宅基地

文章浏览阅读1.8k次，点赞5次，收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时，通常的做法是：new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的，而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠，也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑，需要做一些额外的特殊处理，笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数，一劳永逸，避免每次ne_date.prototype 将所有 ios

如何将EXCEL表导入plsql数据库中-程序员宅基地

文章浏览阅读5.3k次。方法一：用PLSQL Developer工具。 1 在PLSQL Developer的sql window里输入select * from test for update; 2 按F8执行 3 打开锁, 再按一下加号. 鼠标点到第一列的列头，使全列成选中状态，然后粘贴，最后commit提交即可。（前提..._excel导入pl/sql

Git常用命令速查手册-程序员宅基地

文章浏览阅读83次。Git常用命令速查手册1、初始化仓库git init2、将文件添加到仓库git add 文件名 # 将工作区的某个文件添加到暂存区 git add -u # 添加所有被tracked文件中被修改或删除的文件信息到暂存区，不处理untracked的文件git add -A # 添加所有被tracked文件中被修改或删除的文件信息到暂存区，包括untracked的文件...

分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120-程序员宅基地

文章浏览阅读202次。分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120

【C++缺省函数】 空类默认产生的6个类成员函数_空类默认产生哪些类成员函数-程序员宅基地

文章浏览阅读1.8k次。版权声明：转载请注明出处 http://blog.csdn.net/irean_lau。目录(?)[+]1、缺省构造函数。2、缺省拷贝构造函数。3、 缺省析构函数。4、缺省赋值运算符。5、缺省取址运算符。6、 缺省取址运算符 const。[cpp] view plain copy_空类默认产生哪些类成员函数

推荐文章

热门文章

相关标签