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="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是否已经被使用的更多相关文章
- IOS内购支付server验证模式
IOS 内购支付两种模式: 内置模式 server模式 内置模式的流程: app从app store 获取产品信息 用户选择须要购买的产品 app发送支付请求到app store app store ...
- 【java项目实践】具体解释Ajax工作原理以及实现异步验证username是否存在+源代码下载(java版)
一年前,从不知道Ajax是什么,伴随着不断的积累,到如今常常使用,逐渐有了深入的认识. 今天,假设想开发一个更加人性化,友好,无刷新,交互性更强的网页,那您的目标一定是Ajax. 介绍 在具体讨论Aj ...
- 用SQL Server验证用户名和密码
用SQL Server验证用户名和密码,从页面输入的用户名和密码与数据库的用户名和密码进行匹配,正确则登入,错误则提醒. <form action="index.jsp" m ...
- SQL Server 验证身份证合法性函数(使用VBScript.RegExp)
原文:SQL Server 验证身份证合法性函数(使用VBScript.RegExp) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/wzy0623 ...
- Struts2+Spring+Hibernate step by step 03 整合Spring之中的一个(在DAO层验证username和password)
注:该系列文章部分内容来自王健老师编写SSH整合开发教程 目的:通过Spring创建数据库的连接,并通过Spring进行事务管理. 第一步:将Spring的包拷贝至当前项目的lib文件夹下,例如以下图 ...
- Android实战简易教程-第二十三枪(基于Baas的用户注冊验证username是否反复功能!)
接上一篇,加入验证用户名是否已经注冊功能! 仅仅须要改动MainActivity.java: package com.example.logintest; import java.util.List; ...
- SQL server 安装成功到使用Sa SQL server验证登录等一系列问题
使用 Windows 身份验证方式登录 出现错误 无法连接到 本地服务器 解决问题: SQL server配置管理器:服务远程过程调用失败 https://blog.csdn.net/gfjjggg/ ...
- SQL Server验证的两种方式
1.Windows身份验证:本机连接或者受信的局域网连接(一般在忘记管理员密码或者做系统配置的情况下使用). 2.SQLServer验证:使用用户名.密码验证(推荐使用). 启用方法:以Windows ...
- django自带的用户验证是验证username和password,如何自定义验证功能,让mobil也能作为账户名登录?
users.views.pyfrom django.contrib.auth.backends import ModelBackendfrom django.db.models import Qcla ...
随机推荐
- formidable上传图片
function uploadfiles(res, req){ var form = new formidable.IncomingForm(); form.parse(req,function(er ...
- IOS使用C#预处理命令,多种SDK共存
当我们使用Unity接 91,XY助手等等SDK时候. 我们需要使用[DllImport("__Internal")] 来声明一个C++的方法调用. 不同的SDK总会有不同的方法. ...
- java面试题集1
一:单选题 下列哪一种叙述是正确的(D )A. abstract修饰符可修饰字段.方法和类B. 抽象方法的body部分必须用一对大括号{ }包住C. 声明抽象方法,大括号可有可无D. 声明抽象方法不可 ...
- IT人士的职业规范——凝视
这两天将系统敲完了,该总体调试了,调试的过程中,发现了一个非常大的问题,就是自己的凝视写的不够,有时候不明确U层这个事件是做什么的,有时候不知道这个事件传递的是什么參数,有时候不知道相应的B层和 ...
- Android项目打包开启proguard的混淆优化带来的问题
1.引入一个sdk以后.打包报错: [INFO] Unexpected error while evaluating instruction: [INFO] Class = [com/ ...
- android stagefright awesomeplayer 分析
主要调用awesomeplay.cpp的函数来实现音视频等功能,可以说是对awesomeplay.cpp的封装,进一步抽象,然后提供给上层调用,主要的调用者是MediaPlayerService.cp ...
- 被「李笑来老师」拉黑之「JavaScript微博自动转发的脚本」
故事的背景如下图,李笑来 老师于10月19日在 知乎Live 开设 一小时建立终生受用的阅读操作系统 的讲座,他老人家看到大家伙报名踊跃,便在微博上发起了一个 猜数量赢取iPhone7 的活动. 因为 ...
- 终极解法According to TLD or attribute directive in tag file, attribute select does not accept any expressions
3天硬是是把这个问题解决了 有时候突然上个厕所灵感就来了 第一次向用JSTL解析xml 然后我想遍历整个xml文档打印出来 居然不让我输入变量 那让我怎么办啊 在网上各种找答案 说什么<%@ t ...
- CentOS 7 启动VNC失败问题
开机后发现VNC服务没有启启来,提示我们使用journalctl -xn查看错误信息,提示信息如下: Sep :: localhost.localdomain systemd[]: Unit vncs ...
- 合理的使用size_t可以提高程序的可移植性和代码的可读性,让你的程序更高效。
最近研读STL源码时,发现里面有很多ptrdiff_t类型的数据,这与size_t的作用类似.以下是一篇关于size_t等平台无关类型的作用,写得很清楚.特将其记录下来. http://blog.cs ...