表单验证

使用方法：
1.引入jQuery库和Validation插件



2.确定哪个表单需要被验证
  

3.针对不同的字段，进行验证规则编码，设置字段相应的属性
$(document).ready(function(){
    $("#signupForm").validate({
        rules: {
            firstname: {
                required: true,
                minlength: 2,
                maxlength: 8
            }
        },
        messages: {
            firstname: {
                required: '请输入用户名',
                minlength: '请至少输入2个字符',
                maxlength: '最多不能超过8个字符'
            }
        }
    });  
});

4.自定义验证规则
$(document).ready(function(){
    $("#signupForm").validate({
        rules: {
            firstname: {
                required: true,
                minlength: 2,
                maxlength: 8
            },
            realname: {
                required: true,
                realname :true
            }
        },
        messages: {
            firstname: {
                required: '请输入用户名',
                minlength: '请至少输入2个字符',
                maxlength: '最多不能超过8个字符'
            },
            forrealname: {
                required: '请输入真实名',
                realname: '请输入合法的真实名'
            }
        }
    });  
});


$.validator.addMethod(
    "realname", //验证方法名称  
    function() {//验证规则 
        var returnVal = false; 
        if($("#realname").val()=="cici"){
            returnVal = true;
        } 
        return returnVal;
    },   
    '请输入真实名'//验证提示信息 
);


5.后台处理程序校验


6.两次输入密码不一致: equalTo
$("#signupForm").validate({
        rules: {
            confirm_password: {
                required: true,
                equalTo: "#password"  //要匹配的id :#ID
            }
        },
        messages: {
            confirm_password: {
                required: '请输入确认密码',
                equalTo: '两次输入的密码不一致'
            }
        }
    });  

7. radio,checkbox和select的验证

   7.1  必须选中一个 : class="{requred:true}"
    <input  type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
    <input  type="radio" id="gender_female" value="f" name="gender"/>

8.更改错误信息显示样式
    设置错误提示的样式，可以增加图标显示，在该系统中已经建立了一个validation.css专门用于维护校验文件的样式

   input.error { border: 1px solid red; }
    label.error {
        background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;

        padding-left: 16px;

        padding-bottom: 2px;

        font-weight: bold;

        color: #EA5200;
    }
    label.checked {
      background:url("./demo/images/checked.gif") no-repeat 0px 0px;
    }