这个demo有助于理解JS与server的协同工作。

文档结构如上图。  主要是三个文件： main.js  table.html validateUserName.jsp (代码见文章末尾)

页面打开例如以下：

选中第一个输入框后，右側出现定义好的提示信息。例如以下：

输入“olduser" , 为了简化验证过程，在validateUserName.jsp 中用硬编码验证username是否为”olduser", 返回JSON字串。 假设是，则返回{valid:false}。 否则返回{valid:true}

处理流程：

用户输入“olduser" ,  并把焦点移出当前输入框后， onchange 事件触发， 调用main.js中的usernameOnChange函数。 此函数发送验证请求到server, 由validateUserName.jsp处理此请求。 validateUserName.jsp推断”olduser"为已实用户名， 于是返回{valid:false}到浏览器。 浏览器收到服务器的response之后，由main.js中的usernameValidationHandler函数处理响应，它推断valid为false,
则显示定义好的error message.

valid为true的情况与为false的情况类似， 不会显示error message.

有个示解决的问题是当valid为false为false时，error message 并未显示到页面上，应该是dijit.byId("tableuserName").displayMessage(errorMessage);这一句没有生效，这个问题临时没能解决，在后面的学习中会留意看怎么样找到方法解决。

table.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style type="text/css" title="text/css">

			@import "dijit/themes/claro/claro.css";

			@import "dojox/form/resources/CheckedMultiSelect.css";

</style>

<script type="text/javascript" src="dojo/dojo.js"  djConfig="parseOnLoad: true"></script>

<script type="text/javascript" src="main.js"></script>

<script>

	dojo.require("dojo/parser");

//	dojo.require("dijit/form/Button");

	dojo.require('dijit.form.ValidationTextBox');

//dojo.require("dojo/data/ItemFileReadStore");

</script>

</head>

<body id="content" class="claro">

	<div id="mortgages" class=" ">

		<div class="" id="dijit/form/Form">

			<h2 class=""></h2>

			<p style="width:700px;">

				please enter you name and address

			</p>

			<div class="">

				<div class="">

				<label for="userName">User Name</label>

				<input type="text" name="userName" value=""

				    onchange="usernameOnChange"

				    data-dojo-props="" id="tableuserName"

				    		dojoType="dijit.form.ValidationTextBox"

		promptMessage="oops"

		invalidMessage="invalid"

		missingMessage="Ooops!  You forgot your first name!" />	

				</div>

				<div class="">

				<label for="Address">Address</label>

				<input type="text" name="Address" value=""

				    data-dojo-type="dijit/form/ValidationTextBox"

				    onchange=""

				    data-dojo-props="trim:true, propercase:true" id="tableAddress" />	

				</div>

			</div>

		</div>

	</div>

	<div id="result"></div>

</body>

</html>

main.js

function usernameOnChange() {

	console.log("run");

	var userName = dijit.byId("tableuserName").getValue();

	if(userName == ""){

		console.log("user name is empty");

		return;

	}

	dojo.xhrGet({

		url:"validateUserName.jsp?userName=" + userName,

		handleAs:"json",

		handle:usernameValidationHandler

	});

}

function usernameValidationHandler(response){

	//console.log("get response");

	dijit.byId("tableuserName").displayMessage("yes");

	if(!response.valid){

		var errorMessage = "user name already exists";

		//console.log(errorMessage);

		dijit.byId("tableuserName").displayMessage(errorMessage);

	}

}

validateUserName.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

	try{

		System.out.println("UserName :"+

		request.getParameter("userName"));

		if(request.getParameter("userName").equals("olduser")){

			out.println("{valid:false}");

			System.out.println("To Brower : false");

		}else{

			out.println("{valid: true}");

			System.out.println("To Brower : true");

		}

	}catch(Exception ex){

		out.println(ex.getMessage());

		ex.printStackTrace();

	}

%>

