利用js制作异步验证ajax方法()

如何利用js写ajax异步验证。代码如下:
window.onload = function(){
var name = document.getElementById('register-name-text'),
email = document.getElementById('register-email-text'),
pwd = document.getElementById('register-pwd-text'),
repwd = document.getElementById('register-repwd-text'),
// id = document.getElementById('register-id-text'),
authcode = document.getElementById('register-authcode-text'),
submit = document.getElementById('register-submit');
var nameWarn = document.getElementById('name-warn'),
emailWarn = document.getElementById('email-warn'),
pwdWarn = document.getElementById('pwd-warn'),
repwdWarn = document.getElementById('repwd-warn'),
// idWarn = document.getElementById('id-warn'),
authcodeWarn = document.getElementById('authcode-warn');
var isName = false,
isEmail = false,
isPwd = false,
isRepwd = false,
// isId = false,
isAuthcode = false;
name.focus();
var xhr = new XMLHttpRequest();
var msg = '';
name.oninput = function(){
if(name.value == ""){
noticeClear(nameWarn);
nameWarn.innerHTML = "用户名不能为空";
isName = false;
} else if(name.value.length < ){
noticeClear(nameWarn);
nameWarn.innerHTML = "用户名不能小于2位";
isName = false;
} else{
xhr.open('GET', '../AjaxRequest/nameCheck.php?name=' + name.value, true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == ){
if(xhr.status == ){
msg = xhr.responseText;
if(msg == ''){
noticeClear(nameWarn);
nameWarn.innerHTML = "用户名已存在";
isName = false;
} else{
noticeClear(nameWarn);
nameWarn.style.background = "url(../images/check_right.gif) no-repeat 5px 5px";
isName = true;
}
}
}
}
}
}
email.oninput = function(){
var emailType = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z_-]+)+$/;
if(email.value == ""){
noticeClear(emailWarn);
emailWarn.innerHTML = "邮箱不能为空";
isEmail = false;
} else if(!email.value.match(emailType)){
noticeClear(emailWarn);
emailWarn.innerHTML = "邮箱格式错误";
isEmail = false;
} else {
xhr.open('GET', '../AjaxRequest/emailCheck.php?email=' + email.value, true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == ){
if(xhr.status == ){
var msg = xhr.responseText;
if(msg == ''){
noticeClear(emailWarn);
emailWarn.innerHTML = "邮箱已被注册";
isEmail = false;
} else{
noticeClear(emailWarn);
emailWarn.style.background = "url(../images/check_right.gif) no-repeat 5px 5px";
isEmail = true;
}
}
}
}
}
}
pwd.oninput = function(){
if(pwd.value == ""){
noticeClear(pwdWarn);
pwdWarn.innerHTML = "密码不能为空";
isPwd = false;
} else if(pwd.value.length < ){
noticeClear(pwdWarn);
pwdWarn.innerHTML = "密码不能小于6位";
isPwd = false;
} else {
noticeClear(pwdWarn);
pwdWarn.style.background = "url(../images/check_right.gif) no-repeat 5px 5px";
isPwd = true;
}
}
repwd.oninput = function(){
if(repwd.value == ""){
noticeClear(repwdWarn);
repwdWarn.innerHTML = "";
isRepwd = false;
} else if (repwd.value != pwd.value){
noticeClear(repwdWarn);
repwdWarn.innerHTML = "密码输入不一致";
isRepwd = false;
} else {
noticeClear(repwdWarn);
repwdWarn.style.background = "url(../images/check_right.gif) no-repeat 5px 5px";
isRepwd = true;
}
}
// id.oninput = function(){
// var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
// if(id.value == ""){
// noticeClear(idWarn);
// idWarn.innerHTML = "身份证号不能为空";
// isId = false;
// } else if(!id.value.match(reg)){
// noticeClear(idWarn);
// idWarn.innerHTML = "身份证号格式错误";
// isId = false;
// } else {
// noticeClear(idWarn);
// idWarn.style.background = "url(../images/check_right.gif) no-repeat 5px 5px";
// isId = true;
// }
// }
authcode.oninput = function(){
xhr.open('GET', '../AjaxRequest/captchaCheck.php?code=' + authcode.value, true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == ){
if(xhr.status == ){
msg = xhr.responseText;
if(msg != ''){
noticeClear(authcodeWarn);
authcodeWarn.innerHTML = "验证码错误";
isAuthcode = false;
} else{
noticeClear(authcodeWarn);
authcodeWarn.style.background = "url(../images/check_right.gif) no-repeat 5px 5px";
isAuthcode = true;
}
}
}
}
}
setInterval(function(){
if(!(isName && isEmail && isPwd && isRepwd && isAuthcode)){
submit.disabled = true;
submit.style.color = "#CCC";
} else {
submit.disabled = false;
submit.style.color = "#000";
}
}, );
function noticeClear(id){
id.innerHTML = "";
id.style.background = "";
}
}
利用js制作异步验证ajax方法()的更多相关文章
- 利用js制作html table分页示例(js实现分页)
有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript" ...
- 利用aiohttp制作异步爬虫
asyncio可以实现单线程并发IO操作,是Python中常用的异步处理模块.关于asyncio模块的介绍,笔者会在后续的文章中加以介绍,本文将会讲述一个基于asyncio实现的HTTP框架--a ...
- 初学JS——利用JS制作的别踩白块儿(街机模式) 小游戏
这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是 可能普通模式的别踩白块儿因为他的“块儿”是滚动的向上这种,以我目前会的技术想不出怎么写, 但是如果是街机模式,通过你每按 ...
- 利用jQuery.validate异步验证用户名是否存在
转:http://www.cnblogs.com/linzheng/archive/2010/10/14/1851781.html HTML头部引用: <script type="te ...
- 2017.11.9 如何利用JS做登陆验证界面
()案例----JavaScript实现输入验证 需要验证的表单输入域和要求 用户名不能为空,是否符合规定的格式 密码长度是否超过6,两次密码输入一致 邮箱地址:邮箱地址必须符合邮箱形式 ~~~注意提 ...
- 利用js获取客户端ip的方法
1. 通过script标签引入url 比如如下代码: <script type="text/javascript" src="http://pv.sohu.com/ ...
- 利用JS制作简便计算器
var d; var a=prompt("请输入数字"); a=parseInt(a); if(isNaN(a)){ alert("請輸入正確數字"); } e ...
- Ajax异步验证登陆或者注册
首先介绍一个不错的学习Ajax的中文网站:http://www.w3school.com.cn/ajax/index.asp AJAX = 异步 JavaScript 和 XML.详细介绍见上面的网址 ...
- ajaxSetup和普通的ajax方法.
我明明写了ajaxSetup()方法可是它有时候却不一定是会执行,因为比如我common.js里写的ajaxSetup()方法,然后index.js里写了ajax方法,可是有的时候ajaxSetup里 ...
随机推荐
- C语言中宏定义(#define)时do{}while(0)的价值(转)
C语言中宏定义(#define)时do{}while(0)的价值 最近在新公司的代码中发现到处用到do{...}while(0),google了一下,发现Stack Overflow上早有很多讨论,总 ...
- 微信JS-SDK说明文档及常见问题处理
概述 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微 ...
- AngularJS 中的 Promise 和 设计模式
解决 Javascript 异步事件的传统方式是回调函数:调用一个方法,然后给它一个函数引用,当这个方法完结的时候执行这个函数引用. <!-- lang: js --> $.get('ap ...
- {A} + {B}(unique水)
{A} + {B} Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- windows程序设计读书笔记1——创建窗口
第一个win32程序,简单的创建窗口: #include <windows.h> LRESULT CALLBACK WndProc (HWND, UINT, WPARAM, LPARAM) ...
- Nginx学习笔记六Nginx的模块开发
1.Nginx配置文件主要组成:main(全局配置)这部分的指令将影响其他所有部分.server(虚拟主机配置)这部分指令主要用于指定虚拟主机域名,IP和端口.upstream(主要为反向代理,负载均 ...
- gl.TexSubImage2D 使用遇到图片翻转的问题
这2天在用gl.TexSubImage2D把几张小图转拼接成大图,如果在渲染物体之前拼接好就没有问题,但在开始渲染物体后拼接就会有问题.后来我做了2件事情来找原因, 1. 用拼好的图来画一个正方形,大 ...
- javascript的层次
1.功能api 2.代码organization 3.performance 4.work flow
- 只有勇敢的人、鲁莽的人和绝望的人才会追求大的变革 – D.J. Anderson
只有勇敢的人.鲁莽的人和绝望的人才会追求大的变革 – D.J. Anderson http://www.cnblogs.com/lchrennew/p/Why-The-Future-Of-Agile- ...
- cf459D Pashmak and Parmida's problem
D. Pashmak and Parmida's problem time limit per test 3 seconds memory limit per test 256 megabytes i ...