jQuery表单验证功能实例

本文实例讲述了jQuery表单验证功能。分享给大家供大家参考。具体如下：

这里使用jquery实现的表单验证效果，以埃阿斯方式验证你的表单是否填写正确，如果验证不通过，会将表单元素背景变成红色，并给出提示信息，简单实用，jquery表单验证功能已经有很多了，本款表单验证特效看上去更简单，不懂埃阿斯的朋友，或许直接套用即可实现无刷新表单验证功能。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-table-form-check-codes/

具体代码如下：

！DOCTYPE html heart heta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8' /titlejQuery表单验证/titlestyle type='text/css'body，input，text area { font-size :12 px行高：18 pxfont-family:Verdana，日内瓦，无衬线；}输入{ width:200px}。提交{ width:120px} #错误{ color : redfont-size :10 px；display:none}。需求填充{背景：红色；颜色：白色；}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(文档)。就绪(函数(){ //将所有必填字段的身份放在这里。必选=['name '，' email '，' message ']；//如果使用#电子邮件或#错误以外的身份证，则在此替换为email=$(' # email ')；错误通知=$(" # error ")；//当字段中显示的文本不正确时，请填写此字段。电子邮件错误='请输入有效的电子邮件。$(“# form”).submit(function(){//验证(I=0；I required . lengthi){ var input=$(' # '必选[I])；if((输入。val()==' ')| |(输入。val()==emptyerror)){ input。addCLaSS('需要填充')；输入。val(emptyerror)；错误通知。法丁(750)；} else { input。移除类(“需要填充”)；} } //验证电子邮件如果(！/^([a-zA-Z0-9_\.\-]) \@(([a-zA-Z0-9\-]) \ .)([a-zA-Z0-9]{2，4}) $/.测试(电子邮件。val()){电子邮件。addclass('需要填充')；电子邮件。val(电子邮件错误)；}//如果页面上的任何输入都有“需要填写”类，则表单不会提交，如果($(“:输入”).有类('需要填充'){ return false} else {错误通知。hide()；返回真；} });//当用户单击表单中的任何字段$(':input ')时，清除这些字段focus(function(){ if ($(this)).有类('需要填充'){ $(this).val(" ")；$(这个)。移除CLaSS('需要填充')；} });});/script/head dyform action=' mail。PHP ' id=' for form ' name=' for form ' method=' post ' plabel for=' name ' name/label br/input id=' name ' type=' text ' value=' name '/p plabel for=' email ' e-mail/label br/input id=' email ' type=' text ' value=' name=' email '/p plabel for=' message ' message/label br/text area id=' message ' rows=' 7 '表单中有错误信息！/p/表单/正文/html希望本文所述对大家的jquery程序设计有所帮助。