validate表单验证入门

validate表单验证入门

validation简介

是一款优秀的表单验证插件。
特点：
- 内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则。
- 自定义验证规则：可以很方便的自定义验证规则。
- 简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能。
- 实时验证：可以通过keyup或bulr事件触发验证，而不仅仅在表单提交的时候验证。

下载：
http://bassistance.de/jquery-plugins/jquery-plugin-validation/

validation使用

案例：

<!--validate.js是建立在jquery之上的，所以得先导入jquery的类库-->
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>
<!--引入国际化js文件-->
<script type="text/javascript" src="../../js/messages_zh.js" ></script>
<script>
    $(function(){
        $("#registForm").validate({
            rules:{
                user:{
                    required:true,
                    minlength:2
                },
                password:{
                    required:true,
                    digits:true,
                    minlength:6
                },
                repassword:{
                    required:true,
                    digits:true,
                    minlength:6,
                    equalTo:"[name='password']"
                },
                email:{
                    required:true,
                    email:true
                },
                username:{
                    required:true,
                    minlength:2
                },
                sex:{
                    required:true
                }
            },
            messages:{
                user:{
                    required:"用户名不能为空!",
                    minlength:"用户名不得少于2个字符!"
                },
                password:{
                    required:"密码不能为空!",
                    digits:"密码必须是数字!",
                    minlength:"密码长度不得低于6位!"
                },
                repassword:{
                    required:"确认密码不能为空!",
                    digits:"密码必须是数字!",
                    minlength:"密码长度不得低于6位!",
                    equalTo:"两次密码不一致!"
                },
                email:{
                    required:"邮箱不能为空!",
                    email:"邮箱格式不正确!"
                },
                username:{
                    required:"姓名不能为空!",
                    minlength:"姓名不得少于2个字符!"
                },
                sex:{
                    required:"性别必须勾选!"
                }
            },
            errorElement: "label", //用来创建错误提示信息标签
            success: function(label) { //验证成功后的执行的回调函数
                //label指向上面那个错误提示信息标签label
                label.text(" ") //清空错误提示消息
                    .addClass("success"); //加上自定义的success类
            }
        });
    })
</script>