这个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. IOS 使用dispatch_once 创建单例

    + (instantClass *)sharedClient { static instantClass *_sharedClient = nil; static dispatch_once_t on ...

  2. A Corrupt Mayor's Performance Art（线段树区间更新+位运算，颜色段种类）

    A Corrupt Mayor's Performance Art Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 100000/100 ...

  3. Conquering Keokradong && Get the Containers(二分)

    Conquering Keokradong Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu ...

  4. 用数据说话,外贸B2C产品选择(上篇)-热门搜索法

    当选择了外贸这条路,那就是选择了跟外国人做生意.那面对全球这么大的市场究竟选什么样的产品才干脱颖而出?什么样的产品才是全球卖家喜欢的呢?什么样的产品才干让自己財源滚滚?我想这都是全部刚開始外贸创业的人 ...

  5. [Redux] Generating Containers with connect() from React Redux (AddTodo)

    Code to be refacted: const AddTodo = (props, { store }) => { let input; return ( <div> < ...

  6. spring入门：beans.xml不提示、别名、创建对象的三种方式

    spring的版本是2.5 一.beans.xml文件不提示 Location:spring-framework-2.5.6.SEC01\dist\resources\spring-beans-2.5 ...

  7. 「前端开发者」如何把握住「微信小程序」这波红利？

    由于前两周一直在老家处理重要事情,虽然朋友圈被「微信小程序」刷爆了,但并没有时间深入了解. 昨天回广州之后,第一件事情就是把「微信小程序」相关的文章.开发文档.设计规范全部看了一遍,基本上明白了「微信 ...

  8. C# 限制Text只能输入数字

    private void InputNumber(KeyPressEventArgs e) { //如果输入的不是数字键,也不是回车键.Backspace键,则取消该输入 && e.K ...

  9. Spring-----7、bean实例的创建方式及依赖配置

    转载自:http://blog.csdn.net/hekewangzi/article/details/45648579

  10. Control character in cookie value, consider BASE64 encoding your value-Cookie保存中文出错[转]

    项目当中用到cookie保存中文,但是会报如下错误: Control character in cookie value, consider BASE64 encoding your value 大概 ...