基于jquery实现智能表单验证操作


Posted in Javascript onMay 09, 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 相关文章推荐
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 #Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 #Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 #Javascript
JavaScript 函数的执行过程
May 09 #Javascript
jQuery绑定事件-多种实现方式总结
May 09 #Javascript
js原型链与继承解析(初体验)
May 09 #Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 #Javascript
You might like
为PHP初学者的8点有效建议
2010/11/20 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
ExtJS下grid的一些属性说明
2009/12/13 Javascript
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
Underscore源码分析
2015/12/30 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
python Pygame的具体使用讲解
2017/11/03 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
Python正则表达式指南 推荐
2018/10/09 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
Python元组知识点总结
2019/02/18 Python
简单了解python PEP的一些知识
2019/07/13 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
学习Python列表的基础知识汇总
2020/03/10 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
大专自我鉴定范文
2013/10/23 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
护理见习报告范文
2014/11/03 职场文书
学校节水倡议书
2015/04/29 职场文书
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android