jquery.validate

jquer.validate是一个验证表单的框架。

使用它首先要引入jquery.js 其次再引入jquery.validate.min.js

想了解更多方法请访问：http://www.runoob.com/jquery/jquery-plugin-validate.html

<script src="jquery.js"></script>
<script src="jquery.validate.min.js"></script>
<script>
      $(function(){     //当文档加载完成后执行
        $('#demoForm').validate({   //validate 实现表单的验证功能
            rules:{                           //验证的方法
                username:{               //验证用户名
                    required:true,        //表示必填
                    minlength:6,         //表示字符最小长度
                    maxlength:9         //最大长度
                },
                password:{                //验证密码
                    required:true,        //同上
                    minlength:6,
                    maxlength:9
                },
                age:{                              //验证年龄
                    range:[18,80],           // 输入值必须介于 18 和 80 之间。
                    digits:true                    //必须是整数  
                }
            },
            messages:{                       //验证不通过的时候返回的
                username:{
                    required:'此项必填！',
                    minlength:'用户名不少于6位',
                    maxlength:'用户名不超过9位'
                },
                password:{
                    required:'此项必填！',
                    minlength:'密码不少于6位',
                    maxlength:'密码不超过9位'
                },
                age:{
                    range:'年龄必须是18-80之间',
                    digits:'年龄必须是正整数'
                }
            }
        });
    });
</script>
<form id="demoForm">
    <p>
        <label for="username">username</label>
        <input type="text" name="username" id="username"/>
    </p>
    <p>
        <label for="password">password</label>
        <input type="text" name="password" id="password"/>
    </p>
    <p>
        <label for="age">age</label>
        <input type="text" name="age" id="age"/>
    </p>
    <p>
        <input type="submit" value="提交" id="btn"/>
    </p>
</form>

希望能帮到大家！！