dojo demo, server验证username是否已经被使用的更多相关文章

  1. IOS内购支付server验证模式

    IOS 内购支付两种模式: 内置模式 server模式 内置模式的流程: app从app store 获取产品信息 用户选择须要购买的产品 app发送支付请求到app store app store ...

  2. 【java项目实践】具体解释Ajax工作原理以及实现异步验证username是否存在+源代码下载(java版)

    一年前,从不知道Ajax是什么,伴随着不断的积累,到如今常常使用,逐渐有了深入的认识. 今天,假设想开发一个更加人性化,友好,无刷新,交互性更强的网页,那您的目标一定是Ajax. 介绍 在具体讨论Aj ...

  3. 用SQL Server验证用户名和密码

    用SQL Server验证用户名和密码,从页面输入的用户名和密码与数据库的用户名和密码进行匹配,正确则登入,错误则提醒. <form action="index.jsp" m ...

  4. SQL Server 验证身份证合法性函数（使用VBScript.RegExp）

    原文:SQL Server 验证身份证合法性函数(使用VBScript.RegExp) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/wzy0623 ...

  5. Struts2+Spring+Hibernate step by step 03 整合Spring之中的一个（在DAO层验证username和password）

    注:该系列文章部分内容来自王健老师编写SSH整合开发教程 目的:通过Spring创建数据库的连接,并通过Spring进行事务管理. 第一步:将Spring的包拷贝至当前项目的lib文件夹下,例如以下图 ...

  6. Android实战简易教程-第二十三枪（基于Baas的用户注冊验证username是否反复功能！）

    接上一篇,加入验证用户名是否已经注冊功能! 仅仅须要改动MainActivity.java: package com.example.logintest; import java.util.List; ...

  7. SQL server 安装成功到使用Sa SQL server验证登录等一系列问题

    使用 Windows 身份验证方式登录 出现错误 无法连接到 本地服务器 解决问题: SQL server配置管理器:服务远程过程调用失败 https://blog.csdn.net/gfjjggg/ ...

  8. SQL Server验证的两种方式

    1.Windows身份验证:本机连接或者受信的局域网连接(一般在忘记管理员密码或者做系统配置的情况下使用). 2.SQLServer验证:使用用户名.密码验证(推荐使用). 启用方法:以Windows ...

  9. django自带的用户验证是验证username和password,如何自定义验证功能,让mobil也能作为账户名登录?

    users.views.pyfrom django.contrib.auth.backends import ModelBackendfrom django.db.models import Qcla ...

随机推荐

  1. The Java™ Tutorials下载地址

    1.The Java™ Tutorials下载地址: http://www.oracle.com/technetwork/java/javase/java-tutorial-downloads-200 ...

  2. Impala 1、Impala理论

    1.Impala简介 • Cloudera公司推出,提供对HDFS.Hbase数据的高性能.低延迟的交互式SQL查询功能. • 基于Hive使用内存计算,兼顾数据仓库.具有实时.批处理.多并发等优点 ...

  3. 逐渐深入地理解Ajax

    Ajax的基本原理是:XMLHttpRequest对象(简称XHR对象),XHR为向服务器发送请求和解析服务器响应提供了流畅的接口.能够以异步方式从服务器获得更多信息.意味着用户不必刷新页面也能取得新 ...

  4. RMAN完整全备份

    1.以CATALOG模式连接到目标数据库和恢复目录(如:目标数据库为ORCL) C:\Users\Administrator>RMAN TARGET / CATALOG RMANCT/RMANC ...

  5. iOS控制器的创建方式

    iOS控制器的创建.除了常见的alloc init外还有通过加载storyboard和xib的方式,下边逐一展开: 1.代码alloc init 创建方式 ViewController *vc= [[ ...

  6. <转>让SVN用户能够修改自身密码的PHP页面

    1.修改Apache配置文件因为我在安装和配置SVN的时候,对Apache的配置文件进行过优化,将所有关于SVN的配置都写在了/opt/apache2/conf/extra/httpd-svn.con ...

  7. 【Heritrix基础教程之2】Heritrix基本内容介绍

    1.版本说明 (1)最新版本:3.3.0 (2)最新release版本:3.2.0 (3)重要历史版本:1.14.4 3.1.0及之前的版本:http://sourceforge.net/projec ...

  8. 关于微信小程序的一些思考

    ### 怎么样理解小程序? * 微信的重点产品* 一个事实OS,目前并不知道小程序的入口在哪里?* 小程序的入口可能在如下三个地方: 1. 发现入口 2. 扫码 3. 搜索框 * 小程序没有关注, 意 ...

  9. Oracle 表连接方式分析 .

    一 引言 数据仓库技术是目前已知的比较成熟和被广泛采用的解决方案,用于整和电信运营企业内部所有分散的原始业务数据,并通过便捷有效的数据访问手段,可以支持企业内部不同部门,不同需求,不同层次的用户随时获 ...

  10. NGINX+PHP+MYSQL服务器环境搭建

    这条命令是配置vim的,请确保你能访问github wget -qO- https://raw.github.com/ma6174/vim/master/setup.sh | sh 说明有一些小问题, ...