314 Ajax案例：邮箱地址验证，搜索框输入自动提示，省市区三级联动

Aja案例接口文档

测试地址：http://localhost:3000

请求参数类型：application/x-www-form-urlencoded

邮箱地址验证

简要描述
- 验证邮箱@itcast.cn地址是否唯一，已注册【[email protected]符合规则，未注册itheima】
请求地址
- /verifyEmailAdress
请求方式
- GET
参数

参数名必选类型说明

email 是 string 待验证邮箱地址

参数名	必选	类型	说明
email	是	string	待验证邮箱地址

返回值

{message: '邮箱地址已经注册过了, 请更换其他邮箱地址'}

{message: '恭喜, 邮箱地址可用'}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>验证邮箱地址是否已经注册</title>
    <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
    <style type="text/css">
        p:not(:empty) {
            padding: 15px;
        }

        .container {
            padding-top: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="form-group">
            <label>邮箱地址</label>
            <input type="email" class="form-control" placeholder="请输入邮箱地址" id="email">
        </div>
        <!-- 错误 bg-danger 正确 bg-success -->
        <p id="info"></p>
    </div>
    <script src="/js/ajax.js"></script>
    <script>
        // 获取页面中的元素
        var emailInp = document.getElementById('email');
        var info = document.getElementById('info');

        // 当文本框离开焦点以后
        emailInp.onblur = function() {
            // 获取用户输入的邮箱地址
            var email = this.value;
            // 验证邮箱地址的正则表达式
            var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
            // 如果用户输入的邮箱地址不符合规则
            if (!reg.test(email)) {
                // 给出用户提示
                info.innerHTML = '请输入符合规则的邮箱地址';
                // 让提示信息显示为错误提示信息的样式
                info.className = 'bg-danger';
                // 阻止程序向下执行
                return;
            }

            // 向服务器端发送请求
            ajax({
                type: 'get',
                url: 'http://localhost:3000/verifyEmailAdress',
                data: {
                    email: email
                },
                success: function(result) {
                    console.log(result);
                    info.innerHTML = result.message;
                    info.className = 'bg-success';
                },
                error: function(result) {
                    console.log(result)
                    info.innerHTML = result.message;
                    info.className = 'bg-danger';
                }
            });
        }
    </script>
</body>

</html>

搜索框输入自动提示

简要描述
- 根据用户在文本框中输入的关键字，匹配相关内容
请求地址
- /searchAutoPrompt
请求方式
- GET
参数

参数名必选类型说明

key 是 string 用户输入的关键字

参数名	必选	类型	说明
key	是	string	用户输入的关键字

返回值

[
    '程序员',
  '程序员官网',
  '程序员666'
]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>搜索框输入文字自动提示</title>
    <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
    <style type="text/css">
        .container {
            padding-top: 150px;
        }

        .list-group {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入搜索关键字" id="search">
            <ul class="list-group" id="list-box">

            </ul>
        </div>
    </div>
    <script src="/js/ajax.js"></script>
    <script src="/js/template-web.js"></script>

    <script type="text/html" id="tpl">
        {{each result}}
        <!-- $value是 循环中的每每一项 -->
        <li class="list-group-item">{{$value}}</li>
        {{/each}}
    </script>

    <script>
        // 获取搜索框
        var searchInp = document.getElementById('search');
        // 获取提示文字的存放容器
        var listBox = document.getElementById('list-box');
        // 存储定时器的变量
        var timer = null;
        // 当用户在文本框中输入的时候触发
        searchInp.oninput = function() {
            // 清除上一次开启的定时器
            clearTimeout(timer);
            // 获取用户输入的内容
            var key = this.value;
            // 如果用户没有在搜索框中输入内容
            if (key.trim().length == 0) {
                // 将提示下拉框隐藏掉
                listBox.style.display = 'none';
                // 阻止程序向下执行
                return;
            }

            // 开启定时器 让请求延迟发送
            timer = setTimeout(function() {
                // 向服务器端发送请求
                // 向服务器端索取和用户输入关键字相关的内容
                ajax({
                    type: 'get',
                    url: 'http://localhost:3000/searchAutoPrompt',
                    data: {
                        key: key
                    },
                    success: function(result) {
                        // 使用模板引擎拼接字符串
                        var html = template('tpl', {
                            result: result
                        });
                        // 将拼接好的字符串显示在页面中
                        listBox.innerHTML = html;
                        // 显示ul容器
                        listBox.style.display = 'block';
                    }
                })
            }, 800)
        }
    </script>
</body>

</html>

省市联动

获取省份信息

请求地址
- /province
请求方式
- GET
返回值

[{
    id: '001',
    name: '黑龙江省'
},{
    id: '002',
    name: '四川省'
},{
    id: '003',
    name: '河北省'
},{
    id: '004',
    name: '江苏省'
}]

根据省份id获取城市信息

请求地址
- /cities
请求方式
- GET
参数

参数名必选类型说明

id 是 string 省份id

参数名	必选	类型	说明
id	是	string	省份id

返回值

[{
    id: '300',
    name: '哈尔滨市'
}, {
    id: '301',
    name: '齐齐哈尔市'
}, {
    id: '302',
    name: '牡丹江市'
}, {
    id: '303',
    name: '佳木斯市'
}]

根据城市id获取县城信息

请求地址
- /areas
请求方式
- GET
参数

参数名必选类型说明

id 是 string 城市id

参数名	必选	类型	说明
id	是	string	城市id

返回值

[{
    id: '20',
    name: '道里区',
}, {
    id: '21',
    name: '南岗区'
}, {
    id: '22',
    name: '平房区',
}, {
    id: '23',
    name: '松北区'
}]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>搜索框输入文字自动提示</title>
    <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
    <style type="text/css">
        .container {
            padding-top: 150px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="form-inline">
            <div class="form-group">
                <select class="form-control" id="province"></select>
            </div>
            <div class="form-group">
                <select class="form-control" id="city">
                    <option>请选择城市</option>
                </select>
            </div>
            <div class="form-group">
                <select class="form-control" id="area">
                    <option>请选择县城</option>
                </select>
            </div>
        </div>
    </div>
    <script src="/js/ajax.js"></script>
    <script src="/js/template-web.js"></script>

    <!-- 省份模板 【模板id不要和遍历的数据对象同名】-->
    <script type="text/html" id="provinceTpl">
        <option>请选择省份</option>
        {{each province}}
        <!-- $value是 循环中的每一项 -->
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>

    <!-- 城市模板 -->
    <script type="text/html" id="cityTpl">
        <option>请选择城市</option>
        {{each city}}
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>

    <!-- 县城模板 -->
    <script type="text/html" id="areaTpl">
        <option>请选择县城</option>
        {{each area}}
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>

    <script>
        // 获取省市区下拉框元素
        var province = document.getElementById('province');
        var city = document.getElementById('city');
        var area = document.getElementById('area');

        // 获取省份信息
        ajax({
            type: 'get',
            url: 'http://localhost:3000/province',
            success: function(data) {
                // 将服务器端返回的数据和html进行拼接
                var html = template('provinceTpl', {
                    province: data
                });
                province.innerHTML = html; // 将拼接好的html字符串显示在页面中
            }
        });

        // 为省份的下拉框添加值改变事件
        province.onchange = function() {
            var pid = this.value; // 获取省份id
            // 清空县城下拉框中的数据
            var html = template('areaTpl', {
                area: []
            });
            area.innerHTML = html;

            // 根据省份id获取城市信息
            ajax({
                type: 'get',
                url: '/cities',
                data: {
                    id: pid
                },
                success: function(data) {
                    var html = template('cityTpl', {
                        city: data
                    });
                    city.innerHTML = html;
                }
            })
        };

        // 当用户选择城市的时候
        city.onchange = function() {
            var cid = this.value; // 获取城市id
            // 根据城市id获取县城信息
            ajax({
                type: 'get',
                url: 'http://localhost:3000/areas',
                data: {
                    id: cid
                },
                success: function(data) {
                    var html = template('areaTpl', {
                        area: data
                    });
                    area.innerHTML = html;
                }
            })
        }
    </script>
</body>

</html>

原文地址：https://www.cnblogs.com/jianjie/p/12347027.html

时间： 2024-10-14 00:50:48

314 Ajax案例：邮箱地址验证，搜索框输入自动提示，省市区三级联动的相关文章

简单的文本框输入自动提示

简单的文本框输入自动提示--输入的时候可以直接异步加载数据库中匹配的项,然后显示出来. 这里没有使用到数据库,直接在PHP用数组模拟数据存储. demo演示原理主要是: 监听输入框的状态,当有改变的时候即刻通过ajax发送数据并取得返回值. 主要使用了jQuery封装很方便,但貌似我这个兼容性不咋地...主要提供个思路吧~ js部分: <script type="text/javascript" src="./js/jquery.min.js">&l

win10 搜索框输入没提示

1.点击win, 手动在应用里找到Cortana(小娜) 2. 点右键->更多->应用设置,进入到下面的界面 3. 下拉到最下面,找到“重置”即可原文地址:https://www.cnblogs.com/xy-ouyang/p/11108128.html

29.Android之文本框输入自动提示学习

我们在用百度.淘宝等之类搜索输入一些字符时,会自动弹出一个下拉框提示类似的结果.在Android中提供了两种智能输入框,它们是AutoCompleteTextView.MultiAutoCompleteTextView,今天来学习下. AutoCompleteTextView.MultiAutoCompleteTextView二者区别是前者选择一个,后者可以选择多个. 直接上代码,首先改下xml文件: 1 <?xml version="1.0" encoding="ut

Javascript 手机号码验证邮箱地址验证

实例: //验证手机号码 function Checkthis() { var txtmobile = document.getElementById("txtMobile").value; var reg = new RegExp("(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)"); if (reg.test(txtmobile)) {

外贸建站之常用JS邮箱地址验证代码分享

外贸建站之常用JS邮箱地址验证代码分享 <script> function fpa_keyword_sub(){ var mail = $("#email_fpa").val(); if(! mail.match(/^(?:[a-zA-Z0-9]+[_\-\+\.]?)*[a-zA-Z0-9]+@(?:([a-zA-Z0-9]+[_\-]?)*[a-zA-Z0-9]+\.)+([a-zA-Z]{2,})+$/)){ alert("Email error!"

上课笔记_使用DWR实现自动补全类似百度搜索框的自动显示效果

使用DWR实现自动补全自动补全:是指用户在文本框中输入前几个字母或汉字的时候,自动在存放数据的文件或数据库中将所有以这些字母或汉字开头的数据提示给用户供用户选择在日常上网过程中,我们经常使用搜索引擎,当我们输入想要检索的关键字时,搜索引擎会提示我们相关的关键字训练要点: 掌握使用DWR框架开发Ajax程序使用MyEclipse 10.0 + MySql5.0 新建数据库:可以手动随便新建一个测试用的 DROP TABLE IF EXISTS `books`; CREATE TABLE `

Android实现搜索框内自动完成文本框

Android实现搜索框内自动完成文本框 xml文件代码如下: 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout 3 xmlns:android="http://schemas.android.com/apk/res/android" 4 android:orientation="vertical" 5 android:layout_width=

Ajax来实现下拉框省市区三级联动效果（服务端基于express）

//服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = express(); //载入选择城市的页面 app.get('/',function(req,res){ res.sendFile( __dirname + "/7.city.html" ); }); //获取所有的省份 app.get('/province',function(req,res)

实现文本框输入内容提示代码实例

实现文本框输入内容提示代码实例:比较人性化的网站一般都是比较讲究细节的,比如文本框输入内容具有提示效果,在默认情况下,文本框有提示文本,当鼠标放入文本框输入文本的时候,提示文本会消失,下面就通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="ht