web表单注册验证过程及源码

https://blog.csdn.net/qq_35455142/article/details/79197684

第一部分:

学习要点:
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. #reg{
  60.     padding:15px 0 0 15px;
  61. }
  62. #reg p {
  63. margin:10px 0;
  64. padding:0;
  65. }
  66. #reg p label {
  67.     font-size:14px;
  68.     color:#666;
  69. }
  70. #reg p .star{
  71.     color:red;
  72. }
  73. #reg p .success {
  74.     display:inline-block;
  75.     width:28px;
  76.     background:url(../img/reg_succ.png) no-repeat;
  77. }
  78. #reg ol{
  79.     margin:0;
  80.     padding:0 0 0 20px;
  81.     color:maroon;
  82. }
  83. #reg ol li {
  84.     height:20px;
  85. }
  86. #reg .text{
  87.     border-radius:4px;
  88.     border:1px solid #ccc;
  89.     background”:#fff;
  90.     height:25px;
  91.     width:200px;
  92.     text-indent:5px;
  93.     color:#666;
  94. }
  95. #loading{
  96.     background : url(../img/loading.gif) no-repeat 15px 10px;
  97.     line-height : 25px;
  98.     font-size:14px;
  99.     font-weight:bold;
  100.     text-indent:40px;
  101.     color:#666;
  102. }
  103. .ui-tooltip {
  104. color:red;
  105. }
  106. .ui-menu-item a.ui-state-focus {
  107.     background:url(../img/ui_header_bg.png);
  108. }

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

请登录后发表评论