zoukankan      html  css  js  c++  java
  • dojo demo, server验证username是否已经被使用

    这个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="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();
    	}
    %>
    


  • 相关阅读:
    1012 The Best Rank (25 分)(排序)
    1011. World Cup Betting (20)(查找元素)
    1009 Product of Polynomials (25 分)(模拟)
    1008 Elevator (20 分)(数学问题)
    1006 Sign In and Sign Out (25 分)(查找元素)
    1005 Spell It Right (20 分)(字符串处理)
    Kafka Connect 出现ERROR Failed to flush WorkerSourceTask{id=local-file-source-0}, timed out while wait
    flume、kafka、avro组成的消息系统
    Java23种设计模式总结【转载】
    Java编程 思维导图
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/5224265.html
Copyright © 2011-2022 走看看