使用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 相关文章推荐
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
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获取网站域名和地址的代码
2008/08/17 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
php简单图像创建入门实例
2015/06/10 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
图片完美缩放
2006/09/07 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
python编程嵌套函数实例代码
2018/02/11 Python
pycham查看程序执行的时间方法
2018/11/29 Python
python3下载抖音视频的完整代码
2019/06/05 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
电子商务专业实习生自我鉴定
2013/09/24 职场文书
中秋节主持词
2014/04/02 职场文书
家长寄语大全
2014/04/02 职场文书
会议主持人开场白台词
2015/05/28 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
Python代码风格与编程习惯重要吗?
2021/06/03 Python
Python中可变和不可变对象的深入讲解
2021/08/02 Python
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js