Ajax 表单验证 实现代码

兼容: opera 9.6 + chrome 2.0 + FF 3 + IE 6
效果:一边输入一边实现验证
 
环境:ruby 1.8.6 + rails 2.1.0 + windows
核心代码:
html:
浏览器禁用javascript时显示提示信息:


代码如下:

<noscript>
<div style="color:red">您的浏览器不支持javascript,部分功能无法使用</div>
</noscript>

当浏览器禁用JS后,提交按钮不可用,实现客户端验证!


代码如下:

<div id="js_support" style="display:none">
<p id="pSubmit"><input type="submit" name="registerform" value="注 册" onclick="return submitform();"/></p>
</div>
<script type="text/javascript">
$("js_support").style.display = "block";
</script>

通过javascript的onfocus和onkeyup实现监听表单域:
<input type="text" class="textbox" onfocus="checkLogin(this);" onkeyup="checkLogin(this);" style="width:120px;" />
ajax的自动验证:其中用到一个bp.js,是已经封装好的xmlhttprequest对象的,可以到我下面的项目中下载到


代码如下:

function checkLogin(node) {
clearError();
if (bp.String.trim(node.value)!="") {
var url = "/test/response_validate";
var params = [];
params["command"] = "logincheck";
params["login"] = encodeURI(bp.String.trim(node.value));
var v = validatePath("login",params["login"]);
if (v==""){
bp.Io.XhrGet({
url: url,
mimeType: "text/json",
params: params,
load: function(type, data, e) {
if (data==true){
loginError = document.getElementById("valstatus").innerHTML = '登录名已存在';
document.getElementById("loginValidate").className = "icon_cross";
node.className = "input_error";
loginValid = false;
} else {
loginError = "";
document.getElementById("loginValidate").className = "icon_ok";
node.className = "textbox";
loginValid = true;
}
},
error: function(type, data, e) {}
});
} else {
loginError = document.getElementById("valstatus").innerHTML = v;
document.getElementById("loginValidate").className = "icon_cross";
node.className = "input_error";
loginValid = false
}
} else {
loginError = validatePath("login", "");
document.getElementById("loginValidate").className = "";
node.className = "textbox";
}
}

后台:
这个是rails的后台,通过render :partial返回数据给客户端,当然可以是任何平台下的,例如java平台下的可以用servlet的out.println(...)返回


代码如下:

def response_validate
if params[:login]
name = params[:login]
puts name
if name == "aaaaaa"
@value = true
render :partial => 'show_info'
else
@value = false
render :partial => 'show_info'
end
end
end

完整源码下载:
jsvalidate.rar

赞 (0)

