这个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. UVA 11045-My T-shirt suits me（二分图匹配）

    题意:有N件T恤,N是6的倍数,因为有6种型号,每种件数相同,有M个人,每个人有两种型号的T恤适合他,每个人可以挑其中的一种,问能否所有的人都能分配到T恤. 解析:典型的二分图匹配,每N/6为同种T恤 ...

  2. MongoDB appendix

    mongo 是数据库shell.一般假定它和mongod 运行在同一台机器上,还假定mongod 绑定了默认端口. eg.  mongo  staging.example.com:20000,这样就会 ...

  3. Python高阶函数

    在Python中,函数名也是一个变量,可以进行赋值  高阶函数是至少满足下列一个条件的函数: 接受一个或多个函数作为输入 输出一个函数 函数名也可以作为函数参数,还可以作为函数返回值 def f(n) ...

  4. IOS添加多个按钮在导航栏

    UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 75.0f, 30.0f)]; UIButton * ...

  5. yum安裝的包如何保留到本地

    一, 很多时候,我们一直用yum安装的软件,但是毫无疑问,很多人都会想yum安装的软件的包存放在哪里了呢? 这是因为yum默认并不保存你所安装的包,那么如何才能保留安装的软件包呢? 方法很简单:修改y ...

  6. linux系统如何限制远程登录ip

    在Linux系统上限制远程登录的IP,使用系统自带的配置文件. /etc/hosts.allow /etc/hosts.deny 匹配原则  先allow 后deny. 要求: 只允许 192.168 ...

  7. linux进程间通信之管道篇

    本文是对http://www.cnblogs.com/andtt/articles/2136279.html管道一节的进一步阐释和解释 1 管道 1.1 管道简介 管道是unix系统IPC的最古老的形 ...

  8. PHP学习笔记十四【面向对象】

    <?php class Cat{ public $name; public $age; public $color; } //创建一个对象 $cat1=new Cat(); $cat1-> ...

  9. stringstream函数（i o）

    stringstream函数 头文件  #include<sstream> stringstream是字符串流,被用来切分数据或转化类型 样例一(摘) 输入n,代表接下来输入n行资料,每行 ...

  10. Object转换为JSON格式字符串

    简介: 把JS的Object转换为Json字符串. 代码: function ObjectToJson(object) { // Object转换为josn var json = "&quo ...