Thinkphp Jquery Ajax验证用户名和手机号是否重复

程序说明：

通过JS中的blur函数判断输入域是否失去焦点，若失去焦点则通过ajax进行异域请求判断数据表中是否存在相同的数据，若存在则代表输入信息重复。

 

图示：

 

 

 

testtp.sql

 1 /*
 2 Navicat MySQL Data Transfer
 3 
 4 Source Server         : localhost
 5 Source Server Version : 50520
 6 Source Host           : localhost:3306
 7 Source Database       : testtp
 8 
 9 Target Server Type    : MYSQL
10 Target Server Version : 50520
11 File Encoding         : 65001
12 
13 Date: 2017-12-16 14:51:11
14 */
15 
16 SET FOREIGN_KEY_CHECKS=0;
17 
18 -- ----------------------------
19 -- Table structure for t_user
20 -- ----------------------------
21 DROP TABLE IF EXISTS `t_user`;
22 CREATE TABLE `t_user` (
23   `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
24   `username` varchar(15) NOT NULL DEFAULT '',
25   `phone` varchar(11) NOT NULL DEFAULT '',
26   PRIMARY KEY (`id`)
27 ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;
28 
29 -- ----------------------------
30 -- Records of t_user
31 -- ----------------------------
32 INSERT INTO `t_user` VALUES ('6', 'Min', '13703720045');

 

 

 

index.html

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <script type="text/javascript" src="__PUBLIC__/Home/Js/jquery-3.2.1.min.js"></script>
 6     <script type="text/javascript" src="__PUBLIC__/Home/Js/submitFun.js"></script>
 7     <script type="text/javascript">
 8         var ajaxVerif = 'index.php/Index/ajaxVerif';
 9     </script>
10     <style type="text/css">
11         #Error_username, #Error_phone
12         {
13             color: red;
14         }
15     </style>
16     <title>例子</title>
17 </head>
18 <body>
19     <form name="submitFun" method="POST">
20             <p>
21                 <span>用户名 : <input type="text" id="username"></span>
22                 <span id="Error_username"></span>
23             </p> 
24             <p>
25                 <span>手机号 : <input type="text" id="phone"></span>
26                 <span id="Error_phone"></span>
27             </p> 
28     </form>
29 </body>
30 </html>

 

 

 

submitFun.js

$(function(){
    $("#username").blur(function(){
        var username = $("#username").val();
        var reg = /^[A-Za-z0-9]{3,15}$/;

        if(reg.test(username))
        {
            ajaxVerif_Fun('username',username);
        }
        else
        {
            $("#Error_username").text("请确保您的用户名独一无二。本栏中您只能填写3-15个字母和数字。");
        }

    });

    $("#phone").blur(function(){
        var phone = $("#phone").val();
        var reg = /^1[34578]\d{9}$/;

        if(reg.test(phone))
        {
            ajaxVerif_Fun('phone',phone);
        }
        else
        {
            $("#Error_phone").text("请输入正确手机号。");
        }
    });


    function ajaxVerif_Fun(dataStyle,dataStr)
    {
        $.ajax({
            type:"post",
            url : ajaxVerif,
            data : {
                        dataStyle:dataStyle,
                        dataStr:dataStr,
                   },
            dataType:"json",    
            success:function(msg){
                if(msg == true)
                {
                    switch(dataStyle) 
                    {
                         case 'username':
                             $("#Error_username").text("请确保您的用户名独一无二。本栏中您只能填写3-15个字母和数字。");
                             break;
                         case 'phone':
                             $("#Error_phone").text("请输入您的手机号。");
                             break;
                         default:
                             return 'error';
                             break;
                     } 

                }
                else
                {
                    switch(dataStyle) 
                    {
                        case 'username':
                            $("#Error_username").text("");
                            break;
                        case 'phone':
                            $("#Error_phone").text("");
                            break;
                    }    
                }
            }
        });
    }
})

 

 

 

IndexAction.class.php

 1 <?php
 2     class IndexAction extends Action
 3     {
 4         public function index()
 5         {
 6             $this->display();
 7         }
 8 
 9         public function ajaxVerif()
10         {
11             $userDB = M('User');
12             
13             $dataStyle = $_POST['dataStyle'];
14             $dataStr = $_POST['dataStr'];
15 
16             $dataRe = $userDB->where(" $dataStyle  = '$dataStr' ")->count("id");
17             if(intval($dataRe) > 0){
18                 echo "true";
19                 return true;
20             }else{
21                 echo "false";
22                 return false;
23             }
24         }
25     }
26 ?>

 

posted @ 2018-02-23 10:36  哟风  Views(934)  Comments(0)    收藏  举报