使用JQuery实现智能表单验证功能

前端之家收集整理的这篇文章主要介绍了使用JQuery实现智能表单验证功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先给大家展示下表单效果图,具体效果如下所示:

1.前台一开始用JQuery实现,先来上HTML标记:

用户名

2,然后是CSS代码:

3.编写JQUery代码前需要引入JQuery支持文件:

4.现在开始编写JQuery代码:

用户名样式处理======================== $(this).css("border","2px #00ccff solid"); var spanEmail = "请输入正确用户名 12) { $(this).css("border","2px red solid"); $(this).parent().parent().find("td.span").remove(); var span = "密码长度必须为6位到12位之间!用户名验证================================= function GetUserName() { $(".td1 input").blur(function () { //非空验证 if ($(this).val == "") { $(this).css("border","2px red solid"); $(this).parent().parent().find("td.span").remove(); var span = "用户名邮箱不能为空!用户名长度的验证 else if ($(this).length < 4 || $(this).length > 20) { $(this).css("border","2px red solid"); $(this).parent().parent().find("td.span").remove(); var spanxEmail = "用户名格式不对,只能输入4-20字符!用户名格式验证通过 else { $(this).css("border","2px #cccccc solid"); $(this).parent().parent().find("td.span").remove(); var spanUserName = "用户名格式通过!用户名 var userPwd = $("td.td2 input").val(); //密码 var userRepass = $("td.td3 input").val(); //确认密码 var email = $("td.td4 input").val(); //邮箱 GetAjax(userName,userPwd,userRepass,email); } }); function GetAjax(userName,email) { var json = [{ "userName": userName,"userPwd": userPwd,"userRepass": userRepass,"email": email}]; $.post("ProcessResult.aspx?jon=" + json,function (data) { if (data == "false") { alert("用户名重复了,请重新输入!"); } else if (data == "ok") { alert("注册成功!"); } else { alert("对不起,你的输入有误,请检查输入"); } }) } });

5,实现如下效果:

我没有实现后台JQuery校验,下次有机会一并补上,这次先写到这里,只实现纯前端的效果

关于使用JQuery实现智能表单验证功能的相关知识就给大家介绍到这里,希望对大家有所帮助!

猜你在找的jQuery相关文章