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


Posted in Javascript onMarch 08, 2016

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

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

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

<body>
<form id="form1" runat="server">
<table class="tble">
<tr><td class="td1">用户名 <input type="text" class="td" /></td></tr>
<tr><td class="td2">密码 <input type="text" class="td"/></td></tr>
<tr><td class="td3">邮箱 <input type="text" class="td" /></td></tr>
<tr><td class="td4">确认密码 <input type="text" class="td" /></td></tr>
<tr><td><input class="btton1" type="button" value="提交" /></td><td><input class="btton2" type="reset" value="重置" /></td></tr>
</table>
</form>
</body>

2,然后是CSS代码:

<style type="text/css">
.tble
{
font-size:14px;
text-align:right;
position:absolute;
left:550px;
top:150px;
}
.td
{
border:2px #CCCCCC solid;
}
.btton1
{
position:absolute;
left:65px;
}
.btton2
{
position:absolute;
left:110px;
}
.span
{
color:#cccccc;
font-size:14px;
text-align:right;
}
.spanPwd2
{
color:Red;
}
.spanPwd3
{
color:Red;
}
.spanPwd4
{
color:Red;
}
.spanPwd5
{
color:Green;
}
.spanPwd6
{
color:Red;
}
</style>

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

<script src="jquery-1.4.1.min.js" type="text/javascript"></script>

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

<script type="text/javascript">
$(function () {
GetStyle();
GetPassword();
GetEmail();
function GetStyle() {
$("input.td").focus(function () {
//===================密码样式处理===================================
$(this).css("border", "2px #00ccff solid");
var span = "<td class='span'><span>请输入密码</span></td>";
$(this).parent().parent().find("td.td2").after(span);
$(this).parent().parent().find("td.spanPwd2").remove();
$(this).parent().parent().find("td.spanPwd3").remove();
$(this).parent().parent().find("td.spanPwd4").remove();
$(this).parent().parent().find("td.spanPwd5").remove();
//==================================================================
//================邮箱样式处理==============================
$(this).css("border", "2px #00ccff solid");
var spanEmail = "<td class='span'><span>请输入正确邮箱地址</span></td>";
$(this).parent().parent().find("td.td3").after(spanEmail);
$(this).parent().parent().find("td.spanPwd6").remove();
$(this).parent().parent().find("td.spanPwd5").remove();
//===================用户名样式处理========================
$(this).css("border", "2px #00ccff solid");
var spanEmail = "<td class='span'><span>请输入正确用户名</span></td>";
$(this).parent().parent().find("td.td1").after(spanEmail);
$(this).parent().parent().find("td.spanPwd6").remove();
$(this).parent().parent().find("td.spanPwd5").remove();
})
}
//================确认密码的验证================================
//非空验证
//确认密码与原密码一致性的验证
function GetPassword() {
$("input.td").blur(function () {
//================密码验证=================================
//非空验证
if ($(this).val() == "") {
$(this).css("border", "2px red solid");
$(this).parent().parent().find("td.span").remove();
var span = "<td class='spanPwd2'><span>密码不能为空!</span></td>";
$(this).parent().parent().find("td.td2").after(span);
return false;
}
//密码长度的验证
else if ($(this).val().length < 6 || $(this).val().length > 12) {
$(this).css("border", "2px red solid");
$(this).parent().parent().find("td.span").remove();
var span = "<td class='spanPwd3'><span>密码长度必须为6位到12位之间!</span></td>";
$(this).parent().parent().find("td.td2").after(span);
return false;
}
//如果密码不为数字
else if (isNaN($(this).val()) == true) {
$(this).css("border", "2px red solid");
$(this).parent().parent().find("td.span").remove();
var span = "<td class='spanPwd4'><span>密码必须为数字!</span></td>";
$(this).parent().parent().find("td.td2").after(span);
return false;
}
else {
//密码格式通过
$(this).css("border", "2px #cccccc solid");
$(this).parent().parent().find("td.span").remove();
var span = "<td class='spanPwd5'><span>密码格式通过!</span></td>";
$(this).parent().parent().find("td.td2").after(span);
return true;
}
});
}
//=====================邮箱验证开始========================
function GetEmail() {
$(".td3 input").blur(function () {
var patten = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
//非空验证
if ($(".td3 input").val() == "") {
$(this).css("border", "2px red solid");
$(this).parent().parent().find("td.span").remove();
var spanxEmail = "<td class='spanPwd6'><span>邮箱不能为空!</span></td>";
$(this).parent().parent().find("td.td3").after(spanxEmail);
return false;
}
//邮箱格式验证
else if (patten.test($(".td3 input").val()) == false) {
$(this).css("border", "2px red solid");
$(this).parent().parent().find("td.span").remove();
var span = "<td class='spanPwd4'><span>邮箱格式不正确,请重新填写 !</span></td>";
$(this).parent().parent().find("td.td3").after(span);
return false;
} else {
//邮箱格式通过
$(this).css("border", "2px #cccccc solid");
$(this).parent().parent().find("td.span").remove();
var spanEmail = "<td class='spanPwd5'><span>邮箱格式通过!</span></td>";
$(this).parent().parent().find("td.td3").after(spanEmail);
return true;
}
});
}
//==========================邮箱验证结束============================
//================用户名验证=================================
function GetUserName() {
$(".td1 input").blur(function () {
//非空验证
if ($(this).val == "") {
$(this).css("border", "2px red solid");
$(this).parent().parent().find("td.span").remove();
var span = "<td class='spanPwd6'><span>用户名邮箱不能为空!</span></td>";
$(this).parent().parent().find("td.td1").after(span);
return false;
}
//用户名长度的验证 
else if ($(this).length < 4 || $(this).length > 20) {
$(this).css("border", "2px red solid");
$(this).parent().parent().find("td.span").remove();
var spanxEmail = "<td class='spanPwd6'><span>用户名格式不对,只能输入4-20字符!</span></td>";
$(this).parent().parent().find("td.td1").after(spanxEmail);
return false;
}
//用户名格式验证通过
else {
$(this).css("border", "2px #cccccc solid");
$(this).parent().parent().find("td.span").remove();
var spanUserName = "<td class='spanPwd5'><span>用户名格式通过!</span></td>";
$(this).parent().parent().find("td.td3").after(spanUserName);
return true;
}
});
}
//========================点击按钮与服务器互交验证==============
$("tr td input.btton1").click(function () {
if (GetUserName() && GetEmail() && GetPassword()) {
var userName = $("td.td1 input").val(); //用户名 
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, userPwd, userRepass, 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("对不起,你的输入有误,请检查输入");
}
})
}
});
</script>

5,实现如下效果:

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

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

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

Javascript 相关文章推荐
js实现表格字段排序
Feb 19 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
javascript常用的方法分享
Jul 01 Javascript
Prototype框架详解
Nov 25 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 #Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 #Javascript
Angularjs material 实现搜索框功能
Mar 08 #Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 #Javascript
三种Node.js写文件的方式
Mar 08 #Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 #Javascript
理解javascript正则表达式
Mar 08 #Javascript
You might like
php数字转汉字代码(算法)
2011/10/08 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
php内嵌函数用法实例
2015/03/20 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
JS的replace方法详细介绍
2012/11/09 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
python写入已存在的excel数据实例
2018/05/03 Python
Python os.access()用法实例
2019/02/18 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
C#面试题问题集
2016/04/02 面试题
室内趣味活动方案
2014/08/24 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
刑事案件上诉状
2015/05/23 职场文书
公司员工奖惩制度
2015/08/04 职场文书
《活见鬼》教学反思
2016/02/24 职场文书