相关推荐

  • Ajax实时验证用户名/邮箱等是否已经存在的代码打包

    Ajax实时验证用户名/邮箱等是否已经存在的代码打包

    今天分享一个"利用Ajax技术来检测用户名是否存在"的例子. 利用Ajax技术来检测用户名是否存在的原理流程图: 最终结果截图: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

  • 解决ajax返回验证的时候总是弹出error错误的方法

    解决ajax返回验证的时候总是弹出error错误的方法

    发一个简单案例: 前台: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>用户登录</title>

  • jquery ajax 登录验证实现代码

    使用 jquery 框架:下载 jquery.js 新建一个 web 工程 ajax : 在 webRoot 下新建一个 jslib 文件夹:专门存放 js 文件: 在 webRoot 下新建一个 html/jsp 页面: login.html 复制代码 代码如下: <script type = "text/javascript" src = "jslib/jquery.js"></ script> <script type = &qu

  • asp+Ajax简单客户登陆验证

    服务器端操作方便之处我就不吹了,地球人都知道,它最烦莫过于页面刷新,头都被刷晕了,而且他在刷新的时候,还触发服务器端的事件(解决方案:http://skylaugh.cnblogs.com/archive/2006/06/05/418010.html),现在Ajax的出现,他们的结合是发展的必然! 一.介绍一下Ajax在Asp.Net中的基本使用     1.在工程中引入Ajax.dll文件. Ajax.dll实现XmlHttpRequest请求服务器的实现细节..net项目中,添加上对其的引用

  • Ajax 用户名验证是否存在

    客户端收集表单信息. 使用XMLHttpRequest对象提交到服务器. 服务器完成验证的逻辑,返回结果信息. 浏览器端根据服务器返回的信息对用户做出一定的提示. 不过由于我的空间不支持任何服务器段语言,所以把本应在服务器的逻辑搬到了浏览器,由JavaScript来做,服务器只负责提供一个用户名的列表.最后的效果如下,试着输入test,cainiao8这些用户名,都会显示已注册. JavaScript代码分析 首先,当文档载入完毕的时候,给表格设置change事件的响应函数ajaxValidat

  • 基于jQuery实现的Ajax 验证用户名是否存在的实现代码

    基于jQuery实现的Ajax 验证用户名是否存在的实现代码

    实例: 1.请求页面AJax.aspx HTML代码 复制代码 代码如下: <div> <input id="txtName" type="text" /><input type="button" value="查看用户名是否存在" id="btn" onclick="JudgeUserName();" /> <div id="show

  • Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存）

    Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存）

    其中用到了jquery插件来验证用户名哦,这里是利用jquery ajax来验证用户名是否存在哦.大家看看效果图,后面将附上源码下载. jquery框架实现的ajax 验证用户名是否存在的部分JS 复制代码 代码如下: $("#accounts").formValidator({onshow:"请输入用户名",onfocus:"用户名至少4个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputVal

  • formvalidator验证插件中有关ajax验证问题

    jquery formvalidator插件是不错的国产验证插件了,做点普通的校验也是很方便的,但最近遇到个问题,发现如果表单整个表单是AJAX提交时,就不能按传统的做法了,比如: 复制代码 代码如下: $ajax.post("...............") $.formValidator.initConfig({formID:"applyForm",onError:function(msg){alert(msg)}}); $("#reason&quo

  • PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)

    PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)

    前 言 直接上代码有点不厚道.于是按照天朝传统,整段描述吧....(本人语言表达能力有限,大家忍着看) 功 能 在网站注册用户时使用,主要为了无刷新异步验证用户输入的用户名或者Email是否已注册. 这功能大家肯定见过,大多数网站都有的,我一直对这个功能很感兴趣,所以这几天研究了下 jQuery + Ajax 整了一个功能不算完善,但足以应付普通使用的代码 (更牛的功能大家自己去发掘) 文 件 说 明 reg.php //为注册页面 check_user.php //为用户验证页面 (GET,P

  • Ajax 表单验证 实现代码

    Ajax 表单验证 实现代码

    兼容: opera 9.6 + chrome 2.0 + FF 3 + IE 6 效果:一边输入一边实现验证  环境:ruby 1.8.6 + rails 2.1.0 + windows 核心代码: html: 浏览器禁用javascript时显示提示信息: 复制代码 代码如下: <noscript> <div style="color:red">您的浏览器不支持javascript,部分功能无法使用</div> </noscript>

  • JS表单验证的代码(常用)

    最近没有项目做,有点空余时间,小编把日常比较常用的js表单验证代码整理分享到我们平台,供大家学习,需要的朋友参考下吧! 注册验证: <script language="JavaScript" src="js/jquery-1.9.1.min.js" type="text/javascript"></script> //验证表单 function vailForm(){ var form = jQuery("#ed

  • 动态表单验证的操作方法和TP框架里面的ajax表单验证

    动态表单验证的操作方法和TP框架里面的ajax表单验证

    动态验证的操作方法 function yz() { if(empty($_POST)) { $this->display(); } else { $db=D("Info"); $shu=array( array("Code","require","代号不能为空",0,"regex",3), ); if(!$db->validate($shu)->create()) { echo $db-&

  • AngularJs表单验证实例代码解析

    AngularJs表单验证实例代码解析

    常用的表单验证指令如下详情: 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3.

  • JavaScript表单验证完美代码

    JavaScript表单验证完美代码

    用原生JS写一个简单的表单验证 首先,是html部分 <div class="divAll"> <div id="titles">新用户注册</div> <div id="contents"> <h3>基本信息</h3> <hr width="95%" color="#f2f2f2"/> <form action=&q

  • BootStrap表单验证实例代码

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 下面给大家分享bootstrap表单验证实例代码,具体代码如下所示: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@

  • Jquery练习之表单验证实现代码

    Jquery练习表单验证 复制代码 代码如下: <body> <form action="" method="post" id ="myform"> <table> <tr> <td>姓名:</td> <td><input type ="text" id = "name" name ="name"&

  • ajax jquery 异步表单验证示例代码

    ajax jquery 异步表单验证示例代码

    文件目录:  html代码: 复制代码 代码如下: <html> <head> <title>异步表单验证</title> <script type='text/javascript' src='jquery.js' ></script> <script> function checkname(){ //$("input[name='name']").val() $.ajax({ type:"

  • jquery 实现表单验证功能代码(简洁)

    jquery 实现表单验证功能代码(简洁)

    1. 页面效果,自动提示验证信息... 2. 页面代码 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表单验证页面</title> <link href="../Scripts/themes/default/easyui.css" rel="stylesheet" type="text/css

  • JavaScript表单验证实现代码

    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单中的必填项目? 用户输入的邮件地址是否合法? 用户是否已输入合法的日期? 用户是否在数据域 (numeric field) 中输入了文本? 必填(或必选)项目 下面的函数用来检查用户是否已填写表单中的必填(或

随机推荐