首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于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实现智能表单验证功能的相关知识就给大家介绍到这里，希望对大家有所帮助！

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
学习javascript，实现插入排序实现代码
Jul 31 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象（五）
Jun 04 Javascript
简单实现js上传文件功能
Aug 21 Javascript
js实现登录注册框手机号和验证码校验（前端部分）
Sep 28 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 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
Pytesseract(1) Python(3) Flask(2) 柱状图(1) SFTP(3) GCN(1) PIL(1) 裁剪图片(1) 鲲鹏(1) 验证码(1)
You might like
PHP个人网站架设连环讲(四)
2006/10/09 PHP
使用字符串函数输出整数化的PHP版本号
2006/10/09 PHP
在IIS下安装PHP扩展的方法（超简单）
2017/04/10 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
JS 设计模式之：工厂模式定义与实现方法浅析
2020/05/06 Javascript
[04:17]DOTA2完美盛典，rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
详解Django的model查询操作与查询性能优化
2018/10/16 Python
python write无法写入文件的解决方法
2019/01/23 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
python相对企业语言优势在哪
2020/06/12 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
英国最大的网上药品商店：Chemist Direct
2017/12/16 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
ktv好的活动方案
2014/08/15 职场文书
科技工作者先进事迹
2014/08/16 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
中层干部考核评语
2015/01/04 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
详解Flask开发技巧之异常处理
2021/06/15 Python
nginx服务器的下载安装与使用详解
2021/08/02 Servers