利用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里 ...
随机推荐
- jQuery 获取 多个 复选框 和 javascript 对比
$('input[name="teams"]:checked').size() // 全选 $("#quanteam").bind("click&qu ...
- 项目 Web 的 NuGet 程序包还原失败: 找不到“1.0.0”版本的程序包“Microsoft.Net.Compilers”。。 0
项目 Web 的 NuGet 程序包还原失败: 找不到“1.0.0”版本的程序包“Microsoft.Net.Compilers”.. 0 使用vs的NutGet包管理器时,另一台电脑从svn下载 ...
- Django学习(一) Django安装配置
上一节介绍了如何搭建Python的开发环境,这次介绍一下如何搭建Django的开发环境. 第一.下载Django Django跟Python的版本对应 Django version Python ve ...
- ios 开发指南
苹果Xcode帮助文档阅读指南 iOS开发官方文档汇总 翻译"iPhone SDK 开发"之UIKit使用… iOS中arc的设置与使用
- Storyboard、Nib文件和代码来实现UI的利与弊
很清楚,这就是iOS里面两种可视化UI的方法.加上全部用代码来实现UI,总共有三种方法可以来实现. 我们先说一下全用代码来做,这个方法属于比较极端的程序员所推崇的,优点和缺点同样明显. 优点是可以实现 ...
- jquery 单击table行事件和radio的选中事件冲突
原文地址:http://zhidao.baidu.com/link?url=HER7lu4jqejWUhWQO2nq6LZ6tf7vyhPZRADSL-xaBQSF4P4yftD9vg08Ss8HF- ...
- Tortoise-SVN 出现“unable to connect to a repository at url no element found”解决办法
安装要SVN server服务器后,建立自己的Repositories,创建自己的项目文件夹 如,https://xxxxxxxxxx.com:8443/ 安装Tortoise-svn进行设置目标链接 ...
- hdu 4496 D-City(并查集)
Problem Description Luxer is a really bad guy. He destroys everything he met. One day Luxer went to ...
- 【LeetCode】 Populating Next Right Pointers in Each Node 全然二叉树
题目:Populating Next Right Pointers in Each Node <span style="font-size:18px;">/* * Le ...
- Android中 Http请求
HttpClient public class MainActivity extends Activity { private Button button; @Override protected v ...