jQuery表单验证的简单示例

本文说明了jQuery表单验证的简单用法。分享给大家参考，如下：

这几天，我一直在做一个表单验证页面。为了实现一个友好的界面，我特意复制了一个360 buypage，模仿了一个页面

Jquery表单验证

是验证表单中的所有信息都是必需的

//注册页面验证机制$ ('# username ')。focus(function(){//使用Focus()表单并执行以下代码$ ('# username _ error ')。removeclass(“错误”)。当光标在输入框中时为html(“”)；$(' # username _ success ')。removeClass(“成功”)；$(这个)。remove class(' highlight 2 ')$(' # username _ error ')。addclass ('focus ')。html('学生id必须由11位数字组成。例如104084002 xx’)；$(这个)。add CLaSS(' highlight 1 ')；});$ ('#用户名')。blur(function(){//使用blur()形式，并执行以下代码$value=$。修剪($(这个)。当光标离开输入框时，val())；//移除输入数据周围的空格if ($ value)。长度==0) {$ ('# username _ error ')。addclass('错误')。html(‘学号不能为空’)；$(这个)。add CLaSS(' highlight 2 ')；返回false} else { $('#username_error ')。removeClass(“焦点”)。html(“”)；$(这个)。remove CLaSS(' highlight 1 ')；if($。isNumeric($ value)){ if($ value . length==11){ $(' # username _ success ')。add CLaSS(' success ')；$('#username_error ')。removeClass(“错误”)。html(“”)；$(这个)。removeClass('highlight2 ')返回true} $ ('# username _ error ')。addclass('错误')。html('学生编号必须是11位数字')；$(这个)。add CLaSS(' highlight 2 ')；返回false} $ ('# username _ error ')。addclass('错误')。html('学生编号必须是数字')；$(这个)。add CLaSS(' highlight 2 ')；返回false}});以上是JQUERY的部分代码，是为了展示学生证的现状和效果而进行的。以下是所用样式的代码列表

. highlight1{ border:1px实心# EFA100outline:2px实心# FFDC97}.highlight2{ border:1px实心# f00outline:1px实心# FFC1C1color: # f00}.focus { color: # 999线高：22 px；文本对齐：居中；}.成功{ background : URL(images/pwdstrengh . gif)no-repeat-105 px 0；}还列出了一些HTML代码

Divspan*学生id:/span输入类型=' text ' id=' username ' name=' userid '/label id=' username _ successed '/label//如果符合要求，在此添加successed样式。否则，隐藏span class='clr'/span //清除浮动div id='username_error'/div //如果不符合要求，现在就关注样式。/div这完成了对输入的学生编号字段的验证。效果很友好。

其他输入框的验证基于相同的模式。没有困难。

原则：

是添加类和移除类。取得成果。

更多对jQuery感兴趣的读者，请查看本网站主题：《jQuery表单操作总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》。

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