如何使用ajax表单验证,使用ajax进行异步表单验证

在传统的Web应用中,用户的身份验证是通过向服务器提供表单,服务器对表单中的用户信息进行验证,然后返回验证的结果,在这样的处理方式中,客户端必须等到服务器返回处理结果才能进行别的操作,而且在这个过程中还会刷新整个页面。

在Ajax的处理方式中,可以把用户的信息通过XMLHttpRequest对象异步发送给服务器,在服务器完成对用户身份信息的处理后,把处理结果通过XMLHttpRequest对象返回用户,以异步的方式在不刷新页面的情况下完成对用户身份的验证。

利用Ajax实现对登录数据的验证。假设正确的用户名为“张三”,正确的密码为“123456”。在用户登录的时候判断用户名和用户密码是否正确,如果正确则跳转到欢迎页面;否则,在登录页面提示错误。

表单页面login.html

请输入用户名:

请输入密码:

点击“登录”按钮时,调用fromCheck()函数使用ajax异步验证用户信息。

function fromCheck(){

var userName = document.getElementById("userName").value;

var userPwd = document.getElementById("userPwd").value;

var url ="/ajax/check"; //ajax向该处发出检查用户信息的请求

var params = "userName="+userName+"&userPwd="+userPwd;

灵活好用的jq表单验证,自己封装可按照验证需求添加验证方法,不需要修改验证整体结构,内含使用说明。 var arr = new Array(); /* */ //用户验证 arr[0] = new XQValidation(); arr[0].XChecksetcont("3-12长度,字母,数字,下划线", "", "表单不能为空", "验证失败", "此用户已存在", "此用户可以注册"); arr[0].posturl("/FormValidation/ajax/ajax-validation.asmx/user_isNull", "name"); arr[0].check("tname", "td1", "checkusername", true, true); //密码验证 arr[1] = new XQValidation(); arr[1].XChecksetcont("6-20长度,字母,数字,和其他符号", "ok", "表单不能为空", "wrong", "表单不能为空"); arr[1].check("tpass", "td2", "checkpassword", true, false); //邮箱验证 arr[2] = new XQValidation(); arr[2].XChecksetcont("正确邮箱", "ok", "表单不能为空", "wrong"); arr[2].check("tmail", "td3", "checkemail", true, false); //联系方式验证 arr[3] = new XQValidation(); arr[3].XChecksetcont("正确手机,非必须", "ok", "表单不能为空", "wrong"); arr[3].check("tmobile", "td4", "checkcontactway", true, false); //QQ验证 arr[4] = new XQValidation(); arr[4].XChecksetcont("qq,非必须", "ok", "表单不能为空", "wrong"); arr[4].check("tqq", "td5", "checkqq", false, false); //验证码验证 arr[5] = new XQValidation(); arr[5].XChecksetcont("", "ok", "表单不能为空", "wrong"); arr[5].check("tcode", "td6", "checknull", true, false); //重复密码验证 arr[6] = new XQValidation(); arr[6].XChecksetcont("", "", "表单不能为空", "密码不匹配"); arr[6].check("tapass", "td7", "checkpassword_", true, false); /* *summary:提交表单验证 */ function formok() { for (var i = 0; i < arr.length; i++) {//循环遍历验证对象 if (!arr[i].getstate()) { arr[i].alertwrong(); return false } } //判断两次输入的密码是否一样 if (!chkapass($("tapass").value)) { arr[6].alertwrong(); return false; } return true; }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值