简单的Jquery表单验证

本段代码举了一个最简单的表单验证实例,就是判断输入框是否为空而已,大家可以根据这个原理,加入正则表达式判断,实现各种功能强大的表单验证功能

<html>
    <head>
        <title>Validate empty fields</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>简单的Jquery表单验证ersonal</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>
门户网站源码
该片段来自于http://www.huiyi8.com/webyuanma/menhu/

简单的Jquery表单验证,布布扣,bubuko.com

简单的Jquery表单验证

上一篇:memcached与.NET的融合使用(二)


下一篇:mvc扩展的HTML方法