您的位置 首页 杂谈

jQuery表单验证简单示例

这篇文章主要介绍了jQuery表单验证的方法,结合简单实例形式分析了jQuery针对表单必填项进行验证的方法,需要的朋友可以参考下 本文实例讲述了jQuery表单验证简单用法。分享…

这篇文章主要介绍了jQuery表单验证的方法,结合简单实例形式分析了jQuery针对表单必填项进行验证的方法,需要的朋友可以参考下

本文实例讲述了jQuery表单验证简单用法。分享给大家供大家参考,具体如下:

这几天一直在做一个表单验证的页面,为了达到友好界面,特意去抄了360buy的页面,模仿写了一个页面

jquery 表单验证

就是验证表单里面所信息都为必填

//注册页面验证机制
$(“#username”).focus(function(){ //用focus()表单,当光标在输入框的时候执行下面的代码
$(“#username_error”).removeClass(“error”).html(” “);
$(“#username_succeed”).removeClass(“succeed”);
$(this).removeClass(“highlight2”)
$(“#username_error”).addClass(“focus”).html(“学号必须由11位数字组成。如:104084002xx”);
$(this).addClass(“highlight1”);
});
$(“#username”).blur(function(){ //用blur()表单,当光标离开输入框的时候执行下面的代码
$value = $.trim( $(this).val() ); //去掉输入数据左右的空格
if($value.length == 0 )
{
$(“#username_error”).addClass(“error”).html(“学号不能为空”);
$(this).addClass(“highlight2”);
return false;
}
else
{
$(“#username_error”).removeClass(“focus”).html(” “);
$(this).removeClass(“highlight1”);
if($.isNumeric($value))
{
if($value.length == 11)
{
$(“#username_succeed”).addClass(“succeed”);
$(“#username_error”).removeClass(“error”).html(” “);
$(this).removeClass(“highlight2”)
return true;
}
$(“#username_error”).addClass(“error”).html(“学号必须为11位”);
$(this).addClass(“highlight2”);
return false;
}
$(“#username_error”).addClass(“error”).html(“学号必须为数字”);
$(this).addClass(“highlight2”);
return false;
}
});

上面就是JQUERY部分代码,就进行了,对学号的现在和效果显示。下面是用到的样式的代码清单

.highlight1{
border:1px solid #EFA100;
outline:2px solid #FFDC97;
}
.highlight2{
border:1px solid #f00;
outline:1px solid #FFC1C1;
color:#f00;
}
.focus{
color:#999;
line-height:22px;
text-align:center;
}
.succeed{
background:url(images/pwdstrength.gif) no-repeat -105px 0;
}

也列举出部分HTML代码

*学号:

//如果符合要求这里就添加SUCCEED样式。否则隐藏
//清除浮动
//如果不符合要求就现在focus样式。

这样就完成了对输入学号字段的验证。效果友好。

其他的输入框的验证都是依样画葫芦。没什么难点了。

原理:

就是添加CLASS和移除CLASS。达到效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表单操作总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

  • jquery validate.js表单验证的基本用法入门
  • jquery表单验证使用插件formValidator
  • 基于Bootstrap+jQuery.validate实现Form表单验证
  • Jquery练习之表单验证实现代码
  • jQuery 表单验证插件formValidation实现个性化错误提示
  • Jquery插件easyUi表单验证提交(示例代码)
  • jquery 实现表单验证功能代码(简洁)
  • jQuery实现用户注册的表单验证示例
  • jQuery表单验证插件formValidator(改进版)
  • jquery插件制作 表单验证实现代码
  • jValidate 基于jQuery的表单验证插件
  • jquery 最简单易用的表单验证插件
  • jquery表单验证插件(jquery.validate.js)的3种使用方式

依据《信息网络传播权保护条例》第二十二条之规定,即“避风港原则”,本站所有文章及内容系第三方作者上传,如有侵权行为请及时联系本站删除,本站不对内容传播行为承担赔偿责任。

本文来自网络,不代表府谷新闻立场,转载请注明出处:http://www.fgdqw.cn/shehui/174399/

作者: 头条新闻

为您推荐

联系我们

联系我们

在线咨询: QQ交谈

府谷地方新闻网为您提供今日新闻,每日最新头条新闻,新闻头条最新消息,体育娱乐八卦等。
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部