Jquery表单验证的简单实例
发布时间：2015-11-13 编辑：jiaochengji.com
分享一个用jquery实现表单验证的简单例子，判断输入框是否为空，有需要的朋友参考学习下。
本文分享的这段表单验证代码，主要是判断输入框是否为空，适合学习jquery的朋友作为入门参考。
效果图，如下：
代码：
<html> <head> <title>Jquery表单验证-Validate empty fields-www.jbxue.com</title> <style type="text/css"> body{font-family:"Trebuchet MS",verdana;width:450px;} .error{ color:red; } #info{color:#008000;font-weight:bold; } </style> </head> <body> <form> <fieldset> <legend><strong>Personal</strong></legend> <table> <tbody> <tr> <td>Name:* </td> <td><input type="text" class="required" /></td> </tr> <tr> <td>Address:* </td> <td><input type="text" class="required"/></td> </tr> <tr> <td>City: </td> <td><input type="text"/></td> </tr> <tr> <td>Country:* </td> <td><input type="text" class="required"/></td> </tr> </tbody> </table> </fieldset> <br/> <span id="info"></span> <br/> <input type="button" value="Check" id="check" /> </form> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var dataValid=false; $('#info').html('');//将结果提示也设置为空； $('.required').blur(function(){//对于required类的元素，如果失去焦点了，则.... var cur=$(this);//获取当前元素 cur.next('span').remove();//将错题提示的<span>给移走 if($.trim(cur.val())=='') {//判断如果输入为空； cur.after('<span class="error">Mandatory field!</span>');//则在输入框后添加错题提示信息； dataValid=false; }else{dataValid=true;} }); $('#check').click(function(){//点击了Check按钮之后，执行.... if(dataValid) { $('#info').html('Validation OK');//提示通过验证 }}); }); </script> </body> </html>您可能感兴趣的文章：
jQuery表单验证插件 jQuery.validity
jquery 的非空验证操作
jQuery表单验证插件 Form Validation
使用jQuery validate 验证注册表单实例演示
juery validate 验证注册表单的例子
jQuery表单验证插件 Validation
php验证码大全(实例分享)
jQuery表单验证插件 jqValidate
php彩色验证码的简单例子
jQuery表单美化和验证插件 Formly
[关闭]