这个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. postgresql基本语句

    preface,熟悉pgsql sql Language article disorder; 1,pgsql数据库控制台Cli(command line interface) help mannual ...

  2. UGUI 滚动视图

    滚动视图是常用的UI控件之一,它是由多个基本控件组合而成.如图 ==================================================================== ...

  3. kettle工具同步数据乱码-Linux下乱码问题二

    将写好的kettle工程部署到Linux下后,同步的数据都成了乱码,幸运的是数据库有备份. 下面就说一下,kettle工程如何同步两端编码格式都是utf8的数据库. 我们只需要更改kettle数据库连 ...

  4. Android一次退出所有Activity的方法（升级版）

    一.思路和方法: 首先创建一个ActivityManager类来存放Activity的对象. 返回ActivityManager的对象,供BaseActivity来进行操作. 所有其他子Activit ...

  5. Unhandled event loop exception 解决办法

    网上搜索了一下.对其他人有效的办法有两种: 1. 安装了adsafe  .卸载掉就可以了. 2.安装了流氓软件:百度杀毒. 卸载掉也解决问题了 我就是第三种情况.到现在还没解决的热.!. 谁还有更好的 ...

  6. js判断是否安装flash

    <script type="text/javascript"> (function () { var noFlash = "你的浏览器没有安装Flash,会影 ...

  7. Intersection of Two Linked Lists(java)

    eg: a1 → a2 ↘ c1 → c2 → c3 或者直接a1 → b1 ↗ b1 → b2 → b3求公共链表c1. 常规的指针分裂法,复制法,偏移法. public class Solutio ...

  8. 2014年1月24日 Oracle 事务导读

    形象举例:  从 A 账户向 B 账户转账 10000 元 步骤: 1. A - 10000 2. B + 10000 事务的作用就是确保这两步无误执行后提交,若有一个执行不成功则失败. 结束事务的5 ...

  9. G - Reduced ID Numbers（第二季水）

    Description T. Chur teaches various groups of students at university U. Every U-student has a unique ...

  10. 纪念SlingShot 矩阵

    第一次独立做矩阵,只WA了一次,好高兴~~ 题意:已知 F(n)=3 * F(n-1)+2 * F(n-2)+7 * F(n-3),n>=3,其中F(0)=1,F(1)=3,F(2)=5,对于给 ...