这个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. convertView

    [convertView] 参考:https://zhidao.baidu.com/question/423895201122905772.html

  2. Linux如何实现开机启动程序详解

    我们假设大家已经熟悉其它操作系统的引导过程,了解硬件的自检引导步骤,就只从Linux操作系统的引导加载程序(对个人电脑而言通常是LILO)开始,介绍Linux开机引导的步骤. 加载内核LILO 启动之 ...

  3. 认识SVN

    TortoiseSVN 是 Subversion 版本控制系统的一个免费开源客户端,可以超越时间的管理文件和目录.文件保存在中央版本库,除了能记住文件和目录的每次修改以外,版本库非常像普通的文件 服务 ...

  4. vim中对文本的选择

    本文主要解说vim中对文本的选择,vim中选择文本分为: (1)选择字符  ----  命令行模式下输入小写v (2)选择行     ----  命令行模式下输入大写V (3)选择块     ---- ...

  5. Python 练习 —— 2048

    1. 引言 2048 这段时间火的不行啊,大家都纷纷仿造,"百家争鸣",于是出现了各种技术版本号:除了手机版本号,还有C语言版.Qt版.Web版.java版.C#版等,刚好我接触P ...

  6. wpf msdn在线地址http://msdn.microsoft.com/zh-cn/library/ms752324(v=vs.110).aspx

    http://msdn.microsoft.com/zh-cn/library/ms752324(v=vs.110).aspx

  7. 基于express框架的应用程序骨架生成器介绍

    作者:zhanhailiang 日期:2014-11-09 本文将介绍怎样使用express-generator工具高速生成基于express框架的应用程序骨架: 1. 安装express-gener ...

  8. Gridview 多重表头 (一)

    今天看到一个人每个月更新博客,结果七年后改行去卖土特产...感慨良多... 虽然我也想去开餐厅~~ 今天需求里有一个多重表头,感觉比较奇特,特意留下记录,以防我的大脑被艾滋海默攻占~~没有女主的命,不 ...

  9. UIView--UIImageView

    1.contentMode view.contentMode = UIViewContentModeScaleAspectFill; 2.是否实现触摸 3.简单实现动画 图片的名字为campFire0 ...

  10. iOS二进制和资源包的自检

    因为现在做的是企业版的APP,不能保证用户不越狱,也不能保证有些用户喜欢自己修改ipa包里的资源文件,比如更换一些资源图片.因此,我们有必要在请求报文中,增加正版应用的二进制和资源文件的标识,让服务器 